Skip to Content
Technical Articles

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.

20 Comments
You must be Logged on to comment or reply to a post.
  • Hi Srikanth

    Is it possible to create the App without using the Project Template?

    I have a App with Master, Detail Page, and I want to create a app with the CDS View Annotation but without using a template.

  • Shouldn’t there be at least a warning that you cannot/shouldn’t insert into S/4Hana tables directly?

    It works here because you obviously had broad permissions and you are using a Z-tables but it might create the impression developers can create new sales orders by doing the same on the VBAK table.

    Which obviously leads the reader to the next question: How can this be done in a real world use case?

    • Not exactly an answer to your question, but general reasoning: Within the BOPF framework one should define BAPI’s that perform the CRUD operations. The question would be, how these would be made known to the CDS view, or maybe it happens only in the backend?

      • Hello Steffen,

         

        it is possible to BAPI-calls and other ABAP code (actions, validations and determinations) into so called Behavior implementations. You can find more about it in this OpenSAP-Course for Key Technical Topics in a System Conversion to SAP S/4HANA, Unit 4 of Week 3. This approach described there depends on your Netweaver version. In older versions, one should also be able to insert ABAP-code. Useful TCodes for BOPF are BOB, BOBT and BOBX

         

         

        • Hi Aleksandar,

           

          Wanted to confirm, the OpenSAP link seems to be ABAP Restful Programming Model and the blog is the ABAP Programming Model right ?  I am new to these concepts so wanted to confirm.

           

          Thanks and Regards

          Vivek

          • Hello Vivek,

            yes, the terms are maybe a bit interchanging… before, it was called ABAP Programming Model for Fiori, now it is called ABAP RESTful Model..

            Main ingredients are: CDS-Views, Annotations (UI-Annotations and some other, like OData-Service generated by “OData.publish: true”-Annotation, out of the CDS, no SEGW) BOPF (which are also created through semantical annotations within the CDS), Behaviour Def. & Impl., Virtual Data Model, and Fiori-Elements Templates, that read the Annotations and create the UI… i hope i did not get anything wrong or missed sth.

            Hope it could clarify somewhat.

             

            Cheers,

            Aleks

    • hey colleague, add the following instruction to your CDS view:

      @ObjectModel.createEnabled: true
      @ObjectModel.updateEnabled: true
      @ObjectModel.deleteEnabled: true

  • Hey @srikanth desireddy, what if fields are not appearing in the create page?

    I’m adding the following notation:

    @ObjectModel.createEnabled: true
    @ObjectModel.updateEnabled: false
    @ObjectModel.deleteEnabled: true
    @ObjectModel.transactionalProcessingEnabled: true

    Thanks!

  • Hi Srikanth. can you please help me in the below error, when i am trying to use the annotation : @ObjectModel.transactionalProcessingEnabled: true  for the cds view.

    the error is shown below. I am in HANA 1909.

    error

    error

    /
    error