In the previous three parts in UI5 Binding, we looked into Aggregate Binding and Element Binding approaches. While element binding is like passing data to work area, aggregate binding can be correlated to internal table data. Just like in web dynpro we bind data to the context elements, similarly in UI5 we can bind to different elements and controls. In this part, we would try to understand Expression Binding in SAPUI5.
Expressing Binding:
Expression binding is used with UI5 controls for conditional checks, for example displaying the value of a simple form based on condition provided. Depending on success and error based on conditions, the color will be showcased for the same or based on conditions, the value of the target element changes.
Scenario:
We are going display a table. Clicking on a row in the table should navigate to the next detailed view which displays a simple form.
In the form image property based on condition if type = ‘Bird’, we are not going to display the image else we would display the image. If you are a Bird, we do not show you. Hope the birds do not get offended.
Steps:
- Prepare the json which would be mock data
- Create view1 (Aggregation view) with table control
- Create view1 (Element view) with simple form
- Provide code of expression binding in Image property.
- Add the complex binding code in index.html
- Execute the application
Step – 1: Prepare the json file for mock data
Prepare the mock json data as:
Take not of the property “type”. We will use this in the IF-ELSE clause for the Visibility Property of the image (Step 4 below).
The json file should be in the folder models/mockdata.
Step-2: Create view1 (Aggregation view) with table control
Step-3: Create view1 (Element view) with simple form
Step – 4: Provide code of expression binding in Image property
You guessed it right. The above single snippet says, if the type is Bird, then false (Image Visibility is false) else show the Image (true).
Step – 5: Add the complex binding code in index.html
Now our sapui5 framework do not understands this type of binding, so we have to tell the browser that we are doing a complex binding in index.html as below
Step – 6: Execute the application
My table will display initially as below.
Now click on any record with type = “wild”, let me click 2nd record and see the behavior.
As expected, since the type in not “Bird”, an image is displayed.
Now navigate back and click last record with type = “Bird”, and let see the behavior.
The image property is false as type = ‘Bird’. Therefore the image of bird is not visible according to the condition we have provided in the view.xml
Note: We have seen the expression binding for true or false scenario for “string” value. We can also use conditions that can be implemented for number as ‘Error’ or ‘Success’.
Some common snippets are:
<code>visible={= ${status} === 'success' && ${value} > 100 }"
visible="{= ${status} === 'success' || ${value} > 100 }"
enabled="{= ${/doEnable} === true }"</code>Where ‘Error’ shows in red color and ‘Success’ shows in green color. We will show this in details in our next article. Please keep an eye for it.
This UI5 series is for freshers in SAPUI5. We have knowingly kept the examples simple just to put forth the concept. You should play around with this and try to build more complex scenarios. In the future articles, we would look further into more real project use cases. Please stay tuned.
