Create Fiori List Report with object page using CAPM(node.js) Service

[Md_sanaullah]

In this blog, I will explain how to consume existing CAPM(Cloud Application Programming Model) Service to Create Fiori List Report with object page.

To create Fiori List Report based on Node.JS service or CAPM based service below prerequisites need to be followed.

1. SAP BTP Cockpit Setup. For learning purpose use  SAP BTP COKCPIT


2. Dev Space for Cloud application Development.


3.  Existing CAPM service in workspace.

Lets begin our journey to create Fiori List Report based on Node.js service.

PART1

Below is my Dev Space for cloud Application Development.

Dev Space for Cloud Application Development

 

Click on your Dev Space to navigate to workspace . I have Created CAPM Service to get the purchase order details. Below is my Project.

We can see app folder is currently empty as we have not used this service to consume in other application. Lets run this project to get the feel of layout of CAPM Application.

To Run the application. Go to terminal-->Click on new terminal-->Type command  cds watch as below.

Once cds server get executed successfully we will get prompt to preview the application in local host as below.

We can have a look on Metadata of CAPM Service, Database entity and Fiori preview. Click on Fiori Preview to get the layout of CAPM Application binded with Purchase order using data model.

This is Fiori layout for CAPM Application.

To create CAPM Application from the scratch please refer below blogs.

https://blogs.sap.com/2022/03/25/sap-capm-full-stack-ui5-application-with-crud-operations/

PART2 : Create Fiori List Report with object page using CAPM Service.

To Create Fiori List Report go to File--->Create new project from template

Select Tile SAP Fiori Application and click on Start.

Select Fiori Template and List Report page as below

Click on Next button. It will redirect to next page. In Next page we need to select Data Source and Service. As I explained PODetails project is already Created as part of CAPM Application .Select parameter as below.

Note : CatalogService is already Created  as service name in srv folder of CAPM Project. we need to use existing service in Fiori List report page.

Click on Next button to select the entity of CAPM project.

Click on Next button to provide the project attributes as below.

Click on Finish button to generate the template.

Open CAPM Project PODetails . We can see Fiori app Purchaseorders is created in app folder of CAPM Project.

To preview the Purchase order App we need to  select subfolder purchaseorders and do right click to get Preview Application. Select watch purchase order from below highlighted menu.

It will preview the app as below.If columns are not visible then dont worry use the setting icon to select the cloumns.

Click on any row to get the object page.

We are now able to view the Fiori App :).

I will share some interesting blogs for SAP BTP shortly.

Learn to walk before you run