Data Binding



The business data within a model can be defined using various formats:
  • JavaScript Object Notation (JSON)
  • Extensible Markup Language (XML)
  • OData
  • Your own custom format
The process for using data binding for SAPUI5 controls in a simple application comprises five steps: Deciding on the model, creating a model and a control instance, binding the properties or lists to the model and, if required, unbinding the properties again.
JSON Model
The JSON model supports two-way data binding by default, which means that the model will automatically reflect changes to the view and vice versa.

For JSON Model Binding, take a look at my video from youtube:


 
Defining the Data
To define the data, proceed as follows:
  1. Create the data that you want to bind to a control property. Here we are using JSON Model
  2. Place the code into your sample page:
Create Data Binding Model Instance
 onInit: function() {
        
var model1 = new sap.ui.model.json.JSONModel();// create JSON model instance     model1.loadData("model/detail.json");// set the data for the model sap.ui.getCore().setModel(model1);// set the model to the core
},
Create Controls and Property Binding
Now, here I am using a list to show the data, in a list format.
var list = new sap.m.List({
              items:{
                  path:"/Product", // this path is the key value which is defined in the json
                      template: new sap.m.ObjectListItem({
                          
                           title:"{Product Name}",
                           number:"{Price}",
                           intro:"{Plant}",
                           icon:"{image}",
                           type : "Active",
                
                                  
        attributes: [
                    {
            text:"{Product ID}"
                    },
                    {
               text:"{value}"
                    }
        ],
     
        firstStatus: {
        
            text:"{Status}"
                     },
                      
                   
                      })
     }
   });
Here sap.m.ObjectListItem is a template for the list in which we are binding the data.
We also define the path, which is a key value defined in the JSON model.
Binding Modes
Binding mode is usually contains of 2 main categories: Two Way, One Way and One Time modes. Let’s get some explanations on that:
  • One Way - means that all data changes will be reflected on the controls. If you have input field mapped on {name} field in model all model’s name property value changes will be displayed in that input. Changing the input will not be reflected on the model.
  • Two Way - means that all input changes will be reflected in the model. Unfortunately this will not work for data binding made with formatter functions.
  • One Time - means data will be bound from model to view just once.
By default JSON and XML models have Two Way bind mode, resource and OData models have One Way mode. Right now OData and resource models don’t support Two Way mode.
Binding Types
There are 3 types of data binding:
  • Bind Aggregation
  • Property Binding
  • Bind Element
ODATA Model
The OData model is a server-side model: the dataset is only available on the server and the client only knows the currently visible rows and fields. Sorting and filtering is done on the server. The client has to send a request to the server to accomplish these tasks.
Steps
1)Instantiate the OData model as follows:
oDataModel = new sap.ui.model.odata.ODataModel(
"http://myserver/MyService.svc/?custom1=value1&custom2=value2")

We have to define this only once in a project.To read a data through Odata, we can use
oDataModel.read("/UserRole?$filter=User eq '"+userId+"'and ImPassword eq'"+password+"'");
here UserRole is an entityset.

Example
var customerListDialog = new sap.m.SelectDialog("dealerListDialog",{
            title:"Select Dealer",
            noDataText:"No Dealer found",
            rememberSelections:true,
            confirm:this.onCustomerSelect,
            search:this.onSearch,
            liveChange:this.onSearch,
            
                });

        
        var customerList = new sap.m.ObjectListItem("dealerList",{
            title : "{CustomerName}({CustomerId})",
            attributes: [
                         {
                            text: "Sales Area",
                         },
                            {
                    text:"{SalesOrganization}, {DistributionChannel}, {Divison}"
                            }
                ],
            type:"Active"
        });
        debugger;
        oDataModel.read("/AccountListInfoSet?$filter=ImUsername eq '"+data.userName+"'",null,null,false,onSuccessLogin,function(oError){console.log("error",oError);});
        var customerListJson = new sap.ui.model.json.JSONModel();
        customerListJson.setData({data:loginResult.results});
        console.log("customerListJson",customerListJson);
        customerListDialog.setModel(customerListJson);
        customerListDialog.bindAggregation("items","/data",customerList);

Here, I have used sap.m.SelectDialog whuch is used as a dialog box, in which
Customer Names and their informations is displayed in a list.

At first data is read from the ECC server using ODataModel.read, where
/AccountListInfoSet is an entity set, and ImUsername is a filter. This data
is set into a JSON model which is binded into the DealerList,ie. Select Dialog


I have tried explaining both JSON and Odata model data binding, hope it
helps...

Cheers!!!

Previous
Next Post »

3 comments

Click here for comments
27 December 2016 at 20:50 ×

could you please let me know how can I export table data into excel formate

Reply
avatar
Unknown
admin
17 January 2017 at 03:22 ×

Good , its very helpfull

Reply
avatar
Unknown
admin
28 February 2017 at 00:00 ×

Can you example for XML Model ?

Reply
avatar