Serving User Interfaces in CAP

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 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.

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.