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;
   

   Copy code

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;
   }
   

   Copy code

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
   
   }
   

   Copy code

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
   

   Copy code

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,
   

   Copy code

Activate the data definition.

1. Choose Ctrl + F3.