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!!!

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post