As Junior Software Developers at Grupo Kyly , me and my colleagues rian.oestreich and augusto_hansen63 were assigned the job of creating a Fiori List Report on top of a standard view as part of our company's project to migrate to SAP S/4 HANA Erp.
As this is a topic that, despite being simple and well documented often leads to confusion, i'm sharing our solution here.
PS: Do not forget to activate every file after finishing it!
On Eclipse, create a new Data Definition on the desired package, selecting the "Define View" template:
The purpose of this view is to allow the selects, associations and joins in order to fetch the fields that are to be exposed in the List Report, below is an example of one such view:
The next step is to create the projection view, right-click on the view created above and select "New Data Definition", this time select the template "Define Projection View":
The main goal of a projection view is to define appearance aspects such as positioning, labels, grouping, etc. This is done using annotations preceding every field to be projected, to learn more about annotations please take a look at this. Below is an example of annotations for a field on a projection view:
That being done, it's time to create a Service Definition, that has the purpose of defining which fields/entities are to be exposed on the service we are currently working on (You can create many services on top of a same view if needed). For that, right-click on the projection view you just created and select "New Service Definition":
The Service Definition can expose specific fields of an entity or simply the entire entity (as shown in the example below:
We are almost done creating our custom CDS, the last step is to create a Service Binding, for that, right-click the Service Definition and select "New Service Binding":
Upon creation you will be requested to enter the Binding Type, select "OData V2 - UI" for List Reports (and Fiori apps in general):
After created, click "Publish", then select the published entity and click "Preview", this will open a "dummy" Fiori List Report that allows you to see the partial layout with real data (Assuming there is any data in the tables/views you are selecting from). This concludes the creation of the custom CDS.
With our custom CDS up and running we now proceed to the creation of the Fiori List Report App, for that, open SAP Business Application Studio (Alternatively you can also use Microsoft Visual Studio Code with the Fiori Extensions), start a new project from a template and select "SAP Fiori Application" -> "List Report Object Page", select "Connect to a System" for Data Source, select your system and the service you have just created:
Enter the project attributes and settings and click "Finish", with this the basic app is created, make sure all the dependencies are installed by running the "npm install" command on the terminal.
Now you can do the desired modifications and adjustments and preview the application with mock data by running the "npm run start-local" command on the terminal.
The app being good to go, we first build our application by running the "npm run build" command on terminal. Then comes the time to configure the deployment, for that run the "npm run deploy-config" command on terminal and fill the requested informations:
With the deployment configured we now proceed to actually deploy the application, for that simply run the "npm run deploy" command on terminal, once that is finished the application should appear in the selected package:
Our Fiori List Report App is up and running! 🙂
Let's take a look at the App. For that, in SAP GUI, enter transaction "sicf" and press F8 at the list on the bottom navigate to default_host -> sap -> bc -> ui5_ui5 -> sap and look for your app, then right-click on it and select "Test Service":
This should open the app in the browser.
The process of creating a CDS and exposing it via basic Fiori App is usually a relatively simple and well documented process, still the "reason to be" of some components and the sequence of steps to be followed can many times be confusing, specially for newcommers. We hope that this post helps you on your jouney.
Thanks for reading! 🙂
As this is a topic that, despite being simple and well documented often leads to confusion, i'm sharing our solution here.
Creating the custom CDS
PS: Do not forget to activate every file after finishing it!
On Eclipse, create a new Data Definition on the desired package, selecting the "Define View" template:
The purpose of this view is to allow the selects, associations and joins in order to fetch the fields that are to be exposed in the List Report, below is an example of one such view:
The next step is to create the projection view, right-click on the view created above and select "New Data Definition", this time select the template "Define Projection View":
The main goal of a projection view is to define appearance aspects such as positioning, labels, grouping, etc. This is done using annotations preceding every field to be projected, to learn more about annotations please take a look at this. Below is an example of annotations for a field on a projection view:
That being done, it's time to create a Service Definition, that has the purpose of defining which fields/entities are to be exposed on the service we are currently working on (You can create many services on top of a same view if needed). For that, right-click on the projection view you just created and select "New Service Definition":
The Service Definition can expose specific fields of an entity or simply the entire entity (as shown in the example below:
We are almost done creating our custom CDS, the last step is to create a Service Binding, for that, right-click the Service Definition and select "New Service Binding":
Upon creation you will be requested to enter the Binding Type, select "OData V2 - UI" for List Reports (and Fiori apps in general):
After created, click "Publish", then select the published entity and click "Preview", this will open a "dummy" Fiori List Report that allows you to see the partial layout with real data (Assuming there is any data in the tables/views you are selecting from). This concludes the creation of the custom CDS.
Creating the Fiori List Report
With our custom CDS up and running we now proceed to the creation of the Fiori List Report App, for that, open SAP Business Application Studio (Alternatively you can also use Microsoft Visual Studio Code with the Fiori Extensions), start a new project from a template and select "SAP Fiori Application" -> "List Report Object Page", select "Connect to a System" for Data Source, select your system and the service you have just created:
Enter the project attributes and settings and click "Finish", with this the basic app is created, make sure all the dependencies are installed by running the "npm install" command on the terminal.
Now you can do the desired modifications and adjustments and preview the application with mock data by running the "npm run start-local" command on the terminal.
The app being good to go, we first build our application by running the "npm run build" command on terminal. Then comes the time to configure the deployment, for that run the "npm run deploy-config" command on terminal and fill the requested informations:
With the deployment configured we now proceed to actually deploy the application, for that simply run the "npm run deploy" command on terminal, once that is finished the application should appear in the selected package:
Our Fiori List Report App is up and running! 🙂
Taking a look at the App
Let's take a look at the App. For that, in SAP GUI, enter transaction "sicf" and press F8 at the list on the bottom navigate to default_host -> sap -> bc -> ui5_ui5 -> sap and look for your app, then right-click on it and select "Test Service":
This should open the app in the browser.
Conclusion
The process of creating a CDS and exposing it via basic Fiori App is usually a relatively simple and well documented process, still the "reason to be" of some components and the sequence of steps to be followed can many times be confusing, specially for newcommers. We hope that this post helps you on your jouney.
Thanks for reading! 🙂
- SAP Managed Tags:
1 Comment
