Skip to Content

Create an ABAP Core Data Services (CDS) View in ABAP On-Premise

test
0 %
Create an ABAP Core Data Services (CDS) View in ABAP On-Premise
Details

Create an ABAP Core Data Services (CDS) View in ABAP On-Premise

October 1, 2020
Created by
July 9, 2020
Create a CDS View, display it in Fiori Elements preview, and enhance its appearance using built-in annotations

You will learn

  • How to create a CDS view
  • How to display your CDS view in a Fiori Elements preview
  • How to extract the metadata of your CDS view
  • How to add semantic annotations
  • How to add a search function
  • How to add selection fields to the Fiori Elements preview

Prerequisites

You can then use some of these features in productive development to make your applications more powerful and more user-friendly. By the end of this tutorial, your application should look like this.

final-app-create

Throughout this tutorial, object names may include a suffix or group number, such as XXX. Always replace this with your own group number or initials.


Step 1: Create package
  1. Create a new package for this tutorial, by choosing New > ABAP Package.

    step1a-new-package
  2. Enter a name Package Z_ENHANCE_CDS_XXX and description Enhance CDS Tutorial 2020, then follow the wizard.

    step1a-create-package
Log on to answer question
Step 2: Create CDS View
  1. In your package, create a CDS view. Select the package, then choose New > Other from the context menu.

    step2a-new-cds
  2. Add a name, Z_C_TRAVEL_DATA_XXX, and description Consumption view from /DMO/I_TRAVEL_U.

    Your CDS view a consumption view. It is based on the business object (BO) view, /DMO/I_TRAVEL_U. which view provides a given data model independent of the consumption layer. It contains all core information required by applications running on top of it.

    A consumption view is a CDS view defined on top of a BO view and is used:

    • to expose the fields fitting to a given consumption use case
    • to enrich the data model with metadata using annotations (e.g. for UI, search, and OData)
  3. Choose or create a transport request, then choose Next. Do not choose Finish.

  4. Finally, choose Use template then choose Define view. Then choose Finish.

Your CDS view appears in a new editor.

step3a-view-name-data-source
Log on to answer question
Step 3: Define CDS View
  1. Add the following:

    • sql_view_name = ZCTRAVEL_003
    • data_source_name = /DMO/I_Travel_U. You can use Auto-Complete Ctrl+Space
  2. Insert all the elements from /DMO/I_TRAVEL_U by placing your cursor inside the as select from statement (curly brackets) and again choosing Auto-Complete Ctrl+Space .

    step3b-insert-all-elements

  3. Comment out the statement with parameters parameter_name : parameter_type for now, so that the error disappears.

  4. Format, save, and activate your code by choosing Shift+F1, Ctrl+S, Ctrl+3.

Log on to answer question
Step 4: Display in Data Preview
  1. Click anywhere in the editor and choose Open With > Data Preview from the context menu.

    step4a-open-display-preview
  2. The Data Preview is displayed in a new tab. You can investigate the data, by filtering, specifying the number of rows, and so on. The values in LastChangedAt are not user-friendly, but you solve that by providing a Fiori elements preview in the next step.

    step4b-data-preview
Log on to answer question
Step 5: Create a service definition

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:

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

    step4a-new-sd
  2. Choose a name and description:

    • Z_EXPOSE_TRAVEL_XXX
    • Service exposes Travel data
    step4b-sd-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.

    step4d-sd-editor
  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.

Log on to answer question
Step 6: Create service binding
  1. Select your service definition, then choose Service Binding from the context menu, then choose Next.

    step5a-new-sb
  2. Choose:

    • Name = Z_BIND_TRAVEL_XXX
    • Description = Service binding for Travel data
    • Binding Type = ODATA V2 (UI…)
    • Service Definition = Z_EXPOSE_TRAVEL_XXX
    step5b-create-service-binding
  3. Choose the transport request; choose Finish.

The service binding automatically references the service definition and thus the exposed custom entity.

Log on to answer question
Step 7: Activate service binding
  1. In the editor that appears, choose Activate.

    step13-activate-service-endpoint
  2. You can now see the Service URL and Entity Set.

    step13b-entity-set
  3. To open the Service Document (XML) in your browser, choose Service URL.

    step13c-open-service-urlstep13e-service-xml-in-browser
  4. In the browser, you can also see the Metadata Document of the Business Service by adding $metadata to the URL: /sap/opu/odata/sap/Z_BIND_TRAVEL_003/$metadata.

    step13f-service-metadata-in-browser
Log on to answer question
Step 8: Display Fiori Elements Preview
  1. Select the entity set and choose Preview.

    step7a-display-fep
  2. Log in using your ABAP Environment user and password; the Fiori Elements preview appears.

  3. By default, no columns are selected. To see the data, choose Settings, then choose Select All.

    step7b-settingsstep7c-select-all
  4. Display the data by choosing Go.

    step7d-fep-w-data
Log on to answer question
Step 9: Add annotation for automatic display
  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.
Log on to answer question
Step 10: Extract metadata

At present, you only have minimal annotations. As you add more, your CDS view will start to get cluttered. So you should extract your UI annotations to a separate object, a metadata extensions object, as follows:

  1. First add the annotation @Metadata.allowExtensions: true to your CDS view.

  2. Then, click anywhere in the editor, then choose Source Code > Extract Metadata Extension from the context menu.

    step9a-extract-metadata
  3. Enter a name and description for your metadata extension object, clearly similar to your CDS view name, and choose Next:

    • Z_TRAVEL_METADATA_XXX
    • Metadata for Z_C_TRAVEL_DATA_XXX
  4. Accept the transport request, choose Next, select all elements, then choose Finish.

    step9b-mde-select-elements
  5. You will get an error, because you have not yet assigned the metadata extension to a layer. Since you are in sandbox mode, enter the value #CORE using auto-complete ( Ctrl+Space ).

    step9c-assign-layer

    Layers allow customers or partners, for example, to enhance the metadata without modifying the CDS entity. You can also add industry- or country-specific enhancements.

    The metadata extensions are evaluated in a specific order. For more information, see Annotation Propagation.

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

Log on to answer question
Step 11: Add semantic metadata

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.

    step10a-currency-code
Log on to answer question
Step 12: Add search field

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.

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

    step11b-miami-90
  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.)

    step11b-miami-70
Log on to answer question
Step 13: Add selection fields

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:

    step12a-selection-field
  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:

    step12b-all-selection-fields-preview
Log on to answer question
Step 14: Check your code

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;

}

Log on to answer question
Step 15: Test yourself
Where do you specify that your OData service is an OData version 2 service for UI?
×

Next Steps

Back to top