I'm following this CRUD example on SAP UI 5, and I'm trying to reproduce/understand how SAPUI5 works.

I'm trying to figure out how this piece of code, in particular, works:

this.createButton = new sap.m.Button({
    icon : "sap-icon://add",
    visible : {
        path : "local>/inEdit",
        formatter : function(inEdit) { return !inEdit; }
    },
    press : [ oCon.createButtonPress, oCon ]
});

The createButton is created inside the Home.view.js view, and takes the path value from this model object, instantiated inside the onInit function in Home.controller.js:

onInit : function(){
    var model = new sap.ui.model.json.JSONModel({
        mode : sap.m.ListMode.None,
        inEdit : false,
        inDelete : false,
        inBatch : false
    });
    this.getView().setModel(model, "local");
}

What I don't understand is how this piece of code works, while creating the createButton button:

...
visible : {
    path : "local>/inEdit",
    formatter : function(inEdit) { return !inEdit; }
},
...

visible takes a boolean as value, that is returned from the formatter function, and this is ok. What I don't really get is how, an object with two properties (path and formatter) is going to automatically "run" formatter's function using path's value as it's own inputp parameter.. Am I missing something?

I hope I was clear enough, thanks in advance

I'm following this CRUD example on SAP UI 5, and I'm trying to reproduce/understand how SAPUI5 works.

I'm trying to figure out how this piece of code, in particular, works:

this.createButton = new sap.m.Button({
    icon : "sap-icon://add",
    visible : {
        path : "local>/inEdit",
        formatter : function(inEdit) { return !inEdit; }
    },
    press : [ oCon.createButtonPress, oCon ]
});

The createButton is created inside the Home.view.js view, and takes the path value from this model object, instantiated inside the onInit function in Home.controller.js:

onInit : function(){
    var model = new sap.ui.model.json.JSONModel({
        mode : sap.m.ListMode.None,
        inEdit : false,
        inDelete : false,
        inBatch : false
    });
    this.getView().setModel(model, "local");
}

What I don't understand is how this piece of code works, while creating the createButton button:

...
visible : {
    path : "local>/inEdit",
    formatter : function(inEdit) { return !inEdit; }
},
...

visible takes a boolean as value, that is returned from the formatter function, and this is ok. What I don't really get is how, an object with two properties (path and formatter) is going to automatically "run" formatter's function using path's value as it's own inputp parameter.. Am I missing something?

I hope I was clear enough, thanks in advance

• javascript
• sapui5

Share Improve this question Follow asked Nov 28, 2013 at 11:31 BeNdErRBeNdErR 17.9k2121 gold badges7777 silver badges106106 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

There is a property, xx-bindingSyntax, on the bootstrapping script element. For example:

<script id="sap-ui-bootstrap" type="text/javascript"
        src="lib/sapui5-1.16.3/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="plex"
        data-sap-ui-libs="sap.ui.mons, sap.viz, sap.m">

It is defaulted to "simple" in sap-ui-core.js. If it is set to "plex", as in my example, the UI5 constructor will execute this line of code:

sap.ui.base.ManagedObject.bindingParser = sap.ui.base.BindingParser.plexParser;

With that parser, UI5 will look for more plex definitions for properties such as for your "visible". To learn how exactly that plexParse works, open sap/ui/base/BindingParser.js.

This was a nice addition to UI5 and is elegant enough to accept arrays of parameters. However, the name "formatter" is a bit of a misnomer. Presumably, it started as a formatting function, but became quite usable for logic such as dynamic visibility.

you have to differentiate between setting a property directly and using SAPUI5's data binding.

In your example a property binding is done (https://sapui5.hana.ondemand./sdk/#docs/guide/BindingProperties.html) The so called extended syntax for property bindings is used. The object can contain even more properties with information about how the binding should behave. You can read about this in the documentation.

If you use data binding, the button's visible property is bound to the JSONModel which is defined in your controller. Everytime you update the model the buttons setVisble method is automatically triggered with the value which is determined by the data binding.

To read more about how data binding works in SAPUI5 you can refer to the documentation (https://sapui5.hana.ondemand./sdk/#docs/guide/GettingStarted.html)

I can just explain the principle that I assume behind this without having deep framework knowledge about the topic.

Whenever you establish a binding between a controls property and a models property this is what happens: The control attaches an event listener to the model listening for changes under the bound path , /inEdit in your case. Whenever the value under that path changes the event triggers the controls listener to execute and it:

• either calls the registered formatter with the new value and sets its return value onto the controls property
• or - if no formatter/type etc. provided - it directly sets the new value onto the controls property

In most cases a property change will cause a rerender of the control and you'll see the new model value displayed by your control.

Please correct me if someone knows better.