Skip to Content

Hi All,

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”

});

Binding.jpg

        // 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.

Demo1.png

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.

     Demo2.png

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


    /wp-content/uploads/2015/05/demo3_700429.png

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.

Demo4.png

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Mayank Saxena

    Hi Ahmad,

    I believe you are following “Getting Started with SAPUI5” by Miroslav Antolovic. Thank you for creating this blog but could you please explain the code snippet/screenshot in which you explained the Element Binding.

    Thanks,

    Mayank

    (0) 

Leave a Reply