Suppressing Optional Information on Demand

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.

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.

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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1234567891011121314151617
      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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1234567
                      {
                          $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.