CODEWITHSUNDEEP
javascriptsapui5
padibro
padibro

Reputation: 1382

How hide an empty panel?

I have panels that contain some components (tables, forms etc.) I bind visible properties of sub components with my model. Sometimes all components in a panel are not visible.

enter image description here

In these cases, I would like to make panel invisible too. How can I do it?

this is my 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>

If I control each visible property of Control in content aggregation I don't have a right result because, even if the panel is empty, SimpleForm have visible property set to true (default)

Upvotes: 0

Views: 208

Answers (3)

padibro
padibro

Reputation: 1382

I found a solution:

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;
},

adding a reference to formatter functions:

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


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

Now I would like insert in the xml an expression binding AND my formatter function

Something like this

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

Upvotes: 0

Ji aSH
Ji aSH

Reputation: 3457

Then also control the visibility of the 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>

Upvotes: 0

Qualiture
Qualiture

Reputation: 4920

I would set the visible property of the Panel using all the Panel's content bound visible properties using expression binding:

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

However, if your content changes dynamically, I would rather set/remove the content, and check for the Panel's content aggregation length : A length of 0 to hide, otherwise visible

Upvotes: 1

Related Questions