Skip to content

Latest commit

 

History

History
130 lines (82 loc) · 5.31 KB

Binding_Syntax_e2e6f41.md

File metadata and controls

130 lines (82 loc) · 5.31 KB
Raw
loio
e2e6f4127fe4450ab3cf1339c42ee832

view on: demo kit nightly build | demo kit latest release

Binding Syntax

You bind UI elements to data of a data source by defining a binding path to the model that represents the data source in the app.

When defining a binding path for a control, a binding context is created which connects this control to a data model. The UI control then gets the data through that context and displays it on the screen.

A binding path connects a control in the View to data in the data model.

Simple Binding

To reference model data in a view , you can use the simple binding syntax "{/path/to/data}":

<Input value="{/firstName}"/>

You can add other properties, such as formatters, data types, or events:

  • Data type:

    <Input value="{path: '/firstName', type: 'sap.ui.model.type.String'}"/>

  • Formatter:

    <Input value="{path: '/firstName', formatter: 'my.globalFormatter'}"/>

  • Event:

    <Input value="{path: '/firstName', events: { dataRequested: '.onMyDataRequested'}"/>

For more information, see Binding Path.

For more information about data types and formatters, see Formatting, Parsing, and Validating Data.

Composite Binding

If a control requires data from multiple different model properties, you use a parts array of paths to define composite binding paths:

<TextField value="{
	parts: [
		{path:'birthday/day'},
		{path:'birthday/month'},
		{path:'birthday/year'}
	], 
	formatter:'my.globalFormatter'
}"/>

For more information, see Composite Binding and Examples for Data Binding in Different View Types.

Expression Binding in XML Views

Expression binding is a simple way to calculate values directly in the view. For example, if you want to change the color of the price depending on whether it is above or below some threshold. With expression binding you don't have to declare a separate formatter:

<ObjectStatus state="{= ${products>UnitPrice}  > ${/priceThreshold} ? 'Error' : 'Success' }"/>

For more information, see Expression Binding.

Property Metadata Binding for OData Services

With metadata binding, you can bind properties of a control to the corresponding property that is defined in the metadata of an OData service:

<Input maxLength="{/#Company/ZipCode/@maxLength}"/>

For more information, see Property Metadata Binding.

  • 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.
  • Composite Binding
    Calculated fields enable the binding of multiple properties in different models to a single property of a control.
  • Expression Binding
    Expression binding is an enhancement of the OpenUI5 binding syntax, which allows for providing expressions instead of custom formatter functions.
  • Property Metadata Binding
    An extended data binding syntax makes it possible to access the metadata for certain properties of an entity in OData services, such as heading, label, and precision.
  • Examples for Data Binding in Different View Types
    Examples how complex syntax can be used for calculated fields in XML, HTML, and JS views.

Related Information

API Reference: sap.ui.base.ManagedObject.bindProperty

API Reference: sap.ui.base.ManagedObject.bindAggregation

API Reference: sap.ui.base.ManagedObject.bindObject