Improving the User Experience

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Arrange fields in the app
  • Provide input help

UI Adjustment

In this section, you will learn how to control field properties in the behavior definition and how to adjust the UI in the metadata extension.

How to Control Field Properties

Adjust Your App's UI

Steps

  1. In the behavior definition of your projection set the fields CityFrom, CityTo, CountryFrom, and CountryTo to read-only.

    1. Open the behavior definition Z##_R_CONNECTION (where ## is your group number.

    2. Enter the following code in the behavior definition. The precise position is not important. We suggest that you place it immediately after the existing field statement:

      Code snippet
      field ( readonly ) CityFrom, CountryFrom, CityTo, CountryTo; Expand
    1. Activate the behavior definition.

  2. Rearrange the fields in the app so that they appear in the following order:

    10CarrierID
    20ConnectionID
    30AirportFromID
    40AirportToID
    50CityFrom
    60CityTo
    70CountryFrom
    80CountryTo
    1. Open the metadata extension Z##_C_CONNECTION where ## is your group number. Where necessary, change the value of the annotation @UI.identification: [ { position: } ] so that it corresponds to the value in the table.

      Code snippet
      @Metadata.layer: #CUSTOMER @UI: { headerInfo: { typeName: 'Connection', typeNamePlural: 'Connections' } } annotate view ZS4D400_C_CONNECTION with { @UI.facet: [ { id: 'idIdentification', type: #IDENTIFICATION_REFERENCE, label: 'Connection', position: 10 } ] @UI.hidden: true UUID; @UI.lineItem: [ { position: 10 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 10 , label: '' } ] CarrierID; @UI.lineItem: [ { position: 20 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 20 , label: '' } ] ConnectionID; @UI.lineItem: [ { position: 30 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 30 , label: '' } ] AirportFromID; @UI.lineItem: [ { position: 40 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 50 , label: '' } ] CityFrom; @UI.lineItem: [ { position: 50 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 70 , label: '' } ] CountryFrom; @UI.lineItem: [ { position: 60 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 40 , label: '' } ] AirportToID; @UI.lineItem: [ { position: 70 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 60 , label: '' } ] CityTo; @UI.lineItem: [ { position: 80 , importance: #MEDIUM, label: '' } ] @UI.identification: [ { position: 80 , label: '' } ] CountryTo; @UI.hidden: true LocalLastChangedAt; } Expand
    1. Activate the metadata extension.

Providing Input Help

In this section, we will learn about providing value help to the users. Watch this video to learn more.

Provide Input Help

Steps

  1. Create a CDS View Entity called Z##_I_CarrierVH.

    1. Choose FileNewOther.

    2. Type data into the filter field to restrict the number of objects offered.

    3. Double-click Data Definition.

    4. Ensure that the package is correct, enter the name Z##_I_CarrierVH where ## is your group number. Enter a description and the referenced object /DMO/AIRLINE.

    5. Choose Next.

  2. Mark the appropriate transport request and chose Next.

    1. Mark the template Define View Entity and choose Finish.

  3. Ensure that the view contains only the fields carrier_id (with alias CarrierID) and name (with alias Name).

    1. Delete the fields currency_code to last_changed_at. The view definition should now look like this:

      Code snippet
      define view entity Z##_I_CarrierVH as select from /dmo/carrier { key carrier_id as CarrierID, name as Name } Expand
  4. Add @UI.lineItem annotations so that the system displays the data when the user starts the value help.

    1. Add the annotations so that your source code looks like this:

      Code snippet
      @UI.lineItem: [{position: 10 }] key carrier_id as CarrierID, @UI.lineItem: [{position: 20 }] name as Name Expand
  5. Activate the CDS View Entity.

    1. Choose Ctrl + F3.

  6. In the projection view Z##_C_CONNECTION (where ## is your group number) attach the value help to the field CarrierID. Use the annotation @Consumption.valueHelpDefinition. For the attribute name use the CDS View Entity Z##_I_CarrierVH, and for the attribute element, use the field CarrierID.

    1. Open the data definition Z##_C_CONNECTION and add the following annotation before the element CarrierID. Replace ## with your own group:

      Code snippet
      @Consumption.valueHelpDefinition: [{ entity: { name: 'ZS4D400_I_CarrierVH', element: 'CarrierID' } }] CarrierID, Expand
  7. Activate the data definition.

    1. Choose Ctrl + F3.

Log in to track your progress & complete quizzes