Invisible-Prop of a UI5-Control bound to model-property. Control is shown until binding resolves

[haykma]

Hi Community,
i have an app where some ui5-controls (such as buttons) are visible only in specific states. So i bound the visible-attribute to a model-property.

Easy example:

<Button text="Press me" visible="{viewModel>/showButtons}"/>

if the showButtons Property of my model "viewModel" is true, the button is shown, if its false, the button is hidden.

so far so good.

But initially when rendering the view and maybee the model-loading has not yet completet, the button is initially show, even if the value of the "showButtons" property turns to false. Some users are confused of such controls to be shown and then hidden (and in our real scenario there are more controls than just one button-control, and the data is received via OData from a backend).
It would be better if a visible-property is bound to hide it until the binding resolves and then it remains hidden or is than shown.

Does anybody has a comparable scenario or problem and maybe has a solution or hack for it?

kind regards
Matthias

[haykma · Accepted solution]

Hi Community,

supported by Thorstens idea (look at the first answer) i digged deeper into the problem.

As i already said above, the code above is just an example. And my controls had a more complex expression binding combined with logical operators.

But the main issue is, that if an attribute in the expression binding for the visible-property comes from a model which i not yet resolved during rendering time, the control is show.
In my case my view started an asynchronous odata-request in the onInit-Method of the view and in success-handler i created a new Json-Model, which is than filled by some data from the odata-request entity.
Solution is, to have already created the Json-Model in the onInit-Handler and fill the properties, bound to the visible-attribut of the control, initially with false.

[ThorstenHoefer]

Initial the value is null. You can set null to false with:

visible="{= !!${viewModel>/showButtons}}"
or
visible="{= ${viewModel>/showButtons} || false}"
or
visible="{= ${viewModel>/showButtons} ? true: false}"

[haykma]

Hi Thorsten,
nice idea, but this also seems not work,,,

It looks like that the control is initially rendered when there is an expression binding and it is shown until the hole expression is resolved (or the model triggers a binding-update or so)

kind regards
Matthias

[ThorstenHoefer]

Hi Matthias,

do you initialize the view Model as a Json Model from a JS Object in the onInit Method of the view Controller?

[haykma]

Hi Thorsten,
my codesnippet from xml-view is only an example. In our real project there are some more models involved and the condition in the expression-binding is a little more complex, combining some expression by logical add/or.

But principally you are right. The models are initiated in the onInit-Controller of the controller (or from code started asynchronous by an initiated promise in onInit).

[haykma]

Hi Thorsten,
found a solution. If you are interested, have a look at my answer to my inital question.

regards
Matthias