Create an SAP Fiori Elements UI for CAP Node.js applications in SAP Business Application Studio

[liat_b]

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 🙂