How to hide a control based on the binding result

I think that pretty much everything is in the title. Here is an example:

<Select id="catComboBox" change="onChangeCat" items="{ path: '/ReasonCategorySet', sorter: { path: 'Zcat' } }">
    <core:Item key="{Zcat}" text="{Zdesc}"/>
</Select>

Based on the user connected, the Select may be emptyand I would like to hide this control once I know that there is no data in there.

How can I detect that the control has successfully loaded the data?

Answers:

Answer

The shortest possible solution is an expression binding. Example can be found here.

<Select id="catComboBox" 
        change="onChangeCat" 
        items="{ path: '/ReasonCategorySet', sorter: { path: 'Zcat' } }"
        visible="{=${/ReasonCategorySet}.length > 0}">
    <core:Item key="{Zcat}" text="{Zdesc}"/>
</Select>
Answer

Ok found a solution x) :

Here is the code :

this.oModel.attachRequestCompleted(function(data) {
    if (that.getView().byId("catComboBox").getItems().length === 0) {
      that.getView().byId("catComboBox").setVisible(false);
    }
  })
Answer

Alternatively you can bind visible property to the same model property and use special formatter which would assess if the category set has any items.

<Select id="catComboBox" 
        change="onChangeCat" 
        items="{ path: '/ReasonCategorySet', sorter: { path: 'Zcat' } }"
        visible="{ path: '/ReasonCategorySet', formatter: 'checkCount' }">
    <core:Item key="{Zcat}" text="{Zdesc}"/>
</Select>

and checkCount can be something like this:

checkCount: function(aItems) {
  return Array.isArray(aItems) && aItems.length > 0;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.