Create a Fiori application to perform CRUD operations with SAP Fiori Elements and BOPF Framework in S/4 System using CDS Annotations

Introduction

In this post, we will go over a series of steps in creation of a Fiori application to perform CRUD operations with SAP Fiori Elements and BOPF Framework using CDS annotations, without using a single line of UI5 code.

Pre-requisites for this Application:

• S/4 HANA System
• SAP NetWeaver gateway
• HANA Studio
• SAP Web IDE Cloud Platform

Step 1: First, we need a database table in S/4 HANA system to perform CRUD Operations on this table.

Step 2: Open HANA Studio to create CDS View on top of database table.

Step 3: Add your backend S/4 HANA system in HANA Studio as shown below.

Click on ABAP Project as shown in the above screen and add backend connector.

Once we add the backend connector in HANA Studio, we should create CDS View for the database table.

Here, in my case, it is ZCOVID_COUNTRY.

Step 4: CDS View Creation.

Step 5:  We can provide input selection and also arrange order of fields in the Fiori application.

By using Meta data extension, we can achieve the above functionality.

Step 6: Create an OData service for this CDS View.

Add @OData.publish:true annotation in our CDS View.

This annotation creates an OData service for the consumption view as shown below.

Step 7: Register and activate the OData service in S/4 HANA system.

Navigate to transaction:  /n/iwfnd/maint_Service .

Click on Add service button as shown below.

Provide technical service name and click on Get services button as shown below.

Next click your service and activate the service as shown below.

So far, OData service registration and activation part is completed.

Step 8: Implement the BOPF Framework using CDS Annotations to perform CRUD operations on ZCOVID_COUNTRY  Table.

Use the below CDS Annotations for BOPF Framework.

Complete CDS View is given below.

@AbapCatalog.sqlViewName: 'ZCOVID_CTRY'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Country wise Covid-19'

@Metadata.allowExtensions: true

@ObjectModel.modelCategory: #BUSINESS_OBJECT

@ObjectModel.compositionRoot: true

@ObjectModel.transactionalProcessingEnabled: true

@ObjectModel.createEnabled: true

@ObjectModel.updateEnabled: true

@ObjectModel.deleteEnabled: true

@OData.publish: true

@ObjectModel.writeActivePersistence: 'ZCOVID_COUNTRY'

Define view ZCOVID_COUNTRY_WISE as select from zcovid_country as ctry {

key ctry.zcountry,

ctry.zconfirmed,

ctry.zrecovered,

ctry.zdeceased

}

Now back-end development is completed.

Step 9: Configuring Application in Cloud Web IDE using SAP Fiori Elements (List report application).

SAP Fiori Elements (List Report Application):

• Open SAP Cloud Web IDE.
• Create UI5 Project as shown below.
• Create Project from template.

Step 10: Create List report application, select list report application as shown below.

Click ‘Next’ button.

In the next screen, enter the required properties as shown below.

Click ‘Next’ button upon entering all the details.

Select your back-end system and provide your service details as shown below.

Click ‘Next’ button.

Step 11: Select your annotation file and click on Next button as shown below.

Step 12: Data binding.

Provide the Entity-Set name as input in OData Collection as shown below.

Click ‘Finish’ button.

Application is now ready, we can proceed for execution.

Step 13:  Execution of the application.

• Select your project.
• Right click on your project and click Run as shown in the screen below.

The system opens a new tab in the browser.

Create operation:

Click on create button on top of the screen as shown in screen below.

Enter the required details and click on save button.

Read Operation:

If we need to view the existing data, we can view it in the initial screen of the application.

Update Operation:

If we need to update the data, select the row and click the entry.

Upon Click, it will navigate to another screen as shown in screen below.

Click on Edit button to edit the record.

Update the required fields and click on save button.

It will be saved in the DB directly.

Now we can view the updated entries in the home page of the application.

Delete Operation:

If we need to delete a record, select the row and click on corresponding entry.

Click on delete button on top of the screen as shown in the screen below.

If you click on delete, the corresponding entry will be deleted from the database table.

Hope you find this post helpful.