Improving the User Experience

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

   Copy code

   field ( readonly ) CityFrom, CountryFrom, CityTo, CountryTo; Expand

1. Activate the behavior definition.

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

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

   Copy code

   @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.

Create a CDS View Entity called Z##_I_CarrierVH.

1. Choose File → New → Other.

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.

Mark the appropriate transport request and chose Next.

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

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

   Copy code

   define view entity Z##_I_CarrierVH as select from /dmo/carrier { key carrier_id as CarrierID, name as Name } Expand

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

   Copy code

   @UI.lineItem: [{position: 10 }] key carrier_id as CarrierID, @UI.lineItem: [{position: 20 }] name as Name Expand

Activate the CDS View Entity.

1. Choose Ctrl + F3.

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

   Copy code

   @Consumption.valueHelpDefinition: [{ entity: { name: 'ZS4D400_I_CarrierVH', element: 'CarrierID' } }] CarrierID, Expand

Activate the data definition.

1. Choose Ctrl + F3.