Serving User Interfaces in CAP

Objectives

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 cannot only be consumed by other services, but also from user interfaces (UIs). 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 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 read the metadata document and the entity definition to generate the UI. All SAP Fiori apps of a 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 preinstalled 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 a visual productivity tool to change and design the SAP Fiori User Interfaces. Behind the scenes, it generates all the required annotation files, which can then be checked-in into version control.

The following visualizes the capabilities of the Page Map for an SAP Fiori List Page, where the entire SAP Fiori page, including the table fields and more, can be adjusted. In the image, you see, for example, that the Header can be set dynamically to the respective title value.

Screenshot of the Page Map Editor for SAP Fiori List Pages.

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

Summary

You are now familiar with how different UIs can be served in a 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.