Improving the User Experience

Exclude the standard operations update and delete, and set the field PlaneTypeID to read-only .

1. In the behavior projection for your service, disable the standard operations create and delete.

   1. Open the behavior projection ZC_##Flight (where ## is your group number).

   2. Add comment markers in front of the statement use create; and use delete;.

      To add the comment markers, proceed as usual: select the code rows you want to comment and press Ctrl + <.

      Your code should then look like this:

      Code Snippet

      Copy codeSwitch to dark mode

      12345
      
      //  use create;
        use update;
      //  use delete;
      

2. In the behavior projection of your business object, set the field PlaneTypeID to read-only.

   1. In the behavior projection, add the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      123
      
        field (readonly)   PlaneTypeID;
      

      Note

      The precise position of the statement is not important. We suggest that you place it before the use ... statements.

3. Activate the behavior projection.

   1. Press Ctrl + F3 to activate the behavior projection.

Hide the administrative fields from the UI. Make sure only CarrierID and ConnectionID are displayed as selection fields on the report list page. Change the field sequence on the object page so that PlaneTypeID is displayed before Price and CurrencyCode.

1. Edit the Metadata Extension of the projection view (ZC_##Flight). Remove all UI annotations for the fields LocalCreatedBy, LocalCreatedAt, LocalLastChangedBy, LocalLastChangedAt, and LastChangedAt and replace them with @UI.hidden: true.

   1. Open the metadata extension ZC_##FLIGHT where ## is your group number.

   2. Adjust the code as follows:

      Code Snippet

      Copy codeSwitch to dark mode

      12345678910111213141516
      
        @UI.hidden: true
        LocalCreatedBy;
        
        @UI.hidden: true
        LocalCreatedAt;
        
        @UI.hidden: true
        LocalLastChangedBy;
        
        @UI.hidden: true
        LocalLastChangedAt;
        
        @UI.hidden: true
        LastChangedAt;
      

2. Remove the @UI.selectionField annotation for all elements except for the elements CarrierID and ConnectionID.

   1. Adjust the code as follows:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011121314151617181920212223242526272829303132333435363738394041
      
        @UI.identification: [ {
          position: 30 , 
          label: 'Flight Date'
        } ]
        @UI.lineItem: [ {
          position: 30 , 
          label: 'Flight Date'
        } ]
        FlightDate;
        
        @UI.identification: [ {
          position: 40 , 
          label: 'Flight Price'
        } ]
        @UI.lineItem: [ {
          position: 40 , 
          label: 'Flight Price'
        } ]
        Price;
        
        @UI.identification: [ {
          position: 50 , 
          label: 'Currency Code'
        } ]
        @UI.lineItem: [ {
          position: 50 , 
          label: 'Currency Code'
        } ]
        CurrencyCode;
        
        @UI.identification: [ {
          position: 60 , 
          label: 'Plane Type'
        } ]
        @UI.lineItem: [ {
          position: 60 , 
          label: 'Plane Type'
        } ]
        PlaneTypeId;
      

3. Change the position of the PlaneTypeID field on the object page. Place it between FlightDate and Price.

   Hint

   The position on the object page is specified with annotation @UI.identification.

   1. Change the value of annotation @UI.identification: [ { position: } ] for element planetypeid. Choose a value that lies between the values for elements flightdate and price.

   2. Adjust the code as follows:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011
      
        @UI.identification: [ {
          position: 35, 
          label: 'Plane Type'
        } ]
        @UI.lineItem: [ {
          position: 60 , 
          label: 'Plane Type'
        } ]
        PlaneTypeId;
      

4. Activate the metadata extension.

   1. Press Ctrl + F3 to activate the metadata extension.

In the data model projection for your service, use existing CDS view I_CurrencyStdVH to define a value help for the field CurrencyCode.

1. Edit the definition of the projection view ( ZC_##Flight). Annotate the view element CurrencyCode with annotation @Consumption.valueHelpDefinition: [{ }]. Use I_CurrencyStdVH as the value for the subannotation entity.name and Currency as the value for the subannotation entity.element.

   Note

   Currency is the name of the key element of CDS view I_CurrencyStdVH.

   1. Open the definition of CDS view entity ZC_##FLIGHT where ## is your group number.

   2. Before view element CurrencyCode, add the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      1234
      
      @Consumption.valueHelpDefinition: [{ entity.name:    'I_CurrencyStdVH', 
                                           entity.element: 'Currency' }]
      

2. Activate the projection view definition.

   1. Press Ctrl + F3 to activate the projection view definition.

Restart the preview of the OData UI Service and verify the changes to the user interface.

1. Restart the preview of the OData Service.

   1. Close the browser window or browser tab that contains the preview.

   2. Open your service binding. In the Entity Set and Associations list on the right-hand side, first choose entity Flight and then choose Preview....

2. On the report list page, verify that the buttons Create and Delete have disappeared.

   1. Proceed as you have done in previous exercises.

3. Verify that there are two selection fields at the top of the report list page. Test their functionality.

   Hint

   Be aware that the selection fields support the entry of multiple values and ranges.

   1. Enter a value in the selection field Airline ID (for example: "LH") and choose Go.

   2. Repeat with other values.

4. For any data set, navigate to the object page. Verify that the Delete button has disappeared.

   1. Proceed as you have done in previous exercises.

5. Verify that field Plane Type is displayed after field Flight Date and before field Flight Price.

   1. Proceed as you have done in previous exercises.

6. Switch to change mode and check the order of the fields.