Adding an SAP Fiori elements UI

The fleet desk needs a list of inquiries with filters, an object page per inquiry with its notes, and the related sales order status. SAP Fiori elements generates such UIs from OData metadata and annotations, so most screens need no UI code. CAP has built-in support for Fiori elements, including Fiori annotations and drafts; CAP itself has no UI technology of its own, so other frameworks can be used where Fiori elements does not fit.

Where the app lives

Each Fiori app is a subfolder of app/, for example app/inquiries, with its own manifest. Developers usually create it with the SAP Fiori tools application generator in SAP Business Application Studio or Visual Studio Code, choosing a floorplan (list report and object page for the fleet desk) and the local CAP service. Annotations belong in .cds files in the app folders, such as app/inquiries/annotations.cds, not in the service definition. CAP's documentation describes this as separation of concerns: the service stays UI-neutral, and each app annotates what it needs.

Annotations drive the screens

A minimal list report annotation:
annotate FleetService.Inquiries with @(UI: {
SelectionFields: [ status, priority, customer ],
LineItem: [ {Value: salesOrder}, {Value: customer}, {Value: topic_code}, {Value: priority}, {Value: status} ]
});
SelectionFields become the filter bar; LineItem becomes the table columns. On the object page, UI.HeaderInfo sets the title, and UI.Facets with UI.FieldGroup annotations arrange sections, including a table of notes through the composition. Labels should come from i18n text files so they can be translated.

Drafts and value helps

Annotating the entity with @odata.draft.enabled turns on draft handling: CAP generates draft tables and the choreography for edit, save and discard, so a user can work on an inquiry and its notes over several steps without saving half-finished data. For value helps, @cds.odata.valuelist on the Topics entity gives every managed association to Topics a value list automatically; code lists from @sap/cds/common already carry it.

During development, the CAP index page at http://localhost:4004 lists services, and for OData V4 entities offers a Fiori preview link: a generic list page for checking annotations without a full app. It is disabled in production by default. Apps in app/ also appear as links on the index page. For Contoso, the finished app is deployed with the MTA and added to SAP Build Work Zone, where the fleet desk opens it from a tile.

Because the UI is generated from annotations, many UI defects are really annotation defects: a missing value help, a label that shows a technical name, a field that should be read-only but is editable. Reviewing the annotation files is therefore part of reviewing the UI, and annotation changes deserve the same regression checks as code. When SAP updates the SAP Fiori elements libraries used by the app, rerun the UI checks even if no annotation changed, since generated screens can shift with the library version.