OpenUI5 formatter not reacting on model change

Question

I tried to implement a formatter to set a button visible if two model variables are true so I used the parent model object as path for the formatter like:

<Button text="Button" visible="{path: 'myModel>/uiSwitches', type: 'sap.ui.model.type.Boolean', formatter: '.checkIfVisibleFormatter'}" />

My formatter looks something like this:

checkIfVisibleFormatter: function(uiSwitches) {
   return uiSwitches.switch1 && uiSwitches.switch2;
}

Now when changing the models value(switch1 or switch2) through getModel() and setData() the formatter is not called and the button is still in/visible.

...
let myModel = this.getOwnerComponent().getModel("myModel");
let myData = myModel.getData();
myData.uiSwitches.switch1 = false;
myModel.setData(myData);
...

If I reference one of these model flags directly inside the button the ui at least refreshes on changes to this one.

<Button text="Button {myModel>/uiSwitches/switch1}" visible="{path: 'myModel>/uiSwitches', type: 'sap.ui.model.type.Boolean', formatter: '.checkIfVisibleFormatter'}" />

How would I make sure the formatter gets called everytime something inside uiSwitches changes?

Answer 1

Try changing your formatting code to :-

 <Button text="Button" visible="{
 parts : [
 { path: 'myModel>/uiSwitches/switch1', type: 'sap.ui.model.type.Boolean'},
 { path: 'myModel>/uiSwitches/switch2', type: 'sap.ui.model.type.Boolean'}
 ],
 formatter: '.checkIfVisibleFormatter'
 }" />

and your formatter function to :-

checkIfVisibleFormatter: function (switch1, switch2) {
        return switch1 && switch2;
        }

Also, ensure that complex binding is enabled in bootstrap. This should solve the problem.

Off-topic, When you want to modify data in a model, try using the syntax :-

this.getOwnerComponent().getModel("myModel").setProperty("/uiSwitches/switch1",false);