Please enable JavaScript.
Coggle requires JavaScript to display documents.
Binding - Coggle Diagram
Binding
-
Expression
This is also a property binding typically used to on enabled property of the UI Input element. to validate the input entered on the Input UI element (esp to grey out the input element once entered)
Syntax: enabled = "{=$ "Binding path"} ==="Hard coded Value " ? false : true}"
The above expression works as an if else condition on enabled property
<Input value = "{path: '/empStr/eName'} enabled = "{= ${ /empStr/eName} ==='Manager' ?false: true}"> </Input>
Aggregation Binding
This type of binding is done usually for tables, and its columns, as columns have Aggregation relationship with the table , the absolute path must be given in the table tag under rows or items and relative path must be given in the template tag under columns.
Syntax: <t:Table id ="idTable rows = "{/empTab}" ><t:Columns><t:Column><t:lable><t::Lable tetxt ="Emp ID"></Label><t:label><t:template>
<Text text ="{empName}" > </Text>
t:/template
Element Binding
UI5 creates a memory to each records (rows) of the table (Json data) when it creates the object of the JSON data, this memory is called elements
When these elements address is bound against the simple form, its called element binding
- Enable rowSelectionChangeEvent in the Table tag.
- Write an event handler method in the controller to get the details on slect of the row
- Get parameters of the event and obtain the path of the selected row.
- Get the of the simpleForm ID.
- Do an element binding to the simpleForm to the path of the slected row
- insert the children address into the Simpleform as they are now the relative path
- <t:Table rwoSelectionChange="onSelect" >
2.onSelect: function(oEvent ){
3.var sPath = oEvent.getParameter("rowContext").getPath();
4.var oSimple = this.getView().byId("idSimpleForm");
5.oSimple.bindElement(sPath);
- ex:"{empNo)" in the View where SimpleForm is developed