Serving User Interfaces in CAP

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Identify different ways of serving UIs in CAP
  • Discover the SAP Fiori Tools

Frontend Capabilities

Support for User Interfaces

CAP supports the integration of user interfaces. All services provided by CAP can not only be consumed by other services, but also from user interfaces (UIs). While CAP is open and services can be consumed by any UI framework by sending standard AJAX requests. Have a look at the cap-samples repository for a working Vue.js example.

CAP and SAP Fiori

CAP provides out-of-the-box support for SAP Fiori elements UIs, for example, with respect to SAP Fiori annotations and advanced features such as search, value helps and SAP Fiori draft. Drafts are used to prevent data loss in case an app terminates unexpectedly or to prevent an object being edited by multiple users concurrently.

A single CAP project can contain multiple SAP Fiori apps. Despite the fact, that SAP UI5 is also possible, we will focus here on SAP Fiori elements. Special UI-specific annotations make it possible to enrich the exposed service with instructions for SAP Fiori elements. SAP Fiori elements also reads the metadata document and the entity definition to generate the UI. All SAP Fiori apps of an CAP application should go into the app folder.

For speeding up the UI development, especially for SAP Fiori Elements, the SAP Fiori tools provide advanced support for adding and designing SAP Fiori apps to existing CAP projects. They also come with plenty of productivity tools, which encompass visual tools for designing SAP Fiori pages.

SAP Fiori Tools

SAP Fiori Tools are pre-installed in the SAP Business Application Studio and can be used out-of-the-box. You can also install the extension in Visual Studio Code (VS Code), by installing the SAP Fiori Tools - Extension Pack.

Page Map Editor

The Page Map is a feature that comes with the SAP Fiori Tools and can be used as visual productivity tool to change and design the SAP Fiori User Interfaces. Behind the scenes it generates all required annotation files, which can then be checked-in into version control.

The following visualizes the capabilities of the Page Map for a SAP Fiori List Page, where the entire SAP Fiori page including the table fields and much more can be adjusted:

Over the course of the next exercises, you will get your hands on these tools.


You are now familiar with how different UIs can be served in an CAP project and you have learned about the out-of-the-box support for SAP Fiori UIs and the SAP Fiori Tools to speed up your UI development.

Log in to track your progress & complete quizzes