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?

[Have you specified, in the UI5 bootstrap, that you want support for "complex" binding syntax? data-sap-ui-xx-bindingSyntax="complex"](https://stackoverflow.com/questions/30127500/sapui5-formatter-is-not-called) — Jan Schulz, Sep 11 '20 at 06:13
[To load our formatter functions, we have to add it to the InvoiceList.controller.js. In this controller, we first add a dependency to our custom formatter module. The controller simply stores the loaded formatter functions in the local property formatter to be able to access them in the view.](https://help.sap.com/doc/saphelp_uiaddon20/2.05/en-US/0f/8626ed7b7542ffaa44601828db20de/content.htm?no_cache=true) — Jan Schulz, Sep 11 '20 at 06:20
Thanks @MrNajzs, In your link Boghyon Hoffmann says we should use compatversion="edge" instead, I checked my index.html and it seems to be already active so the solution of PKV now works for me. — FelixD, Sep 14 '20 at 07:05

score 0 · Accepted Answer · answered Sep 11 '20 at 07:03

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

Thanks so much. This looks exactly like what I need. And thanks for the syntax hint as well. :-) — FelixD, Sep 14 '20 at 06:46

OpenUI5 formatter not reacting on model change

1 Answers1