Create Fiori app using CDS with BOPF- For beginners Part 1

[Former Member]

This blog is for developers who wants to get started with the UI5/Fiori + OData + CDS + BOPF.

 

Prerequisite: 

1) Concepts of Core Data Services(CDS)


2) Basic Understanding of OData service

3) Concepts of BOPF

4) Conceptual knowledge of Fiori(Smart Template)


 

The Fiori/Ui5 is for the UI part, the CDS is for the data retrieval(code push down) while the BOPF is for handling DB activities.

 

Technically in the S4 Hana world, with the Code-Push down paradigm the intense business logic should happen in DB layer rather than in ABAP Application server.  This blog is for pure test demo using CDS + BOPF to display the Fiori App. The performance optimization is not the intention here, but rather on how to use CDS + BOPF to get started with in S4 Hana Cloud.

 

Am using Web IDE environment with cloud connector to display the Fiori app. Let me quickly show how does the app look like.



The + and Delete buttons are handled by BOPF framework while the other action is manually created in BOPF. The Business logic of this other action shall be done in an BOPF action class. We shall get into the details later on.

 

Lets get started with the development.

 

Initial set up required

1) You need HANA studio or Eclipse tool as we need to use ADT(ABAP Development Tool)

2) For hosting the app, Web IDE has been used. I recommend checking the link on how to install and set up the Web IDE trial and how to set up the Cloud connector.

3) System is S4 HANA ON PREMISE 1.0 with ABAP 7.50

 

For those who are using Hana account trial, the link in step 2 will take care of the web IDE including the cloud connector. Make sure the cloud connector is connected to the backend system as per the set up in step 2.

 

If the Cloud Connector set up is done, it should look something like this:

Cloud connector





 

Web IDE

After logging into HANA account trial and go to services and click on Web IDE.

Open Web IDE now.



 

We shall be creating an sales order app as an demo example.

Basic steps involved in creating this app are :

• Create 2 Consumption CDS views (Sales Order header & Sales Order Items)


• Use annotation (Consumption view) for generating OData service 


• Use annotations (Basic views) for generating BOPF objects


• Use Fiori Smart Template to display Sales order application

 Technically at a higher level :

- The Fiori app shall consume the OData

- The OData has data source as CDS views (ie consumption CDS)

- The BOPF takes care of table CRUD operations. Here the BOPF objects are generated from the CDS views via annotations.


 

 Lets start with the CDS views.

Basically in the CDS, there are consumption CDS, Basic CDS and Composite CDS. Consumption CDS are exposed to the UI. The intention is not to get into CDS details here, but to give a quick information on CDS.


 

We have 2 consumption CDS view's. And the Header Consumption view shall be used by Fiori. For simplicity sake, the naming convention shall be as :
Consumption CDS with *_C_*
Basic CDS with *_I_*

 

1) Header Consumption ZDEMO_C_SALESORDER

    1.1)  The SO header consumption view utilize the Basic CDS view ZDEMO_I_SALESORDER

      1.2)  The Basic view use a Header Table "ZPROTO_SO_A". This shall form the BOPF root table for SO Header

 

2) Item consumption view is  ZDEMO_C_SALESORDER_ITEM

    2.1) The Item consumption view use Basic CDS view ZDEMO_I_SALESORDER_ITEM

    2.2) The Basic view use the Item table ZPROTO_SOI_A which shall form the BOPF item node table


 

First prepare the table structure for SO header and SO item respectively.

SO header table ZPROTO_SO_A




 

SO Item table ZPROTO_SOI_A



Now, we can use these tables in Basic CDS views.


Lets start creating with Basic Item CDS view


Basic SO Item  CDS

For creating CDS view, in the HANA studio, go to ABAP perspective. Choose your system and create a Package underneath. Right click on the package and choose New -> Other repository object.



 



Give the name of the view and click on Finish.

The CDS + annotations used are:





 

Here the association between item and header imply an LEFT OUTER JOIN. If you want to force an inner join with association, example you can do something like this for example




For more clarity on path expression joins, pls refer to here


  

Save and activate the ZDEMO_I_SALESORDER CDS view. 

Post activation, following objects are created in Dictionary :


1) DB view : ZDEMO_I_SALESORDER_ITEM (CDS Entity)

2) DD SQL view (Columnar) : ZDDL_I_SOI16


 

Since this Basic view cannot be used directly for UI display, an Consumption view shall be created. 

 

Consumption SO Item CDS

The CDS code + Annotations are as below:






Save and Activate.

Post activation the objects created are in Dictionary :

1) DB view - ZDEMO_C_SALESORDER_ITEM

2) DD SQL View - ZDDL_C_SOI16


We are done with sales order Item.

 

Lets move to Sales Order Header starting with Basic view.

 

SO Header Basic CDS ZDEMO_I_SALESORDER

The CDS code + Annotations are:




Optional: there is an Object model annotation for modelCategory: # BusinessObject. If we use this the create sales order logic has to be written as an BOPF action. And this action shall be triggered when the + icon is clicked.

 



 

Save and Activate.

Post activation, following objects are generated  :

1) DD Sql view ZDDL_I_SO16

2) DB view ZDEMO_I_SALESORDER

3) And an BOPF Business Object by the CDS name ie Business Object ZDEMO_I_SALESORDER

 

The BOPF Business Object can be viewed in Hana Studio/Eclipse via ABAP perspective. Go to the package, under Business Objects and here you shall see the generated BOPF object. Other option is via SAP Gui. You can open GUI in studio as well. Use Tcode BOBX or /BOBF/CONF_UI.

BOPF Business Object

 

Now lets use this Basic Header view in a Consumption Header View

 

Consumption SO Header CDS ZDEMO_C_SALESORDER

The CDS code + Annotations are:





Save and Activate.

Post activation, the following objects are created:

1) DD Sql View DDL_C_SO16

2) DB view ie CDS entity  ZDEMO_C_SALESORDER (DDIC)

3)OData service (<CDS view>_CDS)

 



The OData service generated is not active. To activate go to Tcode Gui Tcode /IWFND/MAINT_SERVICE.

Click on Add service. Choose Local and enter the Name of CDS in the Technical Service and click Get services.




Click on "Get Services. Click on Service or click on "Add Selected Service". In the next screen enter the package or local object and click ok. The OData service is now Active.

In the background when the CDS view with OData annotations get activated, the SADL generates Gateway artifacts such as Model Provider Class (MPC) and Data Provider Class (DPC) which form the backbone of OData.

Normally to create an OData service we go to Tcode SEGW and create a project and a Data Model(Data Reference as Final Consumption CDS view) and the MPC and DPC are generated.

In our case we can view these artifacts as shown below.




Test the Odata service.

Go back to the service maintenance screen. Click on Filter and enter the service name as Technical service in our case ZDEMO_C_SALESORDER_CDS



Click on Gateway Client. In the new window click on execute. If the status is 200, all is well.





 

The OData metadata is fine. Test if the OData returns records by choosing the entity sets.



 

So we are done with Final Consumption CDS view. And we can use this view in Fiori Smart Template.

  

Recap of what we have done so far.

1) Created Basic Item CDS

2) Created Consumption Item CDS

3) Created Basic Header CDS

4) Created Consumption Header CDS

 

Before we start with Fiori App, we shall create BOPF action. The action shall change the Lifecycle Status of an Sales order



 

The BOPF action and the App display will be covered in the Part 2.