Standard service - a fixed amount of work that is performed at a fixed price.  Post Service

  

Thursday, 09 May 2019 21:24

SAPUI5 Binding Part 4 – Expression Binding Approach 1

Written by  https://sapyard.com/sapui5-binding-part-4-expression-binding-approach-1/
Rate this item
(0 votes)

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.

Also Check: All About ABAP CDS

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:

  1. Preparethe json which would be mock data
  2. Createview1 (Aggregation view) with table control
  3. Createview1 (Element view) with simple form
  4. Providecode of expression binding in Image property.
  5. Addthe complex binding code in index.html
  6. Executethe 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 theIF-ELSE clause for the Visibility Property of the image (Step 4 below).

The json file should be in the folder models/mockdata.

Also Read:My first S/4HANA Custom Program

Step-2: Create view1 (Aggregation view)with table control

Step-3: Create view1 (Element view) withsimple form

Step – 4: Provide code of expression bindingin 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).

Also Check: An ABAPer’s First Custom SAP OData Service

Step – 5: Add the complex binding code inindex.html

Now our sapui5 framework do not understands this type ofbinding, so we have to tell the browser that we are doing a complex binding in index.htmlas below

Step – 6: Execute the application

My table will display initially as below.

Now click on any record with type = “wild”, let me click 2ndrecord and see the behavior.

As expected, since the type in not “Bird”, an image isdisplayed.

Now navigate back and click last record with type = “Bird”,and let see the behavior.

The image property is false as type = ‘Bird’. Therefore theimage of bird is not visible according to the condition we have provided in theview.xml

Note: We have seen the expression binding for true or falsescenario for “string” value. We can also use conditions that can be implementedfor number as ‘Error’ or ‘Success’.

Some common snippets are:

1
2
3
4
<code>visible={=${status}==='success'&amp;&amp;${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.

Download and Upload the full project used for this article from here.

This UI5 series is for freshers in SAPUI5. We have knowinglykept the examples simple just to put forth the concept. You should play aroundwith this and try to build more complex scenarios. In the future articles, we wouldlook further into more real project use cases. Please stay tuned.

Please leave us your feedback below.

If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4765+ active SAP consultants from 6 Continents.

Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 54 times

2 comments

  • Comment Link Unity 3d training in Hyderabad Friday, 17 May 2019 07:21 posted by Unity 3d training in Hyderabad

    Wow Very nice Blog Post! Your site has given the best information. This is excellent information. Core Global is an authorized training center in India and offers comprehensive training to SAP consultants of the future using internationally renowned business software that courses have global consistency in the quality of training and certification.

  • Comment Link Unity 3d training in Hyderabad Friday, 17 May 2019 07:19 posted by Unity 3d training in Hyderabad

    Wow Very nice Blog Post! Your site has given the best information. This is excellent information. Core Global is an authorized training center in India and offers comprehensive training to SAP consultants of the future using internationally renowned business software that courses have global consistency in the quality of training and certification.

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.