How to quickly create Fiori Elements application on SAP BTP through CDS view

This article is based on the development of the ABAP programming environment of SAP Business Technology Platform.

Use ABAP Development Tool to log in to the SAP BTP ABAP programming environment and create a new package named Z_JERRY_CDS.

Right-click the package and create a new Consumption view. This view is a consumption view, which is based on the business object (BO) view/DMO/I_TRAVEL_U and provides a given data model independent of the consumption layer.

It contains all the core information required by the application running on it.

The consumption view is a CDS view defined on top of the BO view and is used to:

Expose fields suitable for a given consumer use case
Use annotations (for example for UI, search, and OData) to enrich the data model with metadata.

After the consumption view is created, the source code is as follows:

Using the ABAP Development Tool Content Assistant shortcut keys, you can quickly bring all the fields of the standard view /DMO/I_Ttravel_U into the current consumption view through the menu Insert all elements (template):

Select Open with Data Preview to view the data of the consumption view:

The data is shown as follows:

Next, expose the CDS view as a business service. This will allow us to preview the changes made in the ABAP Development Tool in the Fiori Elements preview.

Business services are composed of service definitions and service bindings.

You can use service definitions to define what data (at the required granularity) is exposed as a business service.

Then use service binding to bind the service definition to a client-server communication protocol, such as OData. This allows us to provide multiple bindings for the same definition, such as exposing services to UI and A2X providers.

Create a new Service Definition:

Maintain name and description information:

In Service Definitions, expose the previously created consumption view, Z_C_TRAVEL_DATA_JERRY, as a service:

Based on the created Service Definition, create a Service Binding:

After activating the Service Binding, click the Preview button in the Entity Set and Association area to view the automatically generated Fiori Elements application:

The Fiori Elements application opened does not have any list bar configured by default.

Click the gear icon in the toolbar above, and select all fields on the view as list items:

Now the Fiori Elements app can display the data normally:

In order to prevent users from manually clicking the gear icon to select the list items before previewing the Fiori Elements application, we can add the following annotations in the consumption view:

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

As shown in the figure above, two view fields, TravelID and AgencyID, have an annotation @UI.lineItem added, which makes them set as table column items that must be displayed by default.

Before clicking the gear, the checkboxes in front of these two fields are always checked by default.

We can maintain the annotations in the CDS view separately into a development object.

First, in the CDS view, add the following line of comments:

@Metadata.allowExtensions: true

Right-click menu and select Source Code -> Extract Metadata Extension:

This will create a new ABAP development object dedicated to storing the annotation metadata of the CDS view:

Select Next to automatically parse out the annotation metadata that has been added so far in the original CDS view:

The value of Metadata.layer, choose the default \#CORE:

Here's how to add CDS view annotations to make the automatically generated Fiori Elements application have a search function.

Add the following notes:

@Search.searchable: true

Then add the following annotations to the view field that you want to support search, memo, that is, the description information field:

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

Activate the CDS view, refresh the Fiori Elements application, and you will see an additional search input box above the table control. Can work normally.