Wie verstecken Sie ein leeres Panel?

Question

Ich habe panels, die einige Komponenten (Tabellen, Formulare usw.) enthalten Ich binde visible Eigenschaften von Unterkomponenten mit meinem Modell. Manchmal sind alle Komponenten in einem Panel nicht sichtbar.

In diesen Fällen würde Ich mag Panel unsichtbar machen. Wie kann ich es tun?

das ist mein Panel Code:

<Panel expandable="true" expanded="true"> 
    <content> 
     <f:SimpleForm> 
      <Label text="MyLabel" /> 
      <Input visible="false" /> //set by a model binding, or by a function...or in other mode 
     </f:SimpleForm> 
    </content> 
</Panel> 

Wenn ich jede visible Eigenschaft der Kontrolle in content Aggregation steuere ich da kein richtiges Ergebnis, auch wenn die Platte leer ist, SimpleFormvisible Eigenschaft festgelegt haben zu wahr (default)

Answer 1

fand ich eine Lösung:

emptySimpleForm: function (a) { 
     var bVisible = false; 

     var aFormElements = this.mAggregations.form.mAggregations.formContainers[0].mAggregations.formElements; 
     _.forEach(aFormElements, function (oEl) { 

      _.forEach(oEl.mAggregations.fields, function(oFld){ 
       if (oFld.getProperty('visible') === true) 
        bVisible = true; 
      }) 
     }) 
     return bVisible; 

}, 

emptyPanel: function (a) { 
     var bVisible = false; 

     var aContent = this.mAggregations.content; 
     _.forEach(aContent, function (oEl) { 
      if (oEl.getProperty('visible') === true) 
       bVisible = true; 
     }) 

     return bVisible; 
}, 

eine Referenz hinzugefügt Funktionen Formatierer:

<Panel visible="{path: 'model>/', formatter: 'ui5bp.Formatter.emptyPanel'}" /> 


<f:SimpleForm visible="{path: 'model>/', formatter: 'ui5bp.Formatter.emptySimpleForm'}" /> 

Jetzt würde ich Bindung und meine Formatierer Funktion Insert in der xml einen Ausdruck wie

So etwas wie

visible="{= ${myPropOnModel} && ui5bp.Formatter.emptyPanel }" 

Answer 2

ich die visible Eigenschaft des Panel Ausdruck gebunden sichtbare Eigenschaften mit Hilfe Bindung mit der alle Panel Inhalt gesetzt würde:

<Panel visible="{= ${tableVisible} || ${/formVisible} || ${someOtherControlVisible} }"> 
    <content> 
     <Table visible="{tableVisible}">...</Table> 
     <Form visible="{formVisible}">...</Form > 
     <Input visible="{someOtherControlVisible}">...</Input> 
    </content> 
</Panel> 

Allerdings, wenn Ihr Inhalt ändert sich dynamisch, würde ich lieber gesetzt/den Inhalt entfernen, und prüfen, ob die Content-Aggregation Länge Panel: Eine Länge von 0 bis zu verstecken, sonst sichtbar

Answer 3

Dann steuern auch die Sichtbarkeit der Form?

<Panel 
    visible="{= ${labelVisible} || ${/inputVisible} }" 
    expandable="true" 
    expanded="true"> 
    <content> 
     <f:SimpleForm visible="{= ${labelVisible} || ${/inputVisible} }"> 
      <Label text="MyLabel" visible="{/labelVisible}"/> 
      <Input visible = "{/inputVisible}"/> 
     </f:SimpleForm> 
    </content> 
</Panel>