Data Binding in SAPUI5

[gyanaranjanmohapatra]

In this blog post, we would understand types of data binding in SAPUI5, and also, we will understand: in which scenario which data binding type is preferable.

If we have the data in the model, how can we display it in UI? Well, it's all about binding the model data to your UI5 control. To do this, we should know the path of desired data and properties.

In Simple Words, Data binding is the process that establishes a connection between the application UI and business logic.

It is a bridge between a binding target and a binding source.

 

What are the modes of Binding?

There are basically three modes of binding data in SAPUI5.

• One-way binding – Here, the data is transported in one direction only, i.e. from the model, through the binding instance to the consumer (usually the property of a control), but never in the other direction. Any change done on the model data from the front end is not affected to the model. All the data changes are reflected only on the controls.

• Two-way binding – Here all input changes done from front end controls are reflected on the model and the backend database. SAPUI5 automatically handles the transport of data both from the model to the controls and back from the controls to the model.

• One-time binding – Here all data will be bound from model to view just once. After that, the connection is no more set.

 

Data bindings are of the below types:-

1. Element binding


2. Property binding


3. Aggregation binding


4. Expression binding

 

Element Binding

Element binding is useful for containers and layouts containing other controls. All these child controls would be required to use properties of the same model object or model node, then element-binding is preferable.

Example:

Suppose you have some model data as below:

{    

 "Student": 

     {     

         "id": "001",        

         "name": "Gyana",            

         "phone": "808xxx08009",

         "Addresss": "BBSR"

   

      } 

}

Now in UI code, you have a vertical layout containing some text controls which would show the above data. During data binding you don’t have to specify the full path for these child controls as below: –

<VerticalLayout id="idLayout" binding="{/Student}" > 

      <Text text="{id}” />  

      <Text text="{name}"/>    

      <Text text="{phone}"/>

</ VerticalLayout >

Thus, element-binding allows the relative binding of all children with respect to a parent.

 

2. Property Binding

Property binding is used to bind model data to the property of a control.

For example: -

<Input value="{<path>/name}" />

In this example, we are using the “value” property of the Input box control to bind data. Also, we are using the path of model data inside curly braces.

Similarly, we can bind data to the “text” property of a Text control.

<Text  text="{<path>/name}" />

Property binding is simply binding between control property and model property.

3. Aggregation Binding

If we want to show a list or some data in tabular format, we need to bind a group of data.In such a case we will use aggregation binding.

In aggregation binding, based on your model data, as many child controls will be created automatically.

There are 2 approaches to use aggregation binding:-

1. Using control as a template

In this case, the template control used is cloned as many times as needed to

display the data.

 

1. Use a factory function

If you don't want to use the same control for showing the data, rather you

want to use different controls based on run time model data, you can use a

factory function.

Example: Using control as a template for aggregation binding:-

<List  id="productList" items="{ path:'product>/Products' }" >



  <items>



     <ObjectListItem title="{product>ProductName}"



            numberUnit="EUR"



             numberState="{= ${product>UnitPrice} > 50 ? 'Error' : 'Success' }"



             type="Navigation"



             press="onListItemPress" >



    </ObjectListItem>



 </items>



</List>

In this example, we are using the <items> aggregation of List control to bind the data, whereas ObjectListItem control is working as a template.

4. Expression Binding 

If we need some calculation on model data or some sort of comparison, then expression binding is useful. In the above example, we have already used expression binding:-

numberState="{= ${product>UnitPrice} > 50 ? 'Error' : 'Success' }

SAP ui5 applications Support for different types of models in which  JSON and XML are client-side models, while OData is a server-side model.  The resource model is a special model used for internationalization purposes.

You should always use JSON  models as they are lightweight compared to XML  models. JSON model provides better performance.

Hope it’s useful.

If you have any questions, please feel free to leave a comment and I’ll help guide you where I can.

 

 

Thanks for reading!

Gyana Ranjan Mohapatra