Adapting Input Fields

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.

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.

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.

   Note

   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

      Copy codeSwitch to dark mode

      1234
      annotate TravelService.Travel with {
          Description @UI.MultiLineText: true
                      @UI.Placeholder  : '{i18n>DescrPlcehlder}'
      }

   7. In the Explorer view, select Projects\_i18n\i18n.properties. The i18n.properties file opens. Add the following placeholder text to the file:

      Code Snippet

      Copy codeSwitch to dark mode

      1
      DescrPlcehlder=Put your description for the travel

4. View the two date fields in the Manage Travels application.

   1. Open the Manage Travels 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.

      Result

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

   Note

   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 Manage Travels application.

   2. Choose Edit.

      Result

      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.