Dynamically Affecting the Visibility and Editability of UI Elements

Objective

After completing this lesson, you will be able to Influence the visibility and editability of some UI elements.

Dynamic Field Control

In the lesson Suppressing Optional Information on Demand, you learned how to hide sections, subsections and separate fields on the object page. In this case, the Show More or Show Less buttons appear in the app; selecting them displays the sections.

You can also hide some content on the object page either permanently or based on some condition. In this case, the user will not be able to open this content; it will not appear in the object page. For example, you may want to hide the Starting Date and End Date fields for canceled travels as they are not relevant in this situation.

To do this, you can use the @UI.Hidden annotation. It has a boolean value that can either be static (true or false for all object instances) or dependent on some other property that can have different values for different object instances.

In addition to hiding fields, you can also control other field properties such as making them read only or mandatory. You can do it either in the Page Map or directly with the corresponding annotations. For more information, see Further Features of the Field.

Hide the Starting Date and End Date for Travels with the Canceled Travel Status

There are two date fields in the General Information subsection: Starting Date and End Date. You will hide them for travels with travel status Canceled.

Task Flow

In this exercise, you will add a new property cancelRestrictions to the TravelStatus entity. This will indicate that certain restrictions apply for these travels: its value will be true for Canceled travels and false for Open and Accepted travels.

Then, you will add an @UI.Hidden annotation to both date fields: Starting Date and End Date. It will hide the fields based on the value of the cancelRestrictions property created before.

Prerequisites

You have completed the exercise Use Side Effects to Update the Total Price Immediately After Adding Another Booking in the unit Configuring the Body of the Object Page (lesson: Configuring Side Effects). Alternatively, you can check out its solution branch: solution/use-side-effects-to-update-total-price.

Watch the Simulation and Perform the Steps

This exercise contains a simulation displaying all the steps. You can follow the simulation with your own trial account.

ExerciseStart Exercise

Steps

  1. Add a new property to indicate the canceled travels.

    1. Open the schema.cds file from your project in SAP Business Application Studio.

    2. Add a cancelRestrictions property to the TravelStatus entity.

      Sample code:

      Code Snippet
      Copy code
      Switch to dark mode
      1
      cancelRestrictions: Boolean; // is true for cancelled travels

    3. Open the sap.fe.cap.travel-TravelStatus.csv file from the db>data folder.

    4. Add a new property: cancelRestrictions and its corresponding values: 1 (true) for Canceled, 0 (false) for Open and Accepted.

  2. Add @UI.Hidden annotations to the layouts.cds file.

    1. Annotate the BeginDate and EndDate properties with ![@UI.Hidden]: TravelStatus.cancelRestrictions.

  3. Return to the app to check the results.

    1. Select a travel and choose Reject Travel.

    2. Open its object page. Note how the Starting Date and End Date fields are not displayed for this travel as its Travel Status is Canceled.

Result

In this lesson you learned how to hide some content on the Object Page with the help of the @UI.Hidden annotation based on some static or dynamic Boolean value.

Note

Next Steps

For more information, see

Log in to track your progress & complete quizzes