Adapting Input Fields

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Adjust input fields using the Page Editor

Add Date Fields and a Multiline Input Field to the Object Page Subsection

Usage Scenario

You want to add two date fields to the subsection and they must have a calendar in the value help dialog. Also, you want to extend the single input field to a multiline input field. In addition, add a placeholder text which is shown if the field is empty.

Task Flow

In this exercise, you will perform the following tasks using the Page Editor:

  • Add two fields of the type date to the subsection of the object page.
  • Change the type of the input field and add a placeholder text that is displayed when the field is empty.


You have completed the exercise Use the Singleton Entity for Constant Values of the Bullet Micro Chart in the unit Shaping the Header Area of the Object Page (lesson: Using the Singleton Entity). Alternatively, you can check out its solution branch: solution/use-singleton-for-bullet-micro-chart-on-op.

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. Open your CAP project in SAP Business Application Studio.

    1. In the Explorer view, select Projects\app\webapp.

    2. Right-click on webapp and select Show Page Map. The Page Map of the Travels application appears.

    3. Choose the Edit icon of the Travel object page. The Page Editor of the TravelObjectPage appears.

  2. Add two date fields in the General Information subsection.

    1. In the Page Layout, under Sections, expand General Information.

    2. Expand Subsections\General Information\Form\Fields.

    3. Choose Add.

    4. Choose Add Basic Fields. The Add Basic Field dialog appears.

    5. From the dropdown, select BeginDate and EndDate.

    6. Choose Add. The fields End Date and Starting Date appear in the control tree of the Page Editor.


    In the right pane, the user can see the settings that they can change for the selected field.

  3. Change the type of the Description field to multiline. Add a placeholder text to it.

    1. Perform step 1 and sub-steps a to b of step 2.

    2. Choose Description.

    3. In the right pane, under Display Type, choose the dropdown.

    4. Select Text Area.

    5. Choose the Edit in source code icon. The layout.cds file appears. The@UI.MultiLineText annotation is generated by the Page Editor.

    6. Add the @UI.Placeholder annotation to the @UI.MultiLineText annotation.

      Code snippet
      annotate TravelService.Travel with {
          Description @UI.MultiLineText: true
                      @UI.Placeholder  : '{i18n>DescrPlcehlder}'
    7. In the Explorer view, select Projects\_i18n\ The file opens. Add the following placeholder text to the file:

      Code snippet
      DescrPlcehlder=Put your description for the travel
  4. View the two date fields in the Vacation application.

    1. Open the Vacation application. In the General Information subsection, you can see the fields End Date and Starting Date.

    2. Choose Edit.

    3. Choose the calendar icon corresponding to the End Date field.


      The calendar is automatically added as a value help to the input fields of type Date.


    You can see in the solution branch for this exercise that the Page Editor has added two values of type UI.DataField to the existing annotation for the subsection ( @UI.FieldGroup#TravelData).

  5. View the multiline input field and placeholder text for the Description field.

    1. Open the Vacation application.

    2. Choose Edit.


      The single input field is extended to multi-line text field. Also, if the text field is empty, you can see the replaced with the newly added placeholder text, Put your travel description here.


In this lesson, you have learned to add a field to a section or subsection on the object page with the help of the Page Editor. You can also change the settings for the fields such as a field label, a field type, and add restrictions using the Page Editor.


Next Steps

Log in to track your progress & complete quizzes