Developing Fiori Element Application (List Report and Object Page) consuming the OData service created using SAP Cloud Application Programming model

[former_member187069]

Hello,

As we all know, SAP Cloud Application Programming Model is a framework of tools, languages and libraries that help us to build enterprise services and applications rapidly. There is no need for a UI developer to anymore depend on a gateway consultant or a service developer to build the services for him/her to consume in a UI application.

We can find wonderful series of blogs by Dhanasupriya Sidagam which gives a very good overview of SAP CAPM and how to create a dev space and a project in SAP Business Application Studio. It also explains how to create OData services with very very minimal effort using CAPM. Also, it shows how to add annotations for UI which would help in creating a skeleton for Fiori Element application.

There is also an Open SAP Course which you can refer to - https://open.sap.com/courses/cp7

In this blog, we will try to consume the created OData services using CAPM in SAP Business Application Studio in a Fiori Element application in Web IDE.

One challenge here is the OData services generated using CAPM is of Version 4. Fiori elements in Web IDE support OData V2 template. And hence we need to install OData V2 adapter proxy which would generate the OData V2 services along with V4. Below are the pre-requisites:

Pre-requisites:

1. Create a OData service in SAP Business Application Studio using SAP Cloud Application Programming model ( pls. refer https://blogs.sap.com/2020/05/03/sap-cloud-application-programming-model-demo2/ link to create the OData service and sample annotations)


2. Install OData V2 adapter proxy in SAP Business Application Studio
   
   
   
   1. Go to SAP Business Application Studio and go to your cds project. In the terminal run the command: npm install @Sap/cds-odata-v2-adapter-proxy –s
   
   
   2. After the process finishes, you will see a new entry in the dependencies section inside the package.json file.
   
   
   3. Create new file jsin the service folder srv of your project: ./srv/server.j
   
   
   4. Add the following code :
      

      "use strict";
      
      
      
      const cds = require("@sap/cds");
      
      const proxy = require("@sap/cds-odata-v2-adapter-proxy");
      
      
      
      cds.on("bootstrap", app => app.use(proxy()));
      
      
      
      module.exports = cds.server;
      
      

      
      
   
   
   5. Execute cds watch command and we can see the below info :
      

      [HPM] Proxy rewrite rule created: "^/v2" ~> ""

      
      
   
   
   6. We can now access the V2 version by appending V2 before the service name. For eg : https://xxxxtrial-workspaces-ws-b5ffs-app1.eu10.trial.applicationstudio.cloud.sap/v2/catalog
   
   
   7. We can see the difference below between OData V4 and V2
   
   
   
   


3. Deploy the application to Cloud Foundry and make a note of the srv application url. You can make use of cf apps command to make a note of the url.


4. Create Destination in Cloud Cockpit. Enter the url noted in step 3 in the URL field

Now that, we are done with the pre-requisites, lets go to Web IDE and create a Fiori element application.

Steps to create Fiori Element Application:

1. Go to Web IDE and choose File->New->Project from Template


2. Choose List Report Application template


3. Enter the Project name, Title, namespace and description


4. Choose the Data Connection and Click Test; you will see the list of entity collections (Eg: Employees).


5. The services created using CAPM already has annotations created and hence we see the annotation file listed here


6. Choose the annotation file and click Next for the template customization


7. Choose the desired OData Collection for the data binding and click Next


8. Click Finish to confirm the new project creation


9. Now, we can run the application successfully and see the List Report and the Object page


10. To overwrite the existing annotations, we can create local annotations by choosing webapp->New->AnnotationFile


11. Choose a file name and OData service


12. We can see an entry in the manifest.json now.


13. Open the file in annotation modeller and we can see the External Annotations(these are the ones created in cds view in SAP Business Application Studio).


14. We can also create Local annotations to overwrite them


15. We can run the app now and see that the local annotation overrides the external one and we see only the Firstname and Lastname in the List report

 

We can develop other Fiori Elements applications like Overview Page or Worklist  in a similar manner.

 

Thanks

Vishnupriya