Skip to Content
Technical Articles
Author's profile photo Liat Borenshtein

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

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 🙂

Assigned tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Somnath Paul
      Somnath Paul

      Thanks for sharing, it helps.

      Author's profile photo Liat Borenshtein
      Liat Borenshtein
      Blog Post Author

      Thanks 🙂

      Author's profile photo Aleksandar Mijailovic
      Aleksandar Mijailovic

      Thank you Liath!

      BR, Aleks

      Author's profile photo Vishali V
      Vishali V

      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!

      Regards,
      Vishali

      Author's profile photo Liat Borenshtein
      Liat Borenshtein
      Blog Post Author

      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.

      Thanks,

      Liat