SAP UI5 has a very convenient and robust mechanism for doing two-way binding of your data from you data layer (the model) to your presentation layer (the view). By using data binding you are effectively separating the concerns of your application. In an ideal world you want your model code to only be responsible for your data and your presentation code to only be responsible for the way the data is displayed.

The Problem

The built-in data binding of UI5 only allows you to easily bind one property on your view (e.g. a text field's text property) to one property on your data model. This is done using the bindProperty method that all SAP UI5 controls inherit from the ManagedObject class.

Imagine this scenario: We have two checkboxes, one for the colour Yellow and one for the colour Blue. We want the user to select from these colours and if the user selects both of these colours we want the result property of the model to equal "Blue and Yellow are BPSE Consulting's company colours!". This "result" is then displayed in a text field.

In order to accomplish this we would have to bind to two model properties simultaneously (yellow and blue).

The Solution

In order to bind to more than one model property at the same time we will require a custom binding. This comes in the form of the sap.ui.model.Binding class. In the initialization method of our controller we define the model as follows:

var oModel = new sap.ui.model.json.JSONModel(
    {
        yellow: null,
        blue: null,
        result: "No colour selected."
    }
);

The properties yellow and blue are bound to the selected properties of two checkboxes using the bindProperty method:

new sap.m.CheckBox(
    {
        layoutData: new sap.ui.layout.GridData(
            {
                span: "L6 M6 S12"
            }
        )
    }
)
.bindProperty(
    "selected",
    {
        path: "/yellow"
    }
)

The result property of the model is bound to the text property of a text field:

new sap.m.Text(
    {
        layoutData: new sap.ui.layout.GridData(
            {
                span: "L6 M6 S12"
            }
        )
    }
)
.bindProperty(
    "text",
    {
        path: "/result"
    }
)

In order to implement logic based on both the yellow and blue model properties, the following bindings are constructed:

//Define the binding for the "Yellow" model property.
var oYellowBinding = new sap.ui.model.Binding(
    oModel,
    "/yellow"
);

//Define the binding for the "Blue" model property.
var oBlueBinding = new sap.ui.model.Binding(
    oModel,
    "/blue"
);

//Attach the handler to both bindings' change events.
oYellowBinding.attachChange(
    this.onColoursChange,
    this
)

oBlueBinding.attachChange(
    this.onColoursChange,
    this
)

Both of these bindings will call the onColoursChange method if their values change. The onColoursChange method is as follows:

//This method handles the change of the "result" property when the colours selected change.
onColoursChange: function(oEvent){

    //get the JSON model object
    var oModel = oEvent.getSource().oModel;

    //get the boolean properties on the checkboxes.
    var bYellow = oModel.getProperty("/yellow");
    var bBlue = oModel.getProperty("/blue");

    //Check the values of the booleans and set the value of "result" accordingly.
    if (bYellow === true && bBlue === true){
        return oModel.setProperty("/result", "Blue and Yellow are BPSE Consulting's company colours!");
    } else if (bYellow === true){
        return oModel.setProperty("/result", "Yellow is bright and happy.");
    } else if (bBlue === true){
        return oModel.setProperty("/result", "Blue is cool.");
    } else {
        return oModel.setProperty("/result", "No colour selected.");
    }

}

Within the onColoursChange method we have all the logic that is necessary to change the result model property based on the values of two other model properties. This same pattern can be extended to more than two model properties. Using this pattern opens up a whole world of possibilities for building complex data-driven Fiori apps that are a joy to use.

Demo

For those of you who are interested in playing with the source code, you can freely do so at this Plunker URL.

If you wish to learn more about how custom-built Fiori apps can improve your company's SAP user experience, please contact us.

Next Post Previous Post