Create an ABAP Core Data Services (CDS) View in SAP Cloud Platform, ABAP Environment

You will now expose the CDS view as a business service. This will allow you to preview your changes in Fiori elements preview.

A business service consists of a service definition and a service binding.

You use a service definition to define which data is to be exposed (with the required granularity) as a Business Service.

You then use the service binding to bind a service definition to a client-server communication protocol such as OData. This allows you to provide several bindings for the same definition, e.g. to expose the service to a UI, and to an A2X provider.

For more information, see:

• SAP Help Portal: Creating a Service Definition

• SAP Help Portal: Creating a Service Binding

1. First, create the service definition, by selecting your CDS view and choosing New > Service Definition from the context menu.

   

2. Choose a name and description:

   • Z_EXPOSE_TRAVEL_XXX
   • Service exposes Travel data
   

3. Choose the transport request; choose Next.

4. Use the selected template; choose Finish. The name of your custom entity is inserted automatically.

   

5. To make the service definition more readable, add an alias to the expose statement:

   expose Z_C_TRAVELS_XXX as Travels;
   
   

6. Format, save, and activate ( Shift+F1, Ctrl+S, Ctrl+F3 ) the service definition.

1. It would be nice if at least some fields were displayed immediately for the user. To do this, simply add the following annotation to the relevant fields. The start of your CDS view will then look like this.

   BookingFee is not automatically displayed. The numbers for each field are relative to the other fields and are responsive - they do not refer to a specific pixel position or similar. For larger entities, you can specify HIGH,*MEDIUM*, or LOW, so that less important fields are automatically hidden on a smaller screen, such as a mobile phone.

   @UI           : {
   lineItem      : [{position: 10, importance: #HIGH}]
   }
   @UI           : {
   lineItem      : [{position: 10, importance: #HIGH}]
   }
   key TravelID;
   
   @UI           : {
         lineItem      : [{position: 15, importance: #HIGH}]
         }
   AgencyID,
   
   @UI           : {
         lineItem      : [{position: 20, importance: #HIGH}]
         }
   CustomerID,
   
   @UI           : {
         lineItem      : [{position: 30, importance: #HIGH}]
         }
   BeginDate,
   
   @UI           : {
         lineItem      : [{position: 40, importance: #HIGH}]
         }
   EndDate,
   
   BookingFee,
   
   @UI           : {
         lineItem      : [{position: 50, importance: #HIGH}]
         }
   TotalPrice,
   
   

2. If you now refresh your Fiori Elements preview, you will notice that you do not have to choose the fields; you simply have to choose Go.

If you define currency amounts and currency codes semantically, then the system will apply specific rules to handle these fields appropriately.
For example, in this tutorial, if you define TotalPrice as a currency amount, and define CurrencyCode as a currency code field, then the system will add the appropriate currency to the TotalPrice column automatically. There is no need to display CurrencyCode as a separate column.

1. To do this, add the following two annotations to your CDS view:

   
   @Semantics.amount.currencyCode: 'CurrencyCode'        
   TotalPrice,
   
   @Semantics.currencyCode
   CurrencyCode,
   
   

2. Format, save, and activate ( Shift+F1, Ctrl+S, Ctrl+3 ).

3. If you refresh the Fiori Elements preview, the Total Price column now looks like this.

   

You will now add a fuzzy search capability.

1. First, add the search annotation to your CDS view:

   @Search.searchable: true
   

2. Then add the following two annotations to the field you want to search, in this case Memo:

   @Search.defaultSearchElement: true
   @Search.fuzzinessThreshold: 0.90
   
   

3. For convenience, add the following annotation to the metadata extension object, so that the Memo field appears by default in the preview, then format, save, and activate ( Shift+F1, Ctrl+S, Ctrl+3 ):

   @UI           : {
         lineItem      : [{position: 60, importance: #HIGH}]
         }
   Memo;
   
   

4. Refresh the Fiori elements preview in your browser.

5. There is a new Search input field.

   

6. Enter the search text Miami. The app only displays trips to Miami (to date, eleven trips).

   

7. Optional: You can test the fuzziness threshold by changing the value to 0.70. After you save and activate, the app will now show trips to Miami and trips involving Matthias. (You may need to empty the cache.)

   

As well as search fields, you can filter the list using an input field. In the next tutorial, you will provide input value help for these fields.

1. Add the selectionField annotation to the field TravelID in your metadata extension file, so that the whole UI annotation looks like this:

   @UI           : {
         lineItem      : [{position: 10, importance: #HIGH}],
         selectionField: [{position: 10 }]
         }
   TravelID;
   

2. Format, save, and activate ( Shift+F1, Ctrl+S, Ctrl+3 ). The Fiori elements preview should now look like this:

   

3. Add other fields as input fields by adding the following to the metadata extensions file, so that the file looks like this:

   @UI           : {
         lineItem      : [{position: 15, importance: #HIGH}],
         selectionField: [{position: 15 }]
         }
   AgencyID;
   
   @UI           : {
         lineItem      : [{position: 20, importance: #HIGH}],
         selectionField: [{position: 20 }]
         }
   CustomerID;
   
   @UI           : {
         lineItem      : [{position: 10, importance: #HIGH}],
         selectionField: [{position: 10 }]
         }
   TravelID;
   
   @UI           : {
         lineItem      : [{position: 30, importance: #HIGH}],
         selectionField: [{position: 30 }]
         }
   BeginDate;
   
   @UI           : {
         lineItem      : [{position: 40, importance: #HIGH}],
         selectionField: [{position: 40 }]
         }
   EndDate;
   
   @UI           : {
         lineItem      : [{position: 50, importance: #HIGH}]
         }
   TotalPrice;
   
   @UI           : {
         lineItem      : [{position: 50, importance: #HIGH}]
         }
   Memo;
   
   @UI           : {
       lineItem      : [{position: 60, importance: #HIGH}],
       selectionField: [{position: 60 }]
       }
   Status;
   

   Your app should now look like this:

   

Your CDS entity code should look like this:

@AbapCatalog.sqlViewName: 'ZCTRAVEL_003'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Consumption view from /DMO/I_TRAVEL_U'
@Metadata.allowExtensions: true
@Search.searchable: true

define view Z_C_TRAVEL_DATA_003
  as select from /DMO/I_Travel_U
{

      ///DMO/I_Travel_U


  key TravelID,
      AgencyID,
      CustomerID,
      BeginDate,
      EndDate,
      BookingFee,

      @Semantics.amount.currencyCode: 'CurrencyCode'
      TotalPrice,

      @Semantics.currencyCode
      CurrencyCode,

      @Search.defaultSearchElement: true
      @Search.fuzzinessThreshold: 0.90
      Memo,
      Status,
      LastChangedAt,

      /* Associations */
      ///DMO/I_Travel_U
      _Agency,
      _Booking,
      _Currency,
      _Customer

}

Your MDE code should look like this:

@Metadata.layer: #CORE
annotate view Z_C_TRAVEL_DATA_003 with
{

@UI.facet: [
{ id:     'Connection_JP',
purpose:  #STANDARD,
type:     #IDENTIFICATION_REFERENCE,
label:    'Connection' }

]


@UI           : {
      lineItem      : [{position: 15, importance: #HIGH}],
      selectionField: [{position: 15 }]
      }
AgencyID;

@UI           : {
      lineItem      : [{position: 20, importance: #HIGH}],
      selectionField: [{position: 20 }]
      }
CustomerID;

@UI           : {
      lineItem      : [{position: 10, importance: #HIGH}],
      selectionField: [{position: 10 }]
      }
TravelID;

@UI           : {
      lineItem      : [{position: 30, importance: #HIGH}],
      selectionField: [{position: 30 }]
      }
BeginDate;

@UI           : {
      lineItem      : [{position: 40, importance: #HIGH}],
      selectionField: [{position: 40 }]
      }
EndDate;

@UI           : {
      lineItem      : [{position: 50, importance: #HIGH}]
      }
TotalPrice;

@UI           : {
      lineItem      : [{position: 50, importance: #HIGH}]
      }
Memo;

@UI           : {
    lineItem      : [{position: 60, importance: #HIGH}],
    selectionField: [{position: 60 }]
    }
Status;

}