CODEWITHSUNDEEP
javascriptsapui5sap-fiori
flowx1710
flowx1710

Reputation: 187

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?

Upvotes: 0

Views: 80

Answers (3)

slkorolev
slkorolev

Reputation: 6001

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

Upvotes: 1

matbtt
matbtt

Reputation: 4232

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>

Upvotes: 2

flowx1710
flowx1710

Reputation: 187

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

Upvotes: 1

Related Questions