If in 2021 you still don’t know what CDS annotations or Fiori Elements are, let me tell you that you are not up to date in SAP. I don’t blame you, if you work in a consulting firm, you may continue to work with some clients who do not yet have SAP S4 / HANA. In this article, I will help you understand the implications of this new way of working and we will see a practical example.

What are Fiori Elements?

Fiori Elements are nothing more than a set of templates that SAP has created with the aim of minimizing the cost of developing Fiori applications in Front-End. These templates are based on an oData service and on a series of metadata (annotations) to create the entire user interface and represent the information that comes from our SAP system automatically.

In summary, we should focus our development work on Back-End (with CDS and annotations) so as not to have to develop any or almost no lines of code in SAPUI5. Easy, right? Well, it will be but not always. As I mentioned before, Fiori Elements are templates auto-generated by SAP WebIDE and they are designed to represent information, within design limits that these templates govern us. In case of having to expand the interface outside these design limits or of having to perform operations against our SAP system, there will be no other option than to develop these extensions by hand. But do not worry! In this blog we will see examples of extensions and you will see that it is not so complicated.

The set of templates that SAP provides us are divided into 4 types: Analytical list page, List report, Object Page and Overview page. Each of them is designed for a different type of application and, specifically, in this article we will see an example of how to create a Fiori application of the List Report type.

Pre requirements

Before starting, we need to meet the following prerequisites to be able to carry out the development of the example that we are going to see below:

• Have Eclipse installed with SAP development tools.
• Have an account in SAP Web IDE.
• Have access to a SAP HANA system to be able to follow suit.

Create CDS view in Eclipse

The first step is creating the CDS view in Eclipse. For this article, we are going to implement a simple example that retrieves a list of materials with their descriptions and some other fields. The objective is to learn the process of creating a Fiori application automatically from an oData service defined based on a CDS view. In future articles, we will see more complex examples of Back-End logic.

To create the CDS view, we open Eclipse and in our Local Objects folder within the entrance to our system, we click Right Button -> New -> Other ABAP Repository Object.

We display the Core Data Services folder and select Data Definition.

We introduce the name of the CDS view, choose the package where we want to store the view (in our example, we will use $TMP, which is a local package that is not associated to any transport route) and add a brief description:

Finally, the wizard allows us to choose a CDS type template to speed up development. In our case, we select the standard template “Define View” and click Finish.

Once our CDS view is created, we insert the code that retrieves the list of materials that will be displayed in the application. In our example, we retrieve the material code, material description, item type, and item group. To retrieve the description, we join the MAKT table and filter the WHERE clause by the Spanish language.

Adding Fiori annotations to CDS to enrich its metadata

As previously mentioned, the objective of this article is to learn how to generate a List Report type Fiori application automatically, without the need to implement any line of SAPUI5 code in the SAP Web IDE. And to achieve this goal, we need to implement the powerful annotations in our CDS view.

Annotations are nothing more than an extension of our application metadata. They are lines of code in our CDS view that tell the interpreter how the user interface should be displayed, how an oData service is defined, how it is going to filter or search within our application, etc. To know all the types of annotations, you can access this link where SAP explains each of the types of annotations in detail with examples.

In our case, we are going to see two types of annotations: UI Annotations and oData Annotations.

UI Annotations are those annotations in charge of indicating to our application how the information should be represented in the user interface. Within this type of annotations, we have infinite options to represent the information to our liking (within certain limitations, of course) which are available at the SAP reference link indicated above.

In our case, we have used three different types of UI Annotations:

On the other hand, we have used an oData Annotation to publish the CDS view as a service. The @ OData.publish: true annotation allows the CDS view to be created as a service in our SAP S4 / HANA system. This service is created with the name “viewname” + _ “CDS” once we activate the CDS view. In our case, the service created in SAP will be called ZCDS_TEST_MATERIAL_CDS.

To finish the process of creating our CDS view, we activate the view with the button shown in the following image:

Registering the service in our SAP system

Once we have activated our CDS system, our ZCDS_TEST_MATERIAL_CDS service is already created in our SAP system. However, we need to add this service to the list of active services in our system.

To do this, we access the transaction “/n/IWFND/MAINT_SERVICE” and click on add service.

We insert our alias (LOCAL) of our system and add the name of our service (viewname + “_CDS”) in the Technical Ser. Name field. Click on the Get Services button.

We press the button “Add selected services” and indicate a package where to register the service. In our example, we will register it as a local object ($ TMP):

Click OK and, if everything went well, the following message will appear, but in English ;):

Once the service has been registered, we return to the previous window and search for the service. We check that the ICF node is active to finally verify that the service has been registered correctly.

And with this, we already have our CDS view that will be in charge of retrieving the information and the registered service of our CDS that will allow us to retrieve said information from the application. Now we only have to create our Fiori List Report application.

Creating the Fiori List Report application

We access our SAP Web IDE account and create a new project from a template. For them, right click on our Workspace, New -> Project from Template.

We select the List report Application type template.

Here is a name for our SAP Web IDE project and a title for our application. We can also add a namespace and a description as optional values.

We select from our Service Catalog the service that we have registered from our CDS view. To do this, we select the connection to our system (you have to have it configured in your SAP Cloud Platform Cockpit) and search for our service. We select the service and click Next.

The wizard tells us where to get the annotations from. In our case, we select our service, although there is also the option of adding a local file with the different annotations. We press Next again.

Finally, we indicate our oData Collection (our CDS view) and we leave the options that come by default. We press Finish to finish creating our project.

We launch the application from our SAP Web IDE.

As we can see, we already have our Fiori List Report application. In the image, we can see the list of materials filtering by a material code. In this way, we have achieved a List Report type application capable of filtering by the fields that we indicate in our annotations in the CDS view without introducing any line of SAPUI5 code.

In future articles, we will see how to extend this example with new CDS annotations. In addition, we will see how to introduce new functionalities that are not possible with autogenerated templates through Views and Controllers extensions in SAP Web IDE.