Create an SAP Fiori Elements UI for CAP Node.js applications in SAP Business Application Studio
With the release of SAP Fiori elements support for OData V4, it is now possible to create an SAP Fiori elements UI (List Report Object Page) application for a CAP Node.js service in an intuitive, simple, and quick manner.
Let’s see how!
Our starting point is a CAP application opened in a dev space suitable for developing cloud business applications.
The data source of the UI application we’d like to create is a CAP service. Therefore, you can only create the UI once you have defined a service that exposes at least one entity.
See the following tutorial to learn how to create a dev space and develop CAP services.
Now, we can continue with creating the UI:
- Open the project explorer.
The project explorer, which is available only in SAP Business Application Studio, presents the logical components of the CAP application.
Right- click on the service that will provide the data for the UI, and choose Create UI. (By the way, if you’re more comfortable using the command palette instead of the project explorer, the “Create UI” command is also available from there.)
- Select SAP Fiori elements application
- In the next step, we can see that the data source, project path and service are already prefilled with the correct values, so we can just click Next.
The following steps allow to configure the application
- We need to choose the main entity and (if available) the navigation entity of the application.
- We can specify a module name, application title, namespace, and description for the application, or use the provided default values.
- In the Configure advanced options section, we can change the default UI5 version and UI5 theme, and also choose whether to skip the generation of the ‘annotation.cds’ file.
After we click Finish, the application is generated under the ‘app’ folder.
To complete the application definition, configure the OData annotations for the application. You can read about how to do it efficiently in this blog
Happy Coding 🙂
Thanks for sharing, it helps.
Thank you Liath!
This blog is very useful.
I have one question here.
The xs-app.json file and approuter files aren't being created here.
I tried deploying the CAP project as a whole in my CF environment. The db and srv modules are getting deployed. But I am not able deploy he UI module.
So, any idea on how to deploy the UI too in my CF?
Thanks in advance!
You are correct. At the moment you will need to handle this manually. In the future we plan to provide this as part of the creation/deployment flow.
There is a new blog that details the changes required in order to deploy to CF.