Binding in SAPUI5

 

To work with the JSON data, SAPUI5 provides the class sap.ui.model.json. JSONModel and also called a client-side model and is necessary to load the data before operating on the data.

Context

A binding path consists of a number of name tokens, which are separated by a separator char. In all models provided by the framework, the separator char is the slash "/".

Binding Path:

Binding paths address the different properties and lists in a model and define how a node in the hierarchical data tree can be found. The binding path can be

• Absolute binding path
• absolute binding paths start with slash "/"
• Relative binding path
• relative binding paths start with a name token
• resolved relative to the context of the control that is bound

Property Binding

To define property binding on a control, you have the following options:

• As part of the control's declaration in an XML view
• Using JavaScript, in the settings object in the constructor of a control 
• In special cases bindProperty() method of a control 

During control instantiation:

1. using a literal string in the settings object

var oInput = new sap.m.Input({ 

                                    value: "/company/name"

                                        })

2. using JS object

var oInput = new sap.m.Input({ 

                                value: { 

                                    path: "/company/name",             " path must be used

                                    mode: sap.ui.model.BindingMode.OneWay 

                                         }

                                     })

After control instantiation:

1. using a literal string in the settings object

oInput.bindProperty("value", "/company/name")

2. using JS object

Aggregation Binding

Aggregation binding is used to create child controls automatically according to model data.

1. Controls declarations in XML view

2. using JS object

Element Binding

Element binding allows you to bind elements to a specific object in the model data, which will create a binding context and allow relative binding within the control and all of its children.

data can be accessed by the getBindingContext() and getProperty() method, which returns the entity object or value. 

When you use multiple models, specify the model name within the binding path to address the correct model

Expression Binding

Expression binding is an enhancement of the SAPUI5 binding syntax, which allows for providing expressions instead of Custom Formatter Function.

• An expression binding is specified via {=expression} in an XML view.
• expression complies to a subset of JavaScript expression syntax except for bindings embedded in the expression which are specified like this {=${embedded}}.

Create Entities:

Users can interact with a newly created entity even before it has been sent to the server.

The entity set and the passed properties must exist in the metadata definition of the OData service.

If created entities are submitted, the context is updated with the path returned from the creation request, and the new data is imported into the model. So the context is still valid and points to the newly created entity.

bindElement() on the view:

Users Call bindElement() on the view to make sure that the data of the specified data is available in the view and its controls. 

The ODataModel will handle the necessary data requests to the backend in the background. While the data is loading, we pass an events object to bindElement() to listen to the events dataRequested and dataReceived. 

Note:

• The event dataReceived will accept only one parameter
• This event triggers for both success and failure (data received is undefined)cases.
• To habdle oData errors use attachRequestFailed event handler