Presentation on Data Binding

1. Jatin Dharani
JuLy 20, 2018
UI5 Data Binding

2. Agenda
Understand UI5 Data Binding with view and controller
level Binding

3. Topics
 Types of Data Binding
 Analysis of ODATA metadata
 Aggregation Binding
 Element Binding
 Expression Binding

4. 4
Property Binding
 Helps in binding a specific property of a control with model.
 E.g. <Text text=“{model>/Entityset(0)/Property}”
Element Binding
 Helps in Binding the element and it’s child element to a specific entity set.
 E.g this.getView().bindElement(“model>/Entityset”).
Expression Binding
 Helps in Binding control property with condition
 E.g <ObjectNumber numberstate =“ {=${model>UnitPrice} > ${model>priceThreshold} ? 'Error' : 'Success’}”
Aggregation Binding
 Helps in dynamically create child element for the control with data
 E.g. <Table items=“{model>/entityset}”>
Types of Data Binding
'

5. 5
 ODATA metadata document opens by appending $metadata to the service document URL.
 Navigation Properties defined in ODATA can be used to data binding in Master-detail or List –
object page type of use- cases, with relatively less coding efforts.
 We can see design view of ODATA model with entity sets and the associations between them in
web-ide.
Analysis of ODATA Metadata

6. 6
 Used to Create Child elements dynamically within a control.
 We can use Aggregation Binding on all the aggregations of a control.
 We can find different aggregations available for a control at below URL:
https://sapui5.hana.ondemand.com/#/api
 If there is a use case to create different child controls based on condition, we can use factory
function for aggregation binding.
Aggregation Binding

7. 7
 Element binding is used to bind element along with it’s child element to a control.
 We can use “bind Element” method of the control to do element binding.
 Use case for Element Binding:
1. Binding all the controls of detail page to the model based on user selection in the master
Page.
2. Binding all the controls of a parent element on the same view based on certain condition.
Element Binding

8. 8
Pre- requisite:
Trail Web ide access
destination for northwind OData service
Let’s Start with Hands on

9. Thank you.
Jatin Dharani
SAP Fiori Consultant,
dharanijatinb@gmail.com
+91 8980087927