Using Expression Binding

Objective

After completing this lesson, you will be able to use expression binding to format the output on a view

Expression Binding

Expression binding is an enhancement of the SAPUI5 binding syntax, which allows for providing expressions instead of formatter functions.

Using expression binding saves the overhead of defining a function and is recommended if the formatter function has a trivial implementation like a comparison of values.

To use expression binding, you need to enable complex binding syntax for the application.

Note

Complex binding syntax is automatically enabled when the attribute data-sap-ui-compatVersion="edge" is added to the bootstrap script.

Use Expression Binding

Business Scenario

In this exercise, you will assign a value to the enabled property of the Create Customer button on the Overview view using expression binding: only if the form field for the customer name contains a value, the enabled property should have the value true, that is, the button should be enabled, otherwise it should be disabled. Furthermore, you will use expression binding to format the content of the Cancellation Status column in the booking table using icons from the SAPUI5 icon font.

Template:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/16_filtering_and_sorting
Model solution:Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: sol/17_expression_binding

Task 1: Set the enabled Property of the Create Customer Button Depending on the Value of the Input Field for the Customer Name

Steps

  1. Open the Overview.view.xml file from the webapp/view folder in the editor.

  2. Add the attribute valueLiveUpdate="true" to the Input UI element for the customer name.

    Note

    This causes the value of the value property of the Input UI element to be updated after each keystroke. Otherwise, the value would not be updated until the input field is exited or the Enter key is pressed.

    Result

    The form for the customer data should now look like this:

  3. Now add the enabled attribute to the Create Customer button. Assign it the value true or false as follows to ensure that the button is only enabled if the form field for the customer name contains a value:

    Code Snippet
    Copy code
    Switch to dark mode
    1
    enabled="{= ${customer>/CustomerName} !== undefined && ${customer>/CustomerName}.length > 0 }"

    Note

    Because of the valueLiveUpdate attribute you added to the customer name field above, the button will be enabled as soon as you enter the first character in the empty customer name field. Conversely, the button will be disabled as soon as you delete the last character in the customer name field.

    Result

    The Create Customer button should now look like this:

Task 2: Format the Cancellation Status in the Booking Table Using Icons from the SAPUI5 Icon Font

Steps

  1. Make sure that the Overview.view.xml file is open in the editor.

  2. The cancellation status is currently displayed in the booking table via a Text UI element. This shows the content of the IsCancelled model property, which contains an X if a booking was cancelled.

    Using expression binding, the sap-icon://cancel icon from the SAPUI5 icon font should now be displayed if a booking has been cancelled. For non-cancelled bookings, the sap-icon://accept icon should be displayed.

    For this reformatting, delete <Text text="{IsCancelled}"/> from the cells aggregation and replace it with the following Icon UI element. In addition to the icons, the tooltips cancelled and not cancelled are also set.

    Code Snippet
    Copy code
    Switch to dark mode
    12
    <core:Icon src="{= ${IsCancelled} === 'X' ? 'sap-icon://cancel' : 'sap-icon://accept' }"
           tooltip="{= ${IsCancelled} === 'X' ? 'cancelled' : 'not cancelled' }"/>

    Note

    The available icons can be looked up via the Icon Explorer tool in the SAPUI5 Demo Kit.

    Result

    The booking table should now look like this:

  3. Test run your application by starting it from the SAP Business Application Studio.

    Make sure that the Create Customer button is enabled only when the customer name input field contains a value. Also make sure the cancellation status in the booking table is now displayed via icons with tooltip.

    1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.

    2. Select the npm script named start-noflp in the dialog that appears.

    3. In the opened application, check if the component works as expected.

Log in to track your progress & complete quizzes