Suppressing Optional Information on Demand

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Help the user identify the most important information by initially hiding the additional information

Display the Travel Administrative Data Subsection on Demand (by Adding the Show More Button)

To help users focus on the most important information, you may sometimes choose to hide additional information at first. When it is hidden, the Show More button will appear instead. Selecting the button will reveal the additional information.

Task Flow

In this exercise, you will use the Page Editor to create a new subsection in the General Information section of the Travel Object page. It will contain the following fields: Created On, Changed On, and Created By. Finally, you will enable the Display on Demand setting for this subsection.


You have completed the exercise Add Dependent Filtering to the Value Help of the Fields in the unit Configuring the Body of the Object Page (lesson: Enriching Value Help with Dependent Filtering). Alternatively, you can check out its solution branch: solution/add-value-help-for-dependent-filtering.

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.


  1. Create a subsection.

    1. Select fiori-elements-V4-cap-advanced from Projects and choose Show Page Map from the context menu.

    2. Open the object page of the Travel entity and add a new subsection at General Information > Subsection > Add Form Section.

    3. In the Add Form Section window, enter Travel Administrative Data as a label text. Then choose the button next to the Label field. This will generate a text key in the i18n file and will replace the existing label with the newly generated key.

    4. Expand your new subsection.

  2. Add fields to your subsection.

    1. In your new subsection, choose Form > Fields > Add Basic Fields.

    2. Select the following fields from the dropdown menu: createdAt, createdBy, and LastChangedAt and choose Add.

    3. Your new fields are now visible in the Travel Administrative Data subsection.

  3. Make the subsection visible on demand.

    1. Select the Travel Administrative Data subsection.

    2. In the right window, enable the Display on Demand setting.

  4. Return to the app to check the results.

    1. Open the app. Note that the Travel Administrative Data subsection is hidden and there's a Show More button.

    2. Select the Show More button; the subsection is now visible. Select Show Less to hide it again.

  5. You can also check the code generated by the Page Editor.

    1. An @UI.FieldGroup annotation with the i18nTravelAdministrativeData qualifier has been added to the Travel entity.

      Sample code:

      Code snippet
      annotate TravelService.Travel with @(UI.FieldGroup #i18nTravelAdministrativeData: {
          $Type: 'UI.FieldGroupType',
          Data : [
                  $Type: 'UI.DataField',
                  Value: createdAt,
                  $Type: 'UI.DataField',
                  Value: LastChangedAt,
                  $Type: 'UI.DataField',
                  Value: createdBy,

    2. A new reference facet has been added to the object page.

      Sample code

      Code snippet
                          $Type               : 'UI.ReferenceFacet',
                          Label               : '{i18n>TravelAdministrativeData}',
                          ID                  : 'i18nTravelAdministrativeData',
                          Target              : '@UI.FieldGroup#i18nTravelAdministrativeData',
                          ![@UI.PartOfPreview]: false,

      The annotation [@UI.PartOfPreview] : false means the subsection will only be displayed if the user selects the Show More button.

      In this exercise, you have made an entire subsection (reference facet) visible on demand. You can also hide fields inside a reference facet. In this case, the Show Details and Hide Details buttons will be displayed. For more information, see Showing and Hiding Content in Object Page Facets.


You have learned how to use the Page Editor to add a new section or subsection and hide it using the Display on Demand setting. You can also hide separate fields inside a section or subsection.


Log in to track your progress & complete quizzes