The following texts were partially or completely generated with the help of generative AI models.
SAP Fiori Elements is a framework that lets you develop standardized applications with little frontend code. Instead of programming user interfaces manually, you describe the desired behavior and appearance of the application largely declaratively via metadata. There are predefined page or application layouts, also known as Fiori floorplans. The most relevant ones are List Report and Object Page.
Core Data Services (CDS) UI annotations play a particularly important role. They enrich CDS views with semantic information that describes the data structure and its business meaning and presentation in the frontend.
The following properties can be used for various UI annotations. For example, with @UI.lineItem, @UI.fieldGroup, @UI.identification.
hidden - The field is not displayed and cannot be added even through personalizationposition - Determines the order of the fieldslabel - Label of the fieldimportance - Controls the relevance of a field (prominent or reduced display)Embedding RAP actions works equally well with these annotations.
@UI.lineItem: [ { type: #FOR_ACTION, dataAction: 'setDone', label: 'Done' } ]
Status;
The label property changes the displayed text at only one location (e.g. a table column) (cf. general properties). With the @EndUserText annotation, the text of a field is adjusted at all levels.
@EndUserText.label: 'Benutzer-ID'
UserId : abap.numc(10);
The texts that appear in a CDS annotation can also be translated via transaction SE63 or the Fiori app Text Repository - Translate.
The header shows the most important information of an object: title, subtitle, key facts, and KPIs. It is displayed both in the List Report (title row) and on the Object Page.
The annotation is placed at view level, i.e. before the actual definition of the CDS view. These annotations refer to the entire view and are not propagated upward.
@UI.headerInfo: { typeName: 'My Task',
typeNamePlural: 'My Tasks',
typeImageUrl: 'sap-icon://activity-items',
title: { type: #STANDARD, value: 'TaskKey' },
description.value: 'Summary' }
A value help is implicitly included in the service by RAP and enables the selection of values. A different CDS view is specified as entity.name and the field to be taken over as entity.element. With Additional Binding, additional bindings for filtering can be defined.
@Consumption.valueHelpDefinition: [ { entity: { name: 'ZI_USERVH',
element: 'UserID' } } ]
Assignee;
In order to embed foreign key texts, the respective underlying CDS views must be available (here: ZI_StatusVH). These can then be embedded.
association [0..1] to ZI_StatusVH as _StatusVH
on _StatusVH.Status = $projection.Status {
…
@ObjectModel.foreignKey.association: '_StatusVH'
@Consumption.valueHelpDefinition: [ {
entity: { name: 'ZI_StatusVH',
element: 'Status' } } ]
Status,
_StatusVH
}
This allows several dependent fields to be read and filled via one value help. For example, if the German federal state Baden-Württemberg is selected in the region field, the country is automatically entered in the corresponding field as well.
@Consumption.valueHelpDefinition: [ {
entity: { name: 'I_Country', element: 'Country' } } ]
Country;
@Consumption.valueHelpDefinition: [ {
entity: { name: 'I_Region', element: 'Region' },
additionalBinding: [ { element: 'Country',
localElement: 'Country' } ] } ]
Region;
Several value helps can exist and be displayed for the same field, so that for the User field, for example, you can choose between a value help by name or by email. To do this, a corresponding collective value help that bundles other CDS views must be defined in a separate CDS view.
define abstract entity ZD_StatusCollectiveVH {
@Consumption.valueHelpDefinition:[
{ entity: { name:'ZC_UserVHByNames',
element: 'UserId' },
label: 'First- and Lastname' },
{ entity: { name:'ZC_UserVHByEmail',
element:'UserId' },
label: 'E-Mail',
qualifier: 'ContactSearch' }]
UserId: zbc_user_id;
}
This CDS view is then embedded for the field like a normal value help.
The SAP Fiori List Report serves the clear presentation and efficient processing of large volumes of data. Users can conveniently filter, search, sort, and navigate directly into the relevant detail views. Through standardized functions and a consistent UX design, the floorplan supports fast and intuitive processing of business processes.
For a fault-tolerant search across multiple fields, the @Search annotation can be used. Fuzzy search must be activated at view level (before DEFINE VIEW ENTITY).
@Search.searchable: true
Then, with the respective separate definition for each searchable field, the fuzzy search is defined. The fuzzinessThreshold determines the sensitivity of the search for the field (from 0.0 as extremely fuzzy up to 1.0 as extremely precise). SAP recommends 0.7 as a starting value.
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold: 0.7
Assignee;
The filter fields of a List Report can be configured by the user via the Adapt Filters button. The @UI.selectionField annotation controls which filters are already visible when the page loads.
@UI.selectionField: [ { position: 20 } ]
Status;
Columns are defined via @UI.lineItem. You can control, for example, order, label, visibility, and formatting.
@UI.lineItem: [ { position: 30, label: 'Task Status' } ]
Status;
With Criticality, rows or fields can be highlighted in color depending on a status value. This makes it easier, for example, to quickly identify critical, successful, or neutral entries in the List Report.
@UI.lineItem: [ { criticality: 'Priority' } ]
annotate view ZC_TASK with { … }
The assigned field (here: Priority) must be an integer value of 1, 2, or 3.
Using the criticality property, fields can be visually highlighted. A value – e.g. priority or status – is evaluated and automatically displayed as a colored status indicator or status icon.
@UI.lineItem: [ { position: 20, criticality: 'Priority' } ]
Status;
The assigned field (here: Priority) must be an integer value of 1, 2, or 3.
Icons can be used to visually highlight status information or states of a business object. The display is done via a field that contains the respective path of an SAP icon. In the CDS view, this value can be determined dynamically depending on the status of a record, for example.
case status
when 'NEW' then 'sap-icon://add-document'
when 'CANCELED' then 'sap-icon://cancel'
when 'FIXED' then 'sap-icon://accept'
else 'sap-icon://question-mark'
end as StatusIcon,
So that the field is correctly interpreted as an icon, the @Semantics.imageUrl annotation must be set. Then the field can be embedded into the List Report with @UI.lineItem and displayed as an icon column.
@Semantics.imageUrl: true
@UI.lineItem: [{ cssDefault.width: '5em', position: 5, label: 'Icon' }]
StatusIcon,
The semantic key is displayed in bold and controls navigation. The annotation is placed at view level, i.e. before the actual definition of the CDS view; it cannot be used in a Metadata Extension.
@ObjectModel.semanticKey: [ 'TaskKey' ]
Using the importance property, you can define which information is preferentially displayed or hidden when space is limited (i.e. different screen sizes).
@UI.lineItem: [ { position: 30, importance: #HIGH } ]
Status;
@UI.lineItem: [ { position: 90, importance: #MEDIUM, label: 'Due Date' } ]
DueDate;
With @EndUserText.quickInfo, a field can obtain additional information that is displayed as a tooltip. This provides supplementary hints for a field without requiring additional UI elements.
@EndUserText.quickInfo: 'Type of Task'
Type;
An instance of an object is displayed on the Object Page. The header area is designed by the header annotations and contains central information such as title, status, and important key fields for quick orientation.
The object data are displayed in so-called facets, which structure the content into thematically related sections and bundle different display elements such as forms, tables, or KPI information.
In anticipation of longer texts, it serves better readability to display them across multiple lines.
@UI.multiLineText: true
Summary;
To hide fields, the @UI.hidden annotation is used. The respective field is then visible neither on the List Report nor on the Object Page. Displaying the field as a filter is then no longer possible either.
@UI.hidden: true
DummyPriority;
To selectively exclude individual fields from certain Fiori Elements, exclude can be used. This can be applied in various UI annotations, such as @UI.fieldGroup or @UI.lineItem.
@UI.identification: [ { position: 60, exclude: true } ]
DummyPriority;
To show or hide content dynamically, the hidden property helps. It is then based on the boolean value (true/false or 'X'/'') of a field (here: Hide) and can be embedded in various annotations, such as facets or field groups.
@UI.fieldGroup: [ { qualifier: 'Kpi', position: 30, hidden: #(Hide) } ]
Voting;
Furthermore, the dynamic visibility of fields can also be controlled via Feature Control.
The @Semantics annotation in CDS views serves to assign a business meaning to fields that goes beyond the mere data type. It describes, for example, whether a field represents a currency, a quantity, an amount, an email address, or a percentage. This semantic information is used by Fiori Elements to format, validate, and display data correctly and context-dependently.
@Semantics.eMail.address: true
Email,
@Semantics.address.country: true
Country,
@Semantics.address.region: true
Region,
The @Semantics annotation cannot be used in Metadata Extensions.
Data points define business key figures or status information and control their display and highlighting. For example, numeric values can be displayed as a rating, i.e. in the form of a star rating.
@UI.dataPoint: { qualifier: 'Voting',
targetValue: 5,
visualization: #RATING,
title: 'Voting' }
Voting;
Individual types of charts that require only one key figure or status value can also be displayed. This includes, for example, a progress chart. To graphically visualize several data values, however, charts are needed.
With the help of charts, predefined types of diagrams can be displayed, such as radial chart, bullet chart, etc.
@UI.chart: [ { qualifier: 'radialChart',
title: 'Radial Chart',
chartType: #DONUT,
measures: ['Criticality'],
measureAttributes: [ { measure: 'Priority',
role: #AXIS_1,
asDataPoint: true } ] } ]
For comparison: data points present individual key figures or status values compactly, while charts graphically visualize several data values to make relationships, developments, or comparisons visible.
On the Object Page, cards with brief information (e.g. about contacts) that open when clicked can also be displayed. For this, certain fields as well as corresponding annotations are required in the CDS view from which the information originally comes.
In this example, the FullName field must subsequently be set as read-only within the behavior definition.
@Semantics.name.fullName: true
concat_with_space(firstname, lastname, 1) as FullName,
@Semantics.eMail.address: true
@Semantics.eMail.type: [ #WORK ]
email as Email,
Afterward, the card can be defined by a field group. Note that the value of value represents the association to the CDS view mentioned above.
@UI.fieldGroup: [ { qualifier: 'FgHeader',
type: #AS_CONTACT,
label: 'Assignee Contact Card',
position: 70,
value: '_Assignee' } ]
Assignee;
Facets structure content within an Object Page and organize information into logically related areas. They define, for example, sections, forms, tables, or references to other UI elements and thereby improve the clarity and navigation within the application.
In Fiori Elements, they are configured via CDS annotations and largely control the structure of the user interface.
The areas that are to be displayed on the Object Page must be defined with the @UI.facet annotation.
Although the definition refers to all columns, they are not defined in the view annotations but at field level, yet before the actual first field. The reason for this is that otherwise they are not propagated.
The identification area in an Object Page directly displays the central core data of a business object and serves for quick orientation. It typically contains important master information, status values, and key attributes. Fields in this area should uniquely identify the object together with the information from the header.
@UI.facet: [ { id: 'idIdentification',
type: #IDENTIFICATION_REFERENCE,
label: 'My Task',
position: 10 } ]
Fields that are to be displayed in this section require the @UI.identification annotation.
@UI.identification: [ { position: 20,
label: 'Task Status' } ]
Status;
Field groups serve to logically bundle semantically related fields and display them together in the user interface. Using #FIELDGROUP_REFERENCE, these groups can be reused as sections in Fiori Elements and referenced flexibly. This makes the structuring of forms and detail views clearer and more consistent.
@UI.facet: [ { purpose: #FILTER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'FgUserInfos',
label: 'User Informations' } ]
Fields that are to be displayed in this group require the @UI.fieldGroup annotation. This annotation can contain several assignments, so that a field can appear in several sections simultaneously (e.g. in a specific field group and additionally also in the header area).
@UI.fieldGroup: [ { qualifier: 'FgUserInfos',
position: 20 } ]
Assignee;
Field groups within field groups can also be defined.
@UI.facet: [ { id: 'idIdentification',
type: #COLLECTION,
label: 'My Task',
position: 10 },
{ id: 'idText',
purpose: #STANDARD,
type: #FIELDGROUP_REFERENCE,
label: 'Text',
position: 20,
parentId: 'idIdentification',
targetQualifier: 'FgText' },
{ id: 'idAttributes',
purpose: #STANDARD,
type: #FIELDGROUP_REFERENCE,
label: 'Attributes',
position: 30,
parentId: 'idIdentification',
targetQualifier: 'FgAttributes' } ]
Fields that are to be displayed in one subordinate group each require the @UI.fieldGroup annotation with a qualifier pointing to the subordinate section.
@UI.fieldGroup: [ { qualifier: 'FgText', position: 20 } ]
Summary;
@UI.fieldGroup: [ { qualifier: 'FgAttributes', position: 30 } ]
Type;
This section is used to display associated objects as a table. The name of the association is to be specified in targetElement.
In the associated CDS entity, the @UI.lineItem annotation must be specified for the fields to be displayed.
@UI.facet: [ { id: 'TasksToDo',
type: #LINEITEM_REFERENCE,
label: 'Tasks to do',
targetElement: '_TasksToDo',
position: 20 } ]
Unlike the other section types explained, an additional use of the @UI.fieldGroup annotation is not necessary here, since the associated object (here: _TasksToDo) is already embedded via targetElement and – as defined in the associated CDS entity – displayed as a list.
The @UI.headerInfo annotation defines the header information. In addition, further field groups can be added to this header area.
@UI.facet: [ { id: 'idHeader',
purpose: #HEADER,
label: 'Properties',
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'FgHeader' } ]
Fields that are to be displayed in this group require the @UI.fieldGroup annotation with a qualifier pointing to the header section.
@UI.fieldGroup: [ { qualifier: 'FgHeader', position: 10 } ]
Author;
@UI.fieldGroup: [ { qualifier: 'FgHeader', position: 20 } ]
DueDate;