Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
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

The last step is, of course, to run and test the application. The UI application runs as part of the CAP application; therefore, we can create a CAP run configuration to run the service and the UI together. To learn more about the Run Configuration tool, see my previous blog.

Once the application is running, click the link in the main html page and view the UI application.

I hope this blog was helpful and that you enjoyed reading it!

Happy Coding 🙂
Active Participant
0 Kudos
Thanks for sharing, it helps.
0 Kudos
Thanks 🙂
0 Kudos
Thank you Liath!

BR, Aleks
0 Kudos
Hi Liat!

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!

0 Kudos
Hi Vishali,

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.


0 Kudos
There is a new blog that details the changes required in order to deploy to CF.