Skip to Content
Technical Articles
Author's profile photo Ankur Bajpai

Developing App with SAP Fiori Elements (List Report Page/Object Page) using CDS view and Annotations (ABAP Programming Model) on SAP S/4 Hana.

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-using-northwind-odata-service-and-how-to-create-an-extension-of-sap-fiori-elements/

 

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.

 

 

 

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.

 

 

  • Getting Started with SAP Fiori Elements

 

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

 

Assigned Tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manish Kumar
      Manish Kumar

      Very informative Blogs.

       

      Thanks for sharing

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you Manish Kumar !!!

      Author's profile photo Sinoxolo Dayile
      Sinoxolo Dayile

      Great Blog Ankur!

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you Sinoxolo Dayile !!!

      Author's profile photo Pavan Golesar
      Pavan Golesar

      Great! Thanks for this simplification! 🙂

      Br,

      Pavan Golesar

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thank you Pavan Golesar !!!

      Author's profile photo Ramzi Abdallah
      Ramzi Abdallah

      Hi Ankur Bajpai ,

       

      I'd like to thank you for this helpfull blog.

       

      I have one problem, I followed all the steps you mentionned above but when I select the odata service I don't find the annotation file 🙁

       

      Is there a hint to get the annotation file ?

       

      Thanks for you help in advance,

      Ramzi

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Ramzi,

      Annotation file should be visible there. If you're not getting please check once more with same procedure.

      I tried again and I am getting same annotation file.

      Or you can check one more thing:

      Go to SAP Web IDE Full Stack -> Click on "Preferences" -> Click on "Extensions" -> Check "Annotation Modeler" is ON -> If OFF, please switch the mode to ON -> Click on "Save".

       

       

      Thanks,

      Ankur Bajpai

      Author's profile photo Ramzi Abdallah
      Ramzi Abdallah

      Hi Ankur Bajpai ,

      Please take a look on what I did and tell me if I made a mistake.

       

      • First CDS :

       

      • Second CDS with association

       

      • Odata Service

       

      • Data connection in web IDE

       

      But unfortunately, I didn’t find the annotation file :/

       

       

      PS: I check the annotation modeler is ON.

       

      Also I want to clarify that I have 2 systems: a backend system BW4/HANA  where I create the CDS views and a gateway system which has a destination in HCP.

       

      Thanks for your help in advance,

      Ramzi

      Author's profile photo Sunder Shyam
      Sunder Shyam

      Hi Ramzi,

       

      I have the same issue.

      Do you have any resolution ? Please let me know.

      Best Regards,

      Shyam.

      Author's profile photo Abhishek Nayak
      Abhishek Nayak

      Nice Blog Ankur, I have one query, Does this list application support CDS with parameters.

      My requirement is to execute the CDS again to fetch result again. Not just to Filter the already selected records.

      So @UI.selection annotation won't solve the purpose.

      Same requirement, I have in the ALP report also. There are some blogs mentioning Developers extension for list, ALP & OVP applications, but they seem to be OData project-based applications, not the applications which are directly created using CDS annotations.

       

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Abhishek Nayak,

      If we talk about List Report template floorplan, CDS with parameter is not supported till now.

      Yes, for your requirement we should create a extension of the application. We have only that option as I know.

       

      Author's profile photo Sunder Shyam
      Sunder Shyam

      Hi Ankur,

      This is very informative, Thank you !

      I have a few questions, please help me out with these.

      I have two different system, one backend ECC and a GW. So I created a CDS and the mapped it to a SEGW project in ECC and then got it registered in my GW. But I see the following issues -

      • I cannot see my OData Navigation while creating the project in webide. I am able to select my collection but cannot see anything in the Navigation. Should I be doing anything more while creating the SEGW project ?
      • Cannot find the annotation file while I create the project in webide. Though I have switched on the annotation modeler.

      Best Regards,

      Shyam.

      Author's profile photo J. de Voijs
      J. de Voijs

      Hi,

      Great blog and we implemented the abap cds views in a list report element with the multiSelect option. Now we like to get the data of the selected items when we click on a added custom action (extended the app and add an action button), but I don't know how to do this and if this should be controlled from the front-end. Maybe the action button and the controles should be created in the CDS view as well?

       

      Hope that someone can advise me on this.

      Thanks in advance,

      Vo

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi,

      May be this blog would be helpful for you to create an extension of app-https://blogs.sap.com/2019/09/12/developing-app-with-sap-fiori-elements-list-report-pageobject-page-using-northwind-odata-service-and-how-to-create-an-extension-of-sap-fiori-elements/

       

      Thanks.

      Author's profile photo Hans Raj
      Hans Raj

      Very Nice Blog Ankur.

      Explained each and every Step in very simple way.

      Thanks for sharing.

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Hans Raj !!!

      Author's profile photo Jaime Rodriguez Capote
      Jaime Rodriguez Capote

      Great blog Ankur,

      I have a doubt about this, is possible to retrieve results when you access to application? Without press "Go" at initial load

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Jaime Rodríguez Capot,

      Thanks. No, it is not possible to run without press "Go" at initial.

      Author's profile photo ragavie dakishna
      ragavie dakishna

      Very Nice Blog Ankur

       

      Thanks for Sharing

       

      Regards,

      Ragavie

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks for the feedback ragavie dakishna.

       

       

       

      Author's profile photo santosh nayak
      santosh nayak

      Wonderfully explained blog! Many thanks to you! Will surely look forward for more blogs and also will look forward for transactional apps with functional buttons for "create", "delete" and "update". Thanks again

      Author's profile photo Santosh Nayak
      Santosh Nayak

      Hello Ankur,

      Is there a way that can we make the F4 button work for the Selection Fields i.e. I would like to see a selection screen with some unique value list ? Appreciate your help. Thanks in advance.

       

      Regards,

      Santosh

      Author's profile photo Kenneth Goldsetin
      Kenneth Goldsetin

      Really, really helpful.  Thank you, Ken

      Author's profile photo Sean Jorden
      Sean Jorden

      I wish I had found this blog before I stumbled through Elements development on my own - very detailed.

       

      I have a question regarding lazy loading of items in an Object Page.

       

      I have built a PO report which the object page shows the PO history. Of course, that can run into the hundreds of lines in some cases - which lazy loading 10 at at time is not practical.

      I have read about developing Tabs in an Object Page which can feature a Grid layout - have you ever attempted this? Having trouble finding examples.

      thanks

      Sean