-
Notifications
You must be signed in to change notification settings - Fork 0
UI5 Binding Syntax
To reference model data in a view , you can use the simple binding syntax {/path/to/data} or {>/path/to/data} or {modelName>/path/to/data}:
<Input value="{/firstName}"/>You can add other properties like formatters or data types:
Data type:
<Input value="{path: '/firstName', type: 'sap.ui.model.type.String'}"/>Formatter:
<Input value="{path: '/firstName', formatter:'my.globalFormatter'}"/>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'}"
/>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' }"
/>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}"/>Here "cv" is the name of the model. The parameters option stems from the JSONModel Tree Binding Documentation. Some might think because we declared our model within the items property of the Tree-Control, that we don't have to mention the model name within the item itself but you have to.
Basically it's like telling the Tree-Control where to look for Data (create X-Items for each Data ...). In the item itself you're telling the item which property from the model should be displayed (relative path 'modelName>/').
<Tree id="cvTree" items="{path: 'cv>/', parameters:{arrayNames: ['nodes']}}">
<CustomTreeItem>
<Text renderWhitespace="true" text="{cv>description}"/>
<Link href="{cv>website}" text="{cv>companie}" target="_blank"/> <Label text="{cv>position}"/>
<FlexBox direction="Column">
<FlexBox direction="Row">
<Text renderWhitespace="true" text="{cv>textTo}"/>
<Label text="{cv>to}"/>
</FlexBox>
<FlexBox direction="Row">
<Text renderWhitespace="true" text="{cv>textFrom}"/>
<Label text="{cv>from}"/>
</FlexBox>
</FlexBox>
</CustomTreeItem>
</Tree>