Developing App with SAP Fiori Elements (List Repor...

AnkurBajpai · ‎11-07-2019

Hi All,

Welcome to my new blog post on SAP Fiori Elements. In this blog post, I’ll try to discuss how to develop SAP Fiori Elements (List Report Page/Object Page) using CDS view and Annotations (ABAP Programming Model) on S/4 HANA System.

Before going with this blog posr please refer to the previous blog for the basic information about SAP Fiori Elements (List Report/Object Page)-

https://blogs.sap.com/2019/09/12/developing-app-with-sap-fiori-elements-list-report-pageobject-page-...

Let’s start how can we develop an SAP Fiori Elements application using CDS view and Annotations.

Steps to create SAP Fiori Elements (List Report/Object Page) application-

1. Create CDS view-

Pre-requisite- We need ADT (ABAP Development Toolkit) in latest version of Eclipse. It is the recommended integrated development environment (IDE) for developing ABAP applications for SAP HANA. The ABAP Development Tools provide a set of powerful tools for developing ABAP applications.

Install latest Eclipse version- http://www.eclipse.org/downloads/eclipse-packages/

Install ABAP Development Tools for SAP NetWeaver plugin for the Eclipse- https://tools.hana.ondemand.com/neon/

1.1 Create an ABAP Project, using CTRL+ ALT+ SHIFT+ P in ABAP perspective-

In the New ABAP Project dialog, select your SAP system from the list. Here my SAP system is S44.

Click on “Next”.

Click on “Next”.

Enter your credentials and Click on “Finish”.

Default Project is created with your user id.

1.2 Create a CDS view-

Here we are going to create a CDS in the Local Object.

To create CDS view, Right click on the newly created package($TMP) -> New -> Other ABAP Repository Object.

Search for Data Definition -> Click on “Next”

Enter “Name” and “Description” of CDS view -> Click on “Next”.

We are doing only for Local Development. So, we are not going to assign our Object to any transport request -> Click on “Next”.

After clicking on next, the step "Validating package" might take a little while to complete.

Click on “Define View” -> Click on “Finish”.

Our default CDS view is created with template.

Let’s change “sql_view_name” name and define a specific name(ZX_VW_SOITEMS_84) for your development.

In our CDS view we are going to consume data from “vbap” table. Now our CDS view consumption is based on “vbap” table data.

Press “CTRL + SPACEBAR” -> Here you get “Insert all elements- template” and fields, depends on your app requirement select field to show on app. Here I took these following fields.

We can remove “mandt” field as we are using all clients. Now our CDS view look like this-

Press “CTRL + S” to save the changes and “CTRL + F3” to activate CDS view.

Now let’s create another similar CDS view for “Sales Orders” -> Right click on the “Local Object ($TMP)” -> Other ABAP Repository Object -> Search for “Data Definition” -> Click on “Next”

Enter CDS view “Name” and “Description” -> Click on “Finish”.

Our default CDS view is created.

Let’s change “sql_view_name” name.

Here our CDS view consumption is based on “vbak” table.

Press “CTRL + SPACEBAR” to add required field column for the app. Here I took these fields as per my requirements.

Press “CTRL + S” to save the changes and “CTRL + F3” to activate the CDS view.

Now we have CDS view for Header Item data and Line Item data, let’s connect our Header Item data with the Line Item data.

The new join (association) has been created called _SOITEMS. This allow us to use the data in the Sales Order view to read related data from the Header Item table vbak and our existing sales order item CDS view ZXC_SOITEMS_84 respectively.

Press “CTRL + S” to save the changes and “CTRL + F3” to activate the CDS view.

Right click on “CDS” view (ZXC_SO_84) -> Open With -> Data Preview.

Now we can see data like this. We have created our two CDS view successfully.

2. Create OData service-

Now we are going to expose our CDS view as OData service.

Add the following annotation to the ZXC_SO_84 CDS view just before the view definition- @OData.publish : true

Press “CTRL + S” to save the changes and “CTRL + F3” to activate the CDS view.

Now register our OData service in the SAP system. Open SAP system -> Go to t-code “/N/IWFND/MAINT_SERVICE” -> Add service -> Search services.

Enter “System Alias” – “Local” -> Press “Add Selected Service” -> Specify Package name (Here we are doing for the Local development) use $TMP -> Click on .

Check the newly registered service.

Select the service -> Click on SAP Gateway Client -> Execute.

3. Create Destination in SAP Cloud Platform and in SAP Hana Cloud Connector to access On-premise data-

Login to your SAP Cloud connector.

Click on “Cloud to On-Premise” in SAP Cloud Connector and make an entry for your SAP system as I created.

Login to your SAP Cloud Platform (Neo Trial account) -> Destinations -> Click on “New Destination” -> Make a new entry and Check the connection.

Connection should be reachable.

4. Create a List Report template

Click on “Service tab” and enable SAP WEB IDE Full Stack service if not enabled.

Open SAP WEB IDE Full Stack.

Click on “File” -> New -> Project from template -> “List Report Application” template -> Next.

Enter Project Name, Title and Namespace -> Click on “Next”

Choose your system in “Service Catalog” and search for the OData service (ZXC_SO_84).

Click on “Next”.

Here we can see our annotation file.

Click on “Next”.

Select OData Collection and OData Navigation -> Click on “Next”.

Click on “Finish”.

Now we can see our newly created project.

Now we are going to test the application. Click on “Run” button.

Select “flpSandBox.html” -> Click on “OK”.

Click on tile “fiorielement_so”.

This is how our app look like with default properties.

Click on to apply column fields to check the application.

Here I selected all 8 itmes -> Click on "OK“.

Click on "Go“.

This is how our app look like.

5. Add Annotations for List Report/Object Page

Now we are going to add UI annotation for these column fields and for the header info.

@UI.headerInfo is the annotation to add Header Info in List Report Page.

@UI.lineItem is annotation to add columns.

Press “CTRL+ S“ to save the changes and “CTRL +F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Now we can see column fields by default -> Click on “Go” button.

Here we can also see the Header is added and showing the total Sales Orders.

Now we are going to add annotations for the Selection field. @UI.selectionField is the annotation to add Selection Field on List Report Page.

Here I added following Selection Fields.

Press "CTRL+ S“ to save the changes and “CTRL + F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Here we can see added Selection Fields.

Now we are going to the Object page by click on row items.

Here we can see by default features added in Object Page.

Now we are going to add the Identification Fields, Identification fields are used to identify a record in the collection and the identification fields will show on the Object Page in General Information.

@UI.identification is the annotation to add Identification Fields.

Here I added Identification annotation for 2 fields.

Press "CTRL+ S“ to save the changes and “CTRL + F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Here we can see the Identification Fields in General Information in Object Page.

Now in the Object we are going to show line item data (Sales Order Items). First, we change “Second Facet” as “Sales Order Items”.

Go the SAP Web IDE Full Stack -> Expand the project -> Expand i18n folder -> Double click on i18n.properties file.

Remove Second Facet to Sales Order Items.

Press “CTRL + S” to save the changes.

Go to the browser screen and refresh the page again.

Here we can see the changes.

We can also change “General Information” as per our requirement in SAP Web IDE Full Stack.

Let’s add Data Point annotation. Data Points are used to show numeric data below the header in the Object page.

@UI.dataPoint is the annotation I used.

Here I took following 3 Data Points.

Press "CTRL+ S“ to save the changes and “CTRL + F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Here we can see our Object Page look like this.

Now we are going to add annotation for Object Page to show columns(lineItem) in Sales Order Items.

Open the CDS view “ZXC_SOITEMS_84“ and add the following @UI.lineItem

Press "CTRL+ S“ to save the changes and “CTRL + F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Here we can see our Object Page look like this.

Let us now create some buttons for adding, editing and deleting – note that we are only adding the buttons and not the code. The only change here is the addition of the @ObjectModel annotation to the beginning of the ZXC_SO_84 CDS view.

Press "CTRL+ S“ to save the changes and “CTRL + F3” to activate the CDS view.

Go the Browser screen and refresh the page.

Here we can see Delete and Create button in List Report page.

In the Object Page we can see Edit and Delete button also.

Our List Report support Select Single Record at a time, let’s add functionality to select multiple select at a time.

Go to SAP Web IDE Full Stack -> Expand project ->Double click on “manifest.json“ file and add "multiSelect": true in List Report area.

Save the changes by pressing “CTRL +S” and refresh the app screen.

Now we can select multiple record at a time.

Congratulations our basic SAP Fiori Elements (List Report/Object Page) app is ready to deliver!!!

Conclusion-

Thanks for reading.

I hope this blog help you to develop a basic SAP Fiori Elements (List Report/ Object Page) using CDS view and Annotations (ABAP Programming Model) on SAP S/4 Hana.

For more information on SAP Fiori Elements- https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd

Getting Started with SAP Fiori Elements-

https://www.youtube.com/watch?v=tzOybCR4dw8&list=PLo17W6sWsxWP4RMYXd7l824ss5KriAbwm

SAP Fiori Elements Guidelines-

https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/

SAP Community: Fiori Elements-

https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements

Thanks,

Ankur Bajpai