Mit SAP Fiori Elements lassen sich im Handumdrehen neue UI5 Apps generieren, die weniger Entwicklungsarbeiten im Frontend vorsehen, als bislang verwendet.

Frontend-seitig wird von der SAP ein Smarttemplate bereitgestellt, das Annotationen und Metainformationen von OData-Services ausliest und hieraus eine entsprechende UI5 Oberfläche generiert, die den typischen SAP Fiori Look hat. Beeindruckend ist vor allem, dass wenn im Backend definiert wurde, dass auch das Erstellen, Löschen und Updaten von Entitäten im Backend möglich ist. Die entsprechenden Funktionalitäten werden direkt im Frontend durch das Smarttemplate realisiert.

Doch wie kannst du deine Fiori-Elements-App erweitern und schaffst es beispielsweise Buttons zu implementieren, die mit individuellem Coding hinterlegt werden können. Oder wie kannst du dem Smarttemplate aus dem Backend mitteilen, dass von Beginn an die Tabelle mit vordefinierten Suchfeldern ausgestattet ist?

In diesem Blog erkläre ich dir generell in welcher Weise du das Frontend anpassen kannst und inwieweit Einschränkungen vorliegen könnten. Detaillierte Anpassungsmöglichkeiten beschreibe ich dir in weiteren Beiträgen auf die ich verweisen werde. Schau dir den folgenden Blogartikel zu SAP Fiori Elements an, um dir einen generellen Überblick zu verschaffen. Wenn du dir klar werden willst, welche Möglichkeiten es zur Erweiterung existieren, bist du hier genau richtig!

Die Arten der Erweiterungen

Generell hast du die Möglichkeit deine Fiori Applikation aus der Backend-Definition oder direkt über Frontend Anpassungen zu ändern. Die Backend-Definitionen haben entsprechend Einfluss auf diverse Fiori-Applikationen, die den Service nutzen. Wäge daher ab, ob die Anpassungen nur für eine bestimmte Applikation sinnvoll ist oder ob die Anpassungen generell gelten sollen.

Erweitern über das Backend

Der im Backend erstellte OData-Service wird durch sogenannte Annotationen erweitert. Annotationen, bzw. Anmerkungen sind beeindruckende Informationen, die dem Client, also unserem SAP SmartTemplate mitteilen, wie die ankommenden Daten zu interpretieren sind. Man spricht auch von Vokabular-basierenden Anmerkungen. Diese Funktion ist mit OData der Version 4.0 realisierbar. Die OData-Services, die auf der Version 2.0 basieren, mussten jeweils mit einem SAP-spezifischen Attribut ausgestattet werden, damit die Daten im Frontend entsprechend interpretiert werden. Diese Daten können jedoch nur mittels SAP libraries interpretiert werden und daher nicht von jedem Client genutzt werden. Da wir generell in der SAP Umgebung mittels WEBIDE und auch mittels des SmartTemplates entwickeln, hat dies eher weniger Auswirkung auf den Anwendungsfall, aber die Veränderung zeigt sich nochmal im folgenden Beispiel:

OData Version 2.0

OData Version 4.0

Unterschieden werden bei den Annotationen zwischen den drei Standard Vokabularen: Core, Capabilities und Measures.

• Core – Core Begriffe, um Vokabulare zu schreiben
• Capabilities – Capabilities Begriffe beschreiben die Möglichkeiten des Services
• Measures – Measures Definitionen sind Begriffe, die Einheiten und Währungen beschreiben

 

Zudem kannst du über die folgenden Vokabulare die Daten weiter angemerkt, bzw. beschreiben.

• Common – Allgemeine Begriffe für alle SAP Vokabulare, bezogen auf Datensemantik
• Communication – Begriffe, die relevant für die Kommunikation sind
• UI – Begriffe, die die Darstellung und die Interpretation auf der Benutzeroberfläche verändern

Mit diesen Anmerkungsmöglichkeiten kann ich unsere Daten beschreiben und wirddurch unser Smarttemplate im Frontend direkt interpretiert.

In einem weiteren Beitrag kannst du einige Beispiele zur Erweiterung der SAP Fiori Elements Oberfläche vornehmen. 

Erweitern über das Frontend

Lokale Annotationen

Auch im Frontend lassen sich SAP Fiori Elements erweitern. Wenn wir über unsere WebIDE FullStack ein neues Fiori Elements Projekt anlegen, wird in dem Projektordner eine lokale Annotationsdatei angelegt, mit der wir arbeiten können. Dies ist die erste Option zur Erweiterung unserer Fiori Elements App über das Frontend.

Die Erweiterung über diese Annotations-Datei eröffnet uns ähnlichen Spielraum, wie die Änderungen, die wir im Backend tätigen können.

Unsere Entwicklungsumgebung WebIDE FullStack stellt mit dem “Annotation-Modeler” ein sehr hilfreiches Werkzeug zur Verfügung, mit dem wir unsere Entitätstypen anpassen, oder die Backend Annotationen überschreiben können. Natürlich lässt sich das Ganze auch wie gewohnt über den Code Editor lösen.

Eine detaillierte, ausführliche Beschreibung, wie sich die lokalen Annotationen anpassen lassen, zeige ich in einem weiterem Beitrag.

Extensions

Aber was ist eigentlich mit eigenen Buttons, eigenem JavaScript und Absprüngen zu unseren gewohnten SAP Fiori Apps? Eigenes Coding lässt sich in einer Extension in einem SAP Fiori Elements Projekt einbauen.

Über Extensions können wir die ListReports, also die Smarttemplates, die uns eine Tabelle generieren und auch ObjectPages, also die Detailansicht unserer Entitäten, anpassen. Durch das Anlegen von Extensions wird uns, je nach Art der Extension, beispielsweise eine View angelegt, in der wir Buttons und weitere Controls hinzufügen können, oder auch ein entsprechend zugehöriger Controller, indem wir wie gewohnt Eventhandler und eigenes Coding ausprägen können. 

Auch diese Art der Erweiterung kannst du in einem weiteren Blogartikel näher aufgeführt finden und mit Beispielen verstehen.

Lies dir am Besten zur Vertiefung der einzelnen Erweiterungsmöglichkeiten die detaillierten Blogartikel durch.

Du möchtest noch weitere Informationen zum Thema Fiori erhalten? Schaue dir auch unsere anderen Blog-Artikel an.