Skip to Content
Technical Articles

ABAP in SAP Cloud Platform – Basic Fiori Application – Part 1

SAP Cloud Platform, ABAP Environment aka Steampunk has been released recently as a trial version. Everyone in SAP community is excited about this offering and I am no exception. I got my Steampunk trial account and decided to develop a basic Fiori application. In this blog series, I will explain the process step-by-step to create a ‘Sales Order details’ Fiori application. To know about the trial offering, please refer below blog from Andre Fischer – This blog contains enough information to help you create your trial user:

Steampunk Trial Version

As Steampunk environment is a PaaS offering, we don’t have any of the ERP database tables like VBAK, VBAP, MARA etc in this environment. Of course, you can connect your S/4HANA or S/4HANA Cloud system to Steampunk system to get data directly from your ERP systems, but that is not what I am going to cover in this blog. I will create a custom data model on Steampunk system and create an application on that data model.

Database Tables

I have created 2 custom tables – ZGKVBAK and ZGKVBAP, in each table I have added a subset of VBAK or VBAP fields. I decided to refer these 2 SD standard tables as most consultants relate to Sales Order & items scenario and I will have data from a demo system to put into these tables. Please note that there are no VBAK or VBAP tables in Steampunk system. I have just referred them from an OP system.

Right-click on your package in Steampunk system -> New -> Database table

I named this first custom table as ZGKVBAK. Here is the table structure and fields information:

Created another custom table – ZGKVBAP. Here is the table structure and fields information:

Next task is to populate data into these custom tables. I followed another blog from Andre Fischer, which provides a utility program to generate INSERT statement. I did tweak some code in this program to adapt to my subset of fields. Here is the blog:

Insert Data in Steampunk tables

Now, we have 2 database tables with populated data.

CDS Views

I created CDS views based on above data model. These CDS views contain annotations to add semantic information and render the data in a Fiori application as specified through annotations.

Created first CDS view which extracts data from table ZGKVBAK. I named it as ZGKSALESORDERDETAILS.

Created another CDS view which extracts data from table ZGKVBAP. I named it as ZGKSOITEMS.

CDS view ZGKSALESORDERDETAILS is our root view which comprises of other child view ZGKSOITEMS. In our scenario, root view has only one child, which is for items, but we can have multiple child views as needed.

CDS view ZGKSALESORDERDETAILS – Created a composition to ZGKSOITEMS view:

CDS view ZGKSOITEMS – Defined an association to parent view:

Added required fields in the projection list for both views.

Fiori elements’ annotations are added to include fields on the Fiori application and also to provide various other information about fields. Fiori elements’ annotations are a big topic in itself, which is not in the scope of this blog.

There is one change worth noting from our OP Fiori elements’ annotations usage is that if we want to see ‘UI Preview’ of application, we will have to provide complete annotations like UI facet etc, which are usually provided by framework when you create applications from template in Web IDE.

Here is the full snapshot of CDS views I created with annotations embedded in the main view:

View – ZGKSOITEMS

To conclude this development, we have created custom database models and corresponding CDS views. Fiori elements’ annotations are embedded in CDS views to show fields on Fiori application. Also, root~child composition is achieved using the relevant syntax.

We have completed the data modeling part of our application. In next blog, we will see how to generate a service out of this data model.

Here is the link to second blog:

Part 2

2 Comments
You must be Logged on to comment or reply to a post.