"How to create a read-only CDS-based travel model How to display your CDS view in a Fiori Elements preview How to add selection fields to 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"

"What do I need before I start?"

" You have done one of the following: Tutorial: Create an SAP BTP ABAP Environment Trial User You have bought a licensed version of SAP BTP ABAP Environment You have installed ABAP Development Tools, latest version You have downloaded the ABAP Flight Reference Scenario. To pull this reference scenario from Github, see Downloading the ABAP Flight Reference Scenario "

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

Create a CDS View, display it in Fiori Elements preview, and enhance its appearances using built-in annotations in the Business Technology Platform, ABAP Environment

🎓beginner ⏱45 min ABAP Development Beginner SAP BTP ABAP Environment SAP Business Technology Platform 0/14

Overview

🎓 beginner ⏱ 45 min. ABAP DevelopmentBeginnerSAP BTP ABAP EnvironmentSAP Business Technology Platform

You will learn

✔How to create a read-only CDS-based travel model
✔How to display your CDS view in a Fiori Elements preview
✔How to add selection fields to 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

J Julie Plummer June 5, 2026

Created by March 9, 2023

Contributors

Prerequisites

You have done one of the following:
- Tutorial: Create an SAP BTP ABAP Environment Trial User
- You have bought a licensed version of SAP BTP ABAP Environment
You have installed ABAP Development Tools, latest version
You have downloaded the ABAP Flight Reference Scenario. To pull this reference scenario from Github, see Downloading the ABAP Flight Reference Scenario

Steps

Open all Close all

Intro

In summary, based on existing persistent data sources, you will create and implement a query for an OData service to get a running app with useful read-only features. 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.

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

For more information on creating a read-only app, see the SAP Help Portal: Developing Read-Only List Reporting Apps

Step 1 Create package

—

Create a new package for this tutorial, by choosing New > ABAP Package.
step1a-new-package
Enter the following then follow the wizard, choosing a new transport request:
- Name: Z_ENHANCE_CDS_###
- Description Enhance CDS Tutorial 2020
  step1a-create-package
  step1b-new-tr

Step 2 Create CDS View Entity

In your package, create a CDS view entity. Select the package, then choose New > Other from the context menu, then choose Data Definition.
step2a-new-cds
Add the following: - Name: Z_I_TRAVEL_R_### - Description: Travel Model View Entity - Read Only - Referenced object: /DMO/I_TRAVEL_U
```
 Your CDS view is a read-only view. It is based on the business object (BO) view, `/DMO/I_TRAVEL_U`.
```
Choose or create a transport request, then choose Next. Do not choose Finish.
Choose Use template then choose Define View Entity.
step2b-choose-view-entity
Finally, choose Finish.

Your CDS entity appears in a new editor, with the elements (fields and associations) from the referenced data object, ``, already inserted. Ignore the error for now.

Step 3 Define CDS View

You will see an error - at BookingFee. Add the following annotations:

CDS

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

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

Format, save, and activate your code by choosing Shift+F1, Ctrl+S, Ctrl+F3. It should look like this:

CDS
@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Travel Model View Entity - Read Only'
@Metadata.ignorePropagatedAnnotations: true
@ObjectModel.usageType:{
  serviceQuality: #X,
  sizeCategory: #S,
  dataClass: #MIXED
}

define view entity Z_I_TRAVEL_R_###
  as select from /DMO/I_Travel_U as Travel

{
  key TravelID,
      AgencyID,
      CustomerID,
      BeginDate,
      EndDate,

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

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

      CurrencyCode,
      Memo,
      Status,
      LastChangedAt,

      /* Associations */
      _Agency,
      _Booking,
      _Currency,
      _Customer,
      _TravelStatus
}

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, then the system will add the appropriate currency to the TotalPrice column automatically. There is no need to display CurrencyCode as a separate column.

Later, in the Fiori Elements preview, or your Fiori app, the Total Price column will look like this.

![step10a-currency-code](https://raw.githubusercontent.com/sap-tutorials/abap-core-development/main/tutorials/abap-environment-create-cds-mde/step10a-currency-code.png)

Step 4 Display in Data Preview

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:

SAP Help Portal: Creating a Service Definition
SAP Help Portal: Creating a Service Binding

First, create the service definition, by selecting your CDS view and choosing New > Service Definition from the context menu.
step4a-new-sd
Choose a name and description:
- Z_I_TRAVEL_R_###
- Service exposes Travel data
Choose the transport request; choose Next.
Use the selected template; choose Finish. The name of your custom entity is inserted automatically.
To make the service definition more readable, add an alias to the expose statement:
CDS
```
expose Z_I_TRAVEL_R_### as Travel;
```

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

Step 6 Create service binding

Step 7 Activate service binding

Step 8 Display Fiori Elements Preview

Step 9 Add annotation for automatic display

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 in Z_I_TRAVEL_R_###. The start of the CDS view will then look like this - for now. (Please note that you will add more annotations later on.)

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.

CDS
@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,


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

@Semantics.amount.currencyCode: 'CurrencyCode'
@UI           : {
      lineItem      : [{position: 50, importance: #HIGH}]
      }
TotalPrice,

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.

Step 10 Extract UI metadata

Step 11 Add search field

You will now add a fuzzy search capability.

First, add the search annotation to your CDS view:
CDS
```
@Search.searchable: true
```

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

CDS

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

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 ):

CDS

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

Refresh the Fiori elements preview in your browser.

There is a new Search input field.

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

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

Step 12 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.

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

CDS
@UI           : {
      lineItem      : [{position: 10, importance: #HIGH}],
      selectionField: [{position: 10 }]
      }
TravelID;ata-lang=cds>CDS
@Metadata.layer: #CORE
annotate view Z_I_TRAVEL_R_### with
{

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

}

Step 14 Test yourself

Resources

Next Steps

Discussion

Share feedback on this tutorial or join the conversation in SAP Community.

Submit detailed feedback

Discuss in Community

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

Overview

You will learn

Prerequisites

Prerequisites

Steps

Intro

Resources

Next Steps

Related Tutorials

Discussion

Joule

AI Notice