Einbinden einer eigenen CSS Styleklasse in SAPUI5® Controls

Die visuelle Darstellung eines SAP UI5 Controls kann mit mehreren Möglichkeiten angepasst werden. Eine Möglichkeit besteht darin, eine eigene CSS Style Klasse zu definieren und an das SAP UI5 Control anzuhängen.

Erweiterung der SAP UI5 INDEX Datei

In der index.html Datei wird die neue Style Klasse hinzugefügt:

democssclass1

Anpassung im SAP UI5 View

Im SAPUI5 View kann die neue CSS Style Klasse nun mit der Methode addStyleClass an ein SAPUI5 Control angehängt werden:

democssclass2

Darstellung des SAP UI5 Controls

Wie erwartet sieht dann das gewünschte Ergebnis (weißer Text, kursiv auf schwarzem Hintergrund) wie folgt aus:

democssclass3

SAP Fiori® in a nutshell

Eines gleich vorweg: auf dem UI Sektor tut sich was. Ich möchte Ihnen in einem kurzen Überblick den Aufbau, die wichtigsten Features und Einsatzmöglichkeiten des neuesten SAP UI Babys Fiori geben.

Was ist SAP Fiori?

SAP Fiori, oder SAP Fiori UX, ist SAPs neue „User Experience“, also quasi ein neues „Benutzererlebis“ und steht für neue, moderne Designprinzipien.

Es stellt die etwa 200 am häufigsten genutzten SAP-Funktionen auf einer neuen, intuitiven Benutzeroberfläche bereit, die man an seine persönlichen Wünsche anpassen kann.

Entwickelt wurde Fiori sowohl für Manager und als auch für Mitarbeiter.

Man kann verschiedene Tätigkeiten wie z. B. Self Service Workflows, Abwesenheitsanträge, Zeiterfassung oder Bestellungen durchführen, und diese dann direkt in Fiori anlegen und dort auch genehmigen.

Ganz egal, ob am PC, am Tablet oder am Smartphone, SAP Fiori läuft auf allen drei Gerätearten gleichermaßen gut. Somit hat man dieselbe User Experience (eben UX), also das Benutzererlebnis, auf allen drei Geräten.

Die Oberfläche basiert auf SAP UI5 und passt sich unterschiedlichen Bildschirmgrößen an.

SAP Fiori ist kostenlos.

Apps

SAP Fiori basiert auf Apps, die unterschiedliche Einsatzgebiete und auch technische Anforderungen haben.

Es gibt drei Arten von Apps:

Die Transactional Apps – wie der Name schon sagt, kann man mit ihnen Transaktionen durchführen, wie z. B. Urlaubsanträge von Mitarbeitern bearbeiten und diese genehmigen. Aufgrund der Perfomance wird empfohlen SAP HANA zu verwenden, allerdings laufen diese auch auf anderen Datenbanken.

Die Analytical Apps – das sind quasi Real Time Informationen aus der SAP Business Suite, also damit kann man sich seine Key Performance Indikatoren live anschauen. Diese Apps brauchen relativ viel Performance und laufen NUR auf SAP HANA.

Die Fact Sheets – diese zeigen Informationen an. Man kann von einem Fact Sheet zum nächsten browsen. Angezeigt werden verschiedene Inhalte und Informationen, die im Zuge der Business Operations relevant sind. Diese laufen auch NUR auf SAP HANA.

Weiters gibt es eine Wave 1 mit 25 Apps (aus den Bereichen: Human Ressources, Sales, Procurement) und eine Wave 2 mit 180 Apps (unter anderem aus dem Bereichen: Manufacturing, Finance, Supply, …)

Praktischer Nutzen

Stellen Sie sich vor, Sie stehen als Manager gerade in der Früh beim Bäcker, und es steht eine Liste von Freigaben für Aufträge an, und Sie können diese schnell und einfach auf Ihrem Handy erledigen. Im Büro angekommen legen Sie schnell ein paar Kundenaufträge an, und kurz darauf bei einem Meeting haben Sie auch schon wieder die wichtigsten Informationen auf einem Tablet zu den wichtigsten Lieferungen und Rechnungen schnell zur Hand. Einfach und praktisch mit SAP Fiori, damit können Sie praktisch an jedem Ort mit einer einheitlichen Benutzeroberfläche arbeiten. Diese passt sich, dank der Responsive-Design-Prinzipien, einfach an die Formfaktoren der verschiedenen Geräte an, und so haben Sie auf allen Plattformen die gleiche Benutzeroberfläche zur Verfügung.

Fazit: alles in allem ist es ein großer Gewinn an Benutzerfreundlichkeit und Performance.

Um in „SAP Fiori Style“ zu programmieren, muss man gewisse Guidelines beachten und in UI5 entwickeln.

UI5

SAP UI5 ist SAP’s Toolkit zum Bauen von Web Applikationen mit HTML5.

Es basiert auf Java Script.

Dafür gibt es ein eigenes SAPUI5 JavaScript Development Toolkit mit dem man auf HTML5 basierende Web Applikationen schreiben kann. D.h. es ist quasi ein Sammlung von libraries mit denen man Desktop und Mobile Applikationen schreiben kann, die in einem Internetbrowser laufen.

Es gibt eigene Development Guidelines, die beschreiben wie man damit Webseiten entwickeln kann.

Wie sieht so etwas aus?

Mit JSON:

Weitere Informationen zu Fiori finden Sie in den verschiedenen SAP Fiori Dokumentationen.

Viel Spaß beim Entdecken!