Skip to Content
Technical Articles
Author's profile photo srikanth desireddy

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.

Assigned Tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Lokeswar Reddy Byni
      Lokeswar Reddy Byni

      Well explained with detailed steps 🙂

      Author's profile photo srikanth desireddy
      srikanth desireddy
      Blog Post Author

      Thanks

      Author's profile photo Aman Garg
      Aman Garg

      This was helpful. Well explained. Thanks!

      Author's profile photo Suneel uggina
      Suneel uggina

      Very helpful. Nice blog.

      Author's profile photo Sudhanshu Sharma
      Sudhanshu Sharma

      Very Well Explained and Informative. Thank you!!

      Author's profile photo Varun Choudhary
      Varun Choudhary

      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.

      Author's profile photo Priyaranjan gupta
      Priyaranjan gupta

      Thanks for this informative blog. really helpful.Just one notice - table name and data source in view seems to be different 🙂

      Author's profile photo Werner Dähn
      Werner Dähn

      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?

      Author's profile photo Steffen Mallwitz
      Steffen Mallwitz

      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?

      Author's profile photo Aleksandar Mijailovic
      Aleksandar Mijailovic

      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

       

       

      Author's profile photo Vivek Prabhu
      Vivek Prabhu

      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

      Author's profile photo Aleksandar Mijailovic
      Aleksandar Mijailovic

      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

      Author's profile photo SRINIVASULU BESTA
      SRINIVASULU BESTA

      Thanks Srikanth for the useful info. very helpful blog..

      Author's profile photo Nitin Jagtap
      Nitin Jagtap

      Thanks, its really helpful.

      Could anyone please let me know how can I add button in line item and link it to other entityset?

      Author's profile photo Marcio Martins
      Marcio Martins

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

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

      Author's profile photo Marcio Martins
      Marcio Martins

      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!

      Author's profile photo Sebastian Merlo
      Sebastian Merlo

      Hi Marcio, I have exactly the same situation, did you find a solution to this?

       

      Best Regards

      Author's profile photo Mohammed Imran
      Mohammed Imran

      Thanks Srikanth for the blog. Followed your steps and could create the app by myself successfully...

      Author's profile photo Pratik Kumar
      Pratik Kumar

      Hello srikanth desireddy

      Could you please explain how have you added S4A to destination in your sap web ide?

      Author's profile photo Ratan Kumar P.V
      Ratan Kumar P.V

      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

      Author's profile photo Ramin Shafai
      Ramin Shafai

      So I guess the question people have been asking still remains somewhat unanswered: "what about real life scenarios"?

      The scenario explained in this tutorial is for a totally Z data model, which are rare in my experience. Most projects involve some SAP object, like order, notification, PO, etc. For these scenarios you don't create Z objects, there are BAPIs for create, modify, delete functionalities.

      So how do you use CDS/BOPF for real life scenarios with existing SAP objects? Are we supposed to ignore all BAPIs and rewrite all the logic in our Z BOPF objects? or do we call BAPIs from our BOPF classes? And if we don't have z objects, what do we create our BOPF object on? Our CDS views will select from standard tables, so how do we create a BOPF object at all?

       

       

      Author's profile photo Sweety Singh
      Sweety Singh

      Hi  Srikanth, Thanks for such detailed Blog. I have similar requirement where I have to make fields columns editable at first page itself( List report Table). How do I achieve this through CDS?

      Thanks in Advance!

      Author's profile photo Harshal Pingale
      Harshal Pingale

      Hello srikanth desireddy,

      Thanks for this nice example.

      Could you please let me know if we can make this work for multiple lines edit/create also?

      Regards,

      Harshal

      Author's profile photo Shailesh Yadav
      Shailesh Yadav

      Dear srikanth desireddy ,

      Thanks for the blog, i was able to create the application. I was also exploring the option for excel upload functionality and multiple line Edit / Create, but was not able to find it without custom UI and OData coding.

       

      Could you please let us know if this is possible through annotations (Fiori Elements), it would be a great option.

      Thank You!

      Kind regards,
      Shailesh Yadav