source : sapui5 sdk > Essentials > DataBinding
/* Bind the specified value in the model*/
<Input value="{/firstName}"/>
/* model uses a value for a specified path and defines it as a specified type*/
<Input value="{path: '/firstName', type: 'sap.ui.model.type.String'}"/>
/* Use the value of the specified path in the model and change it to a custom formatter */
<Input value="{path: '/firstName', formatter: 'my.globalFormatter'}"/>
/* Event occurs when the value of the designated path is used in the model and the value is changed */
<Input value="{path: '/firstName', events: { dataRequested: '.onMyDataRequested'}"/>
/* Select and use a number of designated paths in the model*/
<TextField value="{
parts: [
{path:'birthday/day'},
{path:'birthday/month'},
{path:'birthday/year'}
],
formatter:'my.globalFormatter'
}"/>
/* Use some custom formators while selecting multiple specified paths in the model*/
<Text text="{path:'gender', formatter:'.myGenderFormatter'} {firstName}, {lastName}"/>
/* Compare the specified value in the model with a control statement and express it as the desired value*/
<ObjectStatus state=="{= ${products>UnitPrice} > ${/priceThreshold} ? 'Error' : 'Success' }"/>
There are four types of binding for data binding.
1. Context Binding (Element Binding)
2. Property binding
3. Aggregation binding
4. Expression binding
source : open.sap.com
<Button id="buttonDisplay" text="Display" visible="{oUi>/readMode}"/>
<Button id="buttonEdit" text="Edit" visible="{oUi>/editMode}"/>
<Button id="buttonSave" text="Save" visible="{oUi>/saveMode}"/>
<Button id="buttonDelete" text="Delete" visible="{oUi>/deleteMode}"/>
//pageMode C Create, V View, E Edit
var oUi = new JSONModel({
readMode : true,
editMode : false,
createMode : false
});
// Register the model under the name of "oUi".
this.setModel(oUi, "oUi");
// onSearchButtonPressPress Event
onSearchButtonPress: function () {
// If you click the inquiry button, it will be exposed to the screen.
oUi.setProperty("/readMode", true);
// Expose the function so that it can be modified when clicking the inquiry button.
oUi.setProperty("/editMode", true);
// When clicking the inquiry button, it is not in the modification mode, so it is not exposed to the screen.
oUi.setProperty("/saveMode", false);
// When clicking the inquiry button, it is not in the modification mode, so it is not exposed to the screen.
oUi.setProperty("/deleteMode", false);
}
{
"sfc" : {
"name" : "Neo."
}
}
<mvc:View
controllerName="com.sfc.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Input id="inputName" value="{/sfc/name}"/>
</mvc:View>
var oInput = this.getById("inputName");
oInput.bindProperty("value", "/sfc/name");
var oImage= this.getById("image");
oImage.bindProperty("src", "/sfc/trusted", function(bValue) {
return bValue ? "green.png" : "red.png";
});
{
companies : [
{
name : "Acme Inc.",
city: "Belmont",
state: "NH",
county: "Belknap",
revenue : 123214125.34
},{
name : "Beam Hdg.",
city: "Hancock",
state: "NH",
county: "Belknap"
revenue : 3235235235.23
},{
name : "Carot Ltd.",
city: "Cheshire",
state: "NH",
county: "Sullivan",
revenue : "Not Disclosed"
}]
}
var oItemTemplate = new sap.ui.core.ListItem({text:"{name}"});
oComboBox = new sap.m.ComboBox({
items: {
path: "/companies",
template: oItemTemplate
}
});
var oItemTemplate = new sap.ui.core.ListItem({text:"{name}"});
var oComboBox.bindAggregation("items", "/companies", oItemTemplate)
//unbind aggregation Remove bind aggregation.
oComboBox.unbindAggregation("items");
{=expression}
It will be applied as soon as the model value changes.
/* -------------------------------------------------------------------------- */
{:=expression}
If the model value changes, it will be applied only once.
// CreateMode is ModelData.
/* -------------------------------------------------------------------------- */
createMode = false
<Label visible="{=${oUi>/createMode}}"/>
Result : false
/* -------------------------------------------------------------------------- */
createMode = false
<Label text="{=${oUi>/createMode}===false?'TRUE':'FALSE'}"/>
Result: TRUE
/* -------------------------------------------------------------------------- */
createMode = true
<Label text="{=${oUi>/createMode}==='false'?'TRUE':'FALSE'}"/>
Result : FALSE
/* -------------------------------------------------------------------------- */
/* =! Denial */
createMode = true
<Label text="{=!${oUi>/createMode}}"/>
Result : false
/* -------------------------------------------------------------------------- */
createMode = true
text="{= ${createMode} === true ? 'Yes':'No'}"
Result : Yes.
/* -------------------------------------------------------------------------- */
Or conditions ||
createMode = true
visible="{= !${createMode} || ${editMode}}
Result : true or false when createMode=false or editMode=true
/* -------------------------------------------------------------------------- */
And conditions & conditions & conditions
visible="{= !${createMode} || ${editMode}}
Result : true or false when createMode=false or editMode=true
Syntax Element | Symbol |
Literal | number, for example 42, 6.022e+23 or -273.15 object, for example {foo: 'bar'} string, for example 'foo' null true false |
Grouping | (...), for example 3 * (4 + 10) |
Unary operator | ! + - typeof |
Multiplicative operator | * / % |
Additive operator | + - |
Relational operator | < > <= >= |
Strict equality operator | === !== |
Binary logical operator | && || |
Conditional operator | ? |
Member access operator with the . operator | Note With these, you can use members and member methods on standard types such as such as string, array, number, and so on. Example: {$message>/}.length}>0 or ${/firstName}.indexOf('S'). |
Function call | f(...) Note You can use functions that are available via global symbols, such as Math.max(...) or isNaN(...). |
Array literals | [...], for example [2,3,5,7,11] |
Property/array access | o[...], for example 'foo/bar'.split('/')[1] |
in operator | 'PI' in Math (true) or 0 in [] (false) |
Global symbol | Array, Boolean, Date, encodeURIComponent, Infinity, isFinite, isNaN, JSON, Math, NaN, Number, Object, parseFloat, parseInt, RegExp, String, undefined |
user: projects $ yo
? 'Allo neo! What would you like to do? @sap/fiori
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo @sap/fiori
? Application Type SAPUI5 freestyle
? Which floorplan do you want to use? SAPUI5 Application
? Data source None
? View name App
? Module name databind
? Application title SAPUI5 DataBinding
? Application namespace com.sfc
? Description SAP Fiori Cafe(SFC) - SAPUI5 Beginner UINIT9 Data Binding
? Project folder path /home/user/projects
? Add deployment configuration No
? Add FLP configuration No
? Configure advanced options No
<content>
<Panel headerText="Element binding">
<Input id="inputName"/>
</Panel>
</content>
onInit: function () {
var oJSONModel = new JSONModel({
"Student": {
"id": "001",
"name": "Neo",
"phone": "010-2265-0000",
"Addresss": "SAP Fiori Cafe"
}
});
}
onInit: function () {
var oJSONModel = new JSONModel({
"Student": {
"id": "001",
"name": "Neo",
"phone": "010-2265-0000",
"Addresss": "SAP Fiori Cafe"
}
});
this.getView().setModel(oJSONModel);
},
getModel : function (sName) {
return this.getView().getModel(sName);
},
setModel : function (oModel, sName) {
return this.getView().setModel(oModel, sName);
}
onInit: function () {
var oJSONModel = new JSONModel({
"Student": {
"id": "001",
"name": "Neo",
"phone": "010-2265-0000",
"Addresss": "SAP Fiori Cafe"
}
});
this.getView().setModel(oJSONModel);
var oinputName = this.byId("inputName");
oinputName.bindElement("/Student");
oinputName.bindProperty("value", "name");
}
<Panel headerText="Property binding">
<VBox>
<HBox class="sapUiSmallMarginBottom">
<HBox width="4em">
<Button id="buttonDisplay" text="Display" />
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonEdit" text="Edit" />
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonSave" text="Save"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonDelete" text="Delete"/>
</HBox>
</HBox>
</VBox>
</Panel>
var oProPerty = new JSONModel({
readMode : true,
editMode : false,
saveMode : false,
deleteMode : false
});
<Panel headerText="Property binding">
<VBox>
<HBox class="sapUiSmallMarginBottom">
<HBox width="4em">
<Button id="buttonDisplay" text="Display" visible="{oProPerty>/readMode}" />
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonEdit" text="Edit" visible="{oProPerty>/editMode}"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonSave" text="Save" visible="{oProPerty>/saveMode}"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonDelete" text="Delete" visible="{oProPerty>/deleteMode}" />
</HBox>
</HBox>
</VBox>
</Panel>
var oProPerty = new JSONModel({
readMode : true,
editMode : false,
saveMode : false,
deleteMode : false
});
<Panel headerText="Property binding">
<VBox>
<HBox class="sapUiSmallMarginBottom">
<HBox width="4em">
<Button id="buttonDisplay" text="Display" visible="{oProPerty>/readMode}" press=".onButtonPress('display')"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonEdit" text="Edit" visible="{oProPerty>/editMode}" press=".onButtonPress('edit')"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonSave" text="Save" visible="{oProPerty>/saveMode}" press=".onButtonPress('save')"/>
</HBox>
<HBox width="4em" class="sapUiTinyMarginBegin">
<Button id="buttonDelete" text="Delete" visible="{oProPerty>/deleteMode}" press=".onButtonPress('delete')"/>
</HBox>
</HBox>
</VBox>
</Panel>
onButtonPress(arg){
sap.m.MessageToast.show(arg); //Check the parameters.
var oProPerty = this.getModel("oProPerty"); // Refer to the oPropertyJSONModel.
var oUi = this.getModel("oUi");
// Button initializes every event.
oUi.setProperty("/readMode", false);
oUi.setProperty("/editMode", false);
oUi.setProperty("/saveMode", false);
oUi.setProperty("/deleteMode", false);
switch(arg){ // Controls the parameter value to switch. Expose only the necessary button.
case "display":
oProPerty.setProperty("/editMode", true);
break;
case "edit":
oProPerty.setProperty("/readMode", true);
oProPerty.setProperty("/saveMode", true);
oProPerty.setProperty("/deleteMode", true);
break;
case "save":
oProPerty.setProperty("/readMode", true);
break;
break;
}
},
var oJSONModel = new JSONModel({
"Student": {
"id": "001",
"name": "Neo",
"phone": "010-2265-0000",
"Addresss": "SAP Fiori Cafe"
},
"StudyType" : [{
"title": "Fiori",
"code": "001",
"desc": "SAP Fiori",
"maxnum": "7",
"Status" : "A"
}, {
"title": "SAPUI5",
"code": "002",
"desc": "SAP SAPUI5",
"maxnum": "5",
"Status" : "B"
}, {
"title": "CDS VIEW",
"code": "003",
"desc": "SAP CDS VIEW",
"maxnum": "6",
"Status" : "C"
}
]
});
<Panel headerText="Aggregation binding">
<List id="StudyTypeList" items="{/StudyType}">
<items>
<StandardListItem
title="{title}"
description="{desc}"
/>
</items>
</List>
</Panel>
<Panel headerText="Expression binding">
<List items="{/StudyType}">
<items>
<StandardListItem
title="{title}"
description="{=${maxnum} > 6 ?'Max':'Ready'}"
/>
</items>
</List>
</Panel>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
5 | |
5 | |
4 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 |