SAP Fiori Elements ist ein Framework, mit dem sich standardisierte Anwendungen mit wenig Frontend-Code entwickeln lassen. Statt Benutzeroberflächen manuell zu programmieren, beschreibt man das gewünschte Verhalten und die Darstellung der Anwendung überwiegend deklarativ über Metadaten. Es gibt vordefinierte Seiten- bzw. Anwendungslayouts, auch Fiori Floorplans genannt. Die relevantesten sind List Report und Object Page.
Eine besonders wichtige Rolle spielen die Core Data Services (CDS) UI-Annotationen. Sie erweitern CDS-Views um semantische Informationen, die die Datenstruktur und deren fachliche Bedeutung und Darstellung im Frontend beschreiben.
Die folgenden Eigenschaften können für verschiedene UI-Annotationen eingesetzt werden. Zum Beispiel bei @UI.lineItem, @UI.fieldGroup, @UI.identification.
hidden - Das Feld wird nicht angezeigt und kann auch mit Personalisierung nicht hinzugefügt werdenposition - Legt die Reihenfolge der Felder festlabel - Bezeichnung des Feldesimportance - Steuert die Relevanz eines Feldes (Darstellung prominent oder reduziert)Auch das Einbinden von RAP-Actions funktioniert bei diesen Annotationen gleichermaßen.
@UI.lineItem: [ { type: #FOR_ACTION, dataAction: 'setDone', label: 'Done' } ]
Status;
Die Eigenschaft label ändert den anzuzeigenden Text an nur einer Stelle (z.B. eine Tabellenspalte) (vgl. allgemeine Eigenschaften). Mit der Annotation @EndUserText wird der Text eines Feldes auf allen Ebenen angepasst.
@EndUserText.label: 'Benutzer-ID'
UserId : abap.numc(10);
Die Texte, die in einer CDS-Annotation vorkommen, können auch über die Transaktion SE63 oder die Fiori App Text Repository - Übersetzen übersetzt werden.
Der Header zeigt die wichtigsten Informationen eines Objekts: Titel, Untertitel, Key Facts und KPIs. Er wird sowohl im List Report (Titelzeile) als auch auf der Object Page angezeigt.
Die Annotation steht auf View-Ebene, also vor der eigentlichen Definition der CDS-View. Diese Annotationen beziehen sich auf die gesamte View und werden nicht nach oben propagiert.
@UI.headerInfo: { typeName: 'My Task',
typeNamePlural: 'My Tasks',
typeImageUrl: 'sap-icon://activity-items',
title: { type: #STANDARD, value: 'TaskKey' },
description.value: 'Summary' }
Eine Suchhilfe wird implizit von RAP in den Service mit aufgenommen und ermöglicht das Auswählen von Werten. Es wird eine andere CDS-View als entity.name angegeben und das Feld, das übernommen werden soll, als entity.element. Mit Additional Binding können zusätzliche Bindungen zur Filterung definiert werden.
@Consumption.valueHelpDefinition: [ { entity: { name: 'ZI_USERVH',
element: 'UserID' } } ]
Assignee;
Um Fremdschlüsseltexte einbinden zu können, müssen jeweils zugrunde liegende CDS-Views vorhanden sein (hier: ZI_StatusVH). Diese können dann eingebunden werden.
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
}
Hiermit können mehrere abhängige Felder über eine Suchhilfe gelesen und gefüllt werden. Wenn beispielsweise im Feld der Region das deutsche Bundesland Baden-Württemberg ausgewählt wird, wird automatisch zusätzlich das Land im zugehörigen Feld eingetragen.
@Consumption.valueHelpDefinition: [ {
entity: { name: 'I_Country', element: 'Country' } } ]
Country;
@Consumption.valueHelpDefinition: [ {
entity: { name: 'I_Region', element: 'Region' },
additionalBinding: [ { element: 'Country',
localElement: 'Country' } ] } ]
Region;
Für dasselbe Feld können mehrere Suchhilfen existieren und angezeigt werden, sodass für das Feld User bspw. zwischen einer Suchhilfe nach Name oder nach E-Mail gewählt werden kann. Dazu muss in einer separaten CDS-View eine entsprechende Sammelsuchhilfe, die andere CDS-Views bündelt, definiert werden.
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;
}
Diese CDS-View ist dann wie eine gewöhnliche Suchhilfe für das Feld einzubinden.
Der SAP-Fiori-List-Report dient der übersichtlichen Darstellung und effizienten Bearbeitung großer Datenmengen. Anwender können Informationen komfortabel filtern, suchen, sortieren und direkt in die relevanten Detailansichten navigieren. Durch standardisierte Funktionen und ein konsistentes UX-Design unterstützt der Floorplan eine schnelle und intuitive Bearbeitung geschäftlicher Prozesse.
Für eine fehlertolerante Suche über mehrere Felder kann die @Search-Annotation verwendet werden. Auf View-Ebene (vor DEFINE VIEW ENTITY) ist die Fuzzy Search zu aktivieren.
@Search.searchable: true
Dann wird mit der jeweils separaten Definition für jedes suchbare Feld die Fuzzy Search definiert. Der fuzzinessThreshold bestimmt die Sensitivität der Suche für das Feld (von 0.0 als extrem unscharf bis hin zu 1.0 als extrem scharf). Die SAP empfiehlt als Startwert 0.7.
@Search.defaultSearchElement: true
@Search.fuzzinessThreshold: 0.7
Assignee;
Die Filterfelder eines List Report können über den Button Filter anpassen selbst eingestellt werden. Die Annotation @UI.selectionField steuert, welche Filter bereits beim Laden der Seite sichtbar sind.
@UI.selectionField: [ { position: 20 } ]
Status;
Spalten werden über @UI.lineItem definiert. Man kann z.B. Reihenfolge, Label, Sichtbarkeit und Formatierung steuern.
@UI.lineItem: [ { position: 30, label: 'Task Status' } ]
Status;
Mit Criticality können Zeilen oder Felder abhängig von einem Statuswert farblich hervorgehoben werden. Dadurch lassen sich beispielsweise kritische, erfolgreiche oder neutrale Einträge im List Report schneller erkennen.
@UI.lineItem: [ { criticality: 'Priority' } ]
annotate view ZC_TASK with { … }
Das zugeordnete Feld (hier: Priority) muss dabei ein Ganzzahlwert von 1, 2 oder 3 sein.
Über die Eigenschaft criticality können Felder visuell hervorgehoben werden. Dabei wird ein Wert – bspw. Priorität oder Status – ausgewertet und automatisch als farbige Statusanzeige bzw. Status-Icon dargestellt.
@UI.lineItem: [ { position: 20, criticality: 'Priority' } ]
Status;
Das zugeordnete Feld (hier: Priority) muss dabei ein Ganzzahlwert von 1, 2 oder 3 sein.
Icons können verwendet werden, um Statusinformationen oder Zustände eines Geschäftsobjektes visuell hervorzuheben. Die Darstellung erfolgt über ein Feld, das den jeweiligen Pfad eines SAP-Icons enthält. Im CDS-View kann dieser Wert bspw. abhängig vom Status eines Datensatzes dynamisch bestimmt werden.
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,
Damit das Feld korrekt als Icon interpretiert wird, muss die Annotation @Semantics.imageUrl gesetzt werden. Dann kann das Feld mit @UI.lineItem in den List Report eingebunden und als Icon-Spalte dargestellt werden.
@Semantics.imageUrl: true
@UI.lineItem: [{ cssDefault.width: '5em', position: 5, label: 'Icon' }]
StatusIcon,
Der semantische Schlüssel wird fett dargestellt und steuert die Navigation. Die Annotation steht auf View-Ebene, also vor der eigentlichen Definition der CDS-View; diese kann nicht in einer Metadata Extension verwendet werden.
@ObjectModel.semanticKey: [ 'TaskKey' ]
Über die Eigenschaft importance kann definiert werden, welche Informationen bei begrenztem Platz (d.h. unterschiedlichen Bildschirmgrößen) bevorzugt angezeigt oder ausgeblendet werden.
@UI.lineItem: [ { position: 30, importance: #HIGH } ]
Status;
@UI.lineItem: [ { position: 90, importance: #MEDIUM, label: 'Due Date' } ]
DueDate;
Mit @EndUserText.quickInfo kann ein Feld eine Zusatzinformation beziehen, die als Tooltip angezeigt wird. So erhält man ergänzende Hinweise zu einem Feld, ohne dass zusätzliche UI-Elemente erforderlich sind.
@EndUserText.quickInfo: 'Type of Task'
Type;
Auf der Object Page wird eine Instanz eines Objektes dargestellt. Der Header-Bereich wird durch die Header-Annotationen gestaltet und enthält zentrale Informationen wie Titel, Status und wichtige Schlüsselfelder zur schnellen Orientierung.
Die Objektdaten werden in sogenannten Facetten angezeigt, die die Inhalte in thematisch zusammengehörige Abschnitte strukturieren und unterschiedliche Darstellungselemente wie Formulare, Tabellen oder KPI-Informationen bündeln.
In Erwartung längerer Texte dient es der besseren Lesbarkeit, diese über mehrere Zeilen hinweg darzustellen.
@UI.multiLineText: true
Summary;
Um Felder auszublenden, wird die Annotation @UI.hidden verwendet. Dann ist das jeweilige Feld weder auf dem List Report noch auf der Object Page zu sehen. Auch das Einblenden des Feldes als Filter ist dann nicht mehr möglich.
@UI.hidden: true
DummyPriority;
Um einzelne Felder gezielt aus bestimmten Fiori-Elementen auszublenden, kann exclude verwendet werden. Der Einsatz dessen ist in verschiedenen UI-Annotationen möglich, wie u.a. @UI.fieldGroup oder @UI.lineItem.
@UI.identification: [ { position: 60, exclude: true } ]
DummyPriority;
Um Inhalte dynamisch ein- oder auszublenden, hilft die Eigenschaft hidden. Diese basiert dann auf dem Boolean-Wert (true/false bzw. 'X'/'') eines Feldes (hier: Hide) und kann in verschiedenen Annotationen eingebunden werden, so z.B. von Facet oder Feldgruppen.
@UI.fieldGroup: [ { qualifier: 'Kpi', position: 30, hidden: #(Hide) } ]
Voting;
Weitergehend kann die dynamische Sichtbarkeit von Feldern ebenso anhand von Feature Control gesteuert werden.
Die Annotation @Semantics in CDS-Views dient dazu, Feldern eine fachliche Bedeutung zuzuweisen, die über den reinen Datentyp hinausgeht. Sie beschreibt beispielsweise, ob ein Feld eine Währung, eine Menge, einen Betrag, eine E-Mail-Adresse oder einen Prozentsatz darstellt. Diese semantischen Informationen werden von Fiori Elements genutzt, um Daten korrekt zu formatieren, zu validieren und kontextabhängig darzustellen.
@Semantics.eMail.address: true
Email,
@Semantics.address.country: true
Country,
@Semantics.address.region: true
Region,
Die Nutzung der @Semantics-Annotation kann nicht in Metadata Extensions erfolgen.
Datenpunkte definieren fachliche Kennzahlen oder Statusinformationen und steuern deren Darstellung sowie Hervorhebung. Beispielsweise können Zahlenwerte als Rating, d.h. in Form einer Sternebewertung, dargestellt werden.
@UI.dataPoint: { qualifier: 'Voting',
targetValue: 5,
visualization: #RATING,
title: 'Voting' }
Voting;
Es können auch einzelne Arten von Diagrammen, die nur eine Kennzahl oder einen Statuswert benötigen, dargestellt werden. Hierunter zählt z.B. ein Fortschrittsdiagramm. Um mehrere Datenwerte grafisch zu visualisieren, werden hingegen Charts benötigt.
Mithilfe von Charts können vordefinierte Arten von Diagrammen dargestellt werden, so bspw. Radial Chart, Bullet Chart etc.
@UI.chart: [ { qualifier: 'radialChart',
title: 'Radial Chart',
chartType: #DONUT,
measures: ['Criticality'],
measureAttributes: [ { measure: 'Priority',
role: #AXIS_1,
asDataPoint: true } ] } ]
Zum Vergleich: Datenpunkte stellen einzelne Kennzahlen oder Statuswerte kompakt dar, während Charts mehrere Datenwerte grafisch visualisieren, um Zusammenhänge, Entwicklungen oder Vergleiche sichtbar zu machen.
Auf der Object Page können auch sich beim Anklicken öffnende Karten mit Kurzinformationen (z.B. zu Kontakten) angezeigt werden. Hierzu sind bestimmte Felder sowie zugehörige Annotationen in der CDS-View, aus welcher die Informationen ursprünglich stammen, erforderlich.
In diesem Beispiel ist hiernach das Feld FullName als read-only innerhalb der Behavior Definition zu setzen.
@Semantics.name.fullName: true
concat_with_space(firstname, lastname, 1) as FullName,
@Semantics.eMail.address: true
@Semantics.eMail.type: [ #WORK ]
email as Email,
Hiernach kann die Karte durch eine Feldgruppe definiert werden. Es ist zu berücksichtigen, dass der Wert von value die Assoziation zu der oben erwähnten CDS-View darstellt.
@UI.fieldGroup: [ { qualifier: 'FgHeader',
type: #AS_CONTACT,
label: 'Assignee Contact Card',
position: 70,
value: '_Assignee' } ]
Assignee;
Facets strukturieren Inhalte innerhalb einer Object Page und gliedern Informationen in logisch zusammengehörige Bereiche. Sie definieren bspw. Abschnitte, Formulare, Tabellen oder Referenzen auf weitere UI-Elemente und verbessern dadurch die Übersichtlichkeit und Navigation innerhalb der Anwendung.
In Fiori Elements werden sie über CDS-Annotationen konfiguriert und steuern maßgeblich den Aufbau der Benutzeroberfläche.
Die Bereiche, die auf der Object Page dargestellt werden sollen, müssen mit der Annotation @UI.facet definiert werden.
Obwohl sich die Definition auf alle Spalten bezieht, werden sie nicht in den View-Annotationen, sondern auf Feldebene, jedoch vor dem eigentlichen ersten Feld, definiert. Der Grund hierfür ist, dass sie sonst nicht propagiert werden.
Der Identifikationsbereich in einer Object Page zeigt die zentralen Kerndaten eines Geschäftsobjekts direkt an und dient der schnellen Orientierung. Er enthält typischerweise wichtige Stamminformationen, Statuswerte und Schlüsselattribute. Felder in diesem Bereich sollen das Objekt gemeinsam mit den Informationen aus dem Header eindeutig identifizieren.
@UI.facet: [ { id: 'idIdentification',
type: #IDENTIFICATION_REFERENCE,
label: 'My Task',
position: 10 } ]
Felder, die in diesem Abschnitt angezeigt werden sollen, benötigen die Annotation @UI.identification.
@UI.identification: [ { position: 20,
label: 'Task Status' } ]
Status;
Feldgruppen dienen dazu, semantisch zusammengehörige Felder logisch zu bündeln und gemeinsam in der Benutzeroberfläche darzustellen. Über #FIELDGROUP_REFERENCE können diese Gruppen als Abschnitte in Fiori Elements wiederverwendet und flexibel referenziert werden. Dadurch wird die Strukturierung von Formularen und Detailansichten übersichtlicher und konsistenter.
@UI.facet: [ { purpose: #FILTER,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'FgUserInfos',
label: 'User Informations' } ]
Felder, die in dieser Gruppe angezeigt werden sollen, benötigen die Annotation @UI.fieldGroup. Diese Annotation kann mehrere Zuordnungen beinhalten, sodass ein Feld in mehreren Abschnitten gleichzeitig (bspw. in einer bestimmten Feldgruppe und zusätzlich auch im Kopfbereich) erscheinen kann.
@UI.fieldGroup: [ { qualifier: 'FgUserInfos',
position: 20 } ]
Assignee;
Es können auch Feldgruppen innerhalb von Feldgruppen definiert werden.
@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' } ]
Felder, die in je einer untergeordneten Gruppe angezeigt werden sollen, benötigen die Annotation @UI.fieldGroup mit einem qualifier auf den untergeordneten Abschnitt.
@UI.fieldGroup: [ { qualifier: 'FgText', position: 20 } ]
Summary;
@UI.fieldGroup: [ { qualifier: 'FgAttributes', position: 30 } ]
Type;
Dieser Abschnitt wird verwendet, um assoziierte Objekte als Tabelle anzuzeigen. Der Name der Assoziation ist in targetElement anzugeben.
In der zugehörigen CDS-Entität muss die Annotation @UI.lineItem für die anzuzeigenden Felder angegeben werden.
@UI.facet: [ { id: 'TasksToDo',
type: #LINEITEM_REFERENCE,
label: 'Tasks to do',
targetElement: '_TasksToDo',
position: 20 } ]
Im Gegensatz zu den anderen erläuterten Abschnittsarten ist an der Stelle eine zusätzliche Verwendung der Annotation @UI.fieldGroup nicht notwendig, da das assoziierte Objekt (hier: _TasksToDo) bereits mittels targetElement eingebunden und - wie in der assoziierten CDS-Entität definiert - als Liste angezeigt wird.
Die Annotation @UI.headerInfo legt die Header-Informationen fest. Zusätzlich dazu können weitere Feldgruppen diesem Kopfbereich hinzugefügt werden.
@UI.facet: [ { id: 'idHeader',
purpose: #HEADER,
label: 'Properties',
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'FgHeader' } ]
Felder, die in dieser Gruppe angezeigt werden sollen, benötigen die Annotation @UI.fieldGroup mit einem qualifier auf den Abschnitt des Headers.
@UI.fieldGroup: [ { qualifier: 'FgHeader', position: 10 } ]
Author;
@UI.fieldGroup: [ { qualifier: 'FgHeader', position: 20 } ]
DueDate;