Types of binding in Sap Ui5

This blog explains the basic concepts and demo of binding options in Sap UI5.

Tools used:

• Eclipse Luna Service Release 1
• Tomcat Apache (Server)
• SAP UI5 Plug-in installed in Eclipse.
• Google Chrome

Sap ui5 provides three binding options

• Property binding
• Aggregation binding
• Element binding

Property Binding: To bind the properties of the control to the model.

Property Binding can be done by three ways.

• Within curly brackets in the constructor
• By bind property method
• By path

Generic coding to achieve the property binding.

Within curly brackets in the constructor

var oControl = new sap.ui.commons.TextView({
controlProperty: “{modelProperty}”
});

By Bind Property Method

• oControl.bindProperty(

“controlProperty”, “modelProperty”);

By Path

var oControl = new sap.ui.commons.TextView({
controlProperty: { path: “modelProperty” }
});

Property binding demo:

In this demo we are going to display the properties of the table by using all three options of property binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.
Provide the project name and click on next button.

Step 2:  Implement the following code under the createcontent method.
var aGalaxy = [
                    {“Planet” : “Mercury”,“Diameter”:“5,100”,“Gravity”:0.40},
                       {“Planet” : “Venus”,“Diameter”:“12,600”,“Gravity”:0.90},
                       {“Planet” : “Earth”,“Diameter”:“12,800”,“Gravity” : 1.00},
                       {“Planet” : “Mars”,“Diameter”:“6,900”,“Gravity” : 0.40},
                       {“Planet” : “Jupiter”,“Diameter”:“143,600”,“Gravity”:2.70},
                       {“Planet” : “Saturn”,“Diameter”:“120,600”,“Gravity” : 1.20},
                       {“Planet” : “Uranus”,“Diameter”:“53,400”,“Gravity” : 1.00},
                       {“Planet” : “Pluto”,“Diameter” : “12,700”,“Gravity” : 1.40} ];
   
              var oModel = new sap.ui.model.json.JSONModel({
                     values : aGalaxy
              });
                 
            // Create instance of table control
var oTable = new sap.ui.table.Table({
               title : “Physical characteristics of planets”,
               visibleRowCount : 8,
               firstVisibleRow : 0,
               width : “500px”
});

// Bind model to table control

oTable.setModel(oModel);

oTable.bindRows(“/values”);

oTable.placeAt(“content”);

Remember to include the library “sap.ui.table” in the index.html

  <script src=”resources/sap-ui-core.js”

         id=”sap-ui-bootstrap”

         data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

         data-sap-ui-theme=”sap_bluecrystal”>

        </script

Result:

Right click on the index.html and select the option run on server.

Aggregation Binding

The control element is binded by collection of values. The control element then acts as a data container and also represents a template of the data to be displayed.

Aggregation Binding Demo:

In this demo we are going to display the error log from the local json model using the aggregation binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.

Provide the project name and click on next button.

Step 2:  Implement the following code under the createcontent method.

      

 // Create instance of JSON Model

              var oModel = new sap.ui.model.json.JSONModel({

                     Value:

                           [{“index”: “0”,“level”:“Success”,“description”: “Performance is good”},

                           {“index”: “1”,“level”:“Warning”,“description”: “Service not available.”},

                           {“index”: “2”,“level”:“Error”,“description”: “Record not found”}]

              });

              // Bind Model to core

       sap.ui.getCore().setModel(oModel);

              // Create template of message type

              var oRowTemplate = new sap.ui.commons.Message({

                     text : “{description}”,

                     type : “{level}”

              });

              // Create RowRepeater and bind message template

              var oRowRepeater = new sap.ui.commons.RowRepeater();

              oRowRepeater.bindRows(“/Value”, oRowTemplate);

              oRowRepeater.placeAt(“content”);

Result:

Right click on the index.html and select the option run on server.

Element Binding

An element to be bound to an object in the Model can be achieved by Element binding. The context of the relative binding to a control is represented by the Element control. In order to display a detailed list for the selected header information you need to have this parent-child binding.

Element Binding Demo:

In this demo we are going to displaying the menu from the parent table weekdays from the local json model and based on the selection in the parent table values are changed in the child table meals by element binding.

Step 1: Create the Sap UI5 Application project

In Eclipse, File–>New–>other and select “SAP UI5 Application Development” –>Application Project and click on next button.

Provide the project name and click on next button

Step 2: Implement the following code under the createcontent method.

var oModel = new sap.ui.model.json.JSONModel({

                     weekdays:

                           [{“day”: “Monday”,“no_meals”:“2”,“id”: “1”},

                            {“day”: “Tuesday”,“no_meals”:“1”,“id”: “2”},

                            {“day”: “Wednesday”,“no_meals”:“2”,“id”: “3”},

                            {“day”: “Thursday”,“no_meals”:“2”,“id”: “4”},

                            {“day”: “Friday”,“no_meals”:“1”,“id”: “5”}], 

                     meals:

                     [{“MealNo”: “1”,“dayId”: “1”,“items”: “French fries”},

                      {“MealNo”: “2”,“dayId”: “1”,“items”: “French toast”},

                      {“MealNo”: “3”,“dayId”: “2”,“items”: “French fries with Burger”},

                      {“MealNo”: “4”,“dayId”: “3”,“items”: “Hot Dog”},

                      {“MealNo”: “5”,“dayId”: “3”,“items”: “French Fries”},

                      {“MealNo”: “6”,“dayId”: “4”,“items”: “Donut”},

                      {“MealNo”: “7”,“dayId”: “4”,“items”: “Hot Dog”},

                      {“MealNo”: “8”,“dayId”: “5”,“items”: “French toast”},

              

                      ]

              });

              sap.ui.getCore().setModel(oModel);      

              // Table with weekdays

              var oTable = new sap.ui.table.Table({

              width : “100%”,

              title : “Weekdays”,

              visibleRowCount : 5,

              selectionMode : sap.ui.table.SelectionMode.Single,

              });

              oTable.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Weekday”}),

              template: new sap.ui.commons.TextField({value:“{day}”})

              }));

              oTable.addColumn(new sap.ui.table.Column({

                     label: new sap.ui.commons.Label({text: “No Meals”}),

                     template: new sap.ui.commons.TextField({value:“{no_meals}”})

                     }));

             

              oTable.bindRows(“/weekdays”);

              oTable.placeAt(“parent”);        

             

// Display of meals

              var oTable2 = new sap.ui.table.Table({

              title : “Meals”,

              visibleRowCount : 3,

              width : “100%”,

              selectionMode : sap.ui.table.SelectionMode.Single,

              editable : false

              });

              oTable2.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Meal”}),

              template: new sap.ui.commons.TextField({value:“{MealNo}”})

              }));

      

              oTable2.addColumn(new sap.ui.table.Column({

              label: new sap.ui.commons.Label({text: “Description”}),

              template: new sap.ui.commons.TextField({value:“{items}”})

              }));

              oTable2.bindRows(“/meals”);

              oTable2.placeAt(“child”);

Remember to include the library “sap.ui.table” in the index.html

  <script src=”resources/sap-ui-core.js”

         id=”sap-ui-bootstrap”

         data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

         data-sap-ui-theme=”sap_bluecrystal”>

        </script

Result:

Right click on the index.html and select the option run on server.

Continue reading