UI5 Custom Styles: Aussehen einer App verändern

Wann benötigt man Custom Styles?

Custom Styles benötigt man dann, wenn das Standard-Styling von UI5/Fiori nicht ausreicht. Es kann sein, dass die UI5-Apps an die jeweiligen Unternehmensfarben angepasst oder Buttons beispielsweise anders als im Standard dargestellt werden sollen. Immer wenn man das Standard-Styling von UI5 überschreibt, spricht man Custom Styling. Wann Custom Styling sinnvoll ist und wie man vorwärtskompatible UI5 Custom Styles entwickelt findest du im Abschnitt „Best Practices“.

Wie funktioniert das Custom Styling?

Für das Styling der einzelnen Elemente in einer UI5-App wird die Stylesheet-Sprache CSS (Cascading Style Sheets) benutzt. In der Webentwicklung ist das Styling via CSS Standard. Daher lassen sich auch viele Tutorials finden, die sich ziemlich gut auf UI5-Apps übertragen lassen. Auch die Standard-Styles von UI5 sind in einer CSS-Datei gespeichert. Du kannst dir das Styling für jedes Element in einer UI5-App anzeigen lassen. Ich habe in der SAP Web IDE eine Beispielapplikation angelegt und gestartet. Wenn man nun in irgendeinen Bereich der App einen Rechtsklick macht und danach auf „Untersuchen“ klickt, erscheint im Browser ein neuer Bereich, der das Styling und weitere Informationen anzeigt.

Styling anzeigen

Es sollte sich anschließend ein Teil der Webseite in blau färben und in dem neu geöffneten Bereich der DOM-Tree geöffnet werden. Mit einem Klick auf irgendein Element im DOM-Tree kannst du genau dieses Element anschauen. Der ausgewählte Bereich färbt sich dann in der App blau und du kriegst die zugehörigen Styles angezeigt.

Stylesheet Übersicht

Im rechten Bereich siehst du alle Styles, die zu diesem Element gehören. Beispielsweise wurde hier „overflow: hidden auto;“ gefunden. Dies findet man im DOM-Tree wieder (s. Pfeil im Screenshot oben). Die meisten Styles die du hier findest, gehören zur UI5-Library. Dies erkennst du auch an dem „library.css“ im rechten Bereich. Wir simulieren jetzt einmal den Auftrag, die Hintergrundfarbe der Seite zu ändern. Dazu brauchen wir UI5 Custom Styles.

Um nun deine eigenen Styles hinzuzufügen, musst du zunächst eine CSS-Datei in deinem Projekt anlegen. Lege dazu ganz normal eine neue Datei im Ordner „/webapp/css/“ an und nenne sie „style.css“. Wenn du dein Projekt von einem Template generiert hast, sollte diese Datei schon automatisch vorhanden sein.

Stylesheet-Datei erstellen

In diese Datei schreiben wir nun unsere Custom Styles. Um die Hintergrundfarbe des eben angesehen Elements („<section id=“container-CSS—App–page-cont“ class=“sapMPageEnableScrolling sapUiScrollDelegate“ style=“overflow: hidden auto;“></section>“) zu ändern, gib folgenden Code ein:

section{
	background-color: #007AFF;
}

Was bedeutet dieser Code? Wenn man ihn übersetzen würde, könnte man es in etwa so beschreiben: „Immer wenn du ein HTML-Element mit dem Typ section findest, setze die Hintergrundfarbe auf #007AFF“.
Wenn du deine App nun neu lädst, sollte die Hintergrundfarbe blau sein und das Styling auch rechts angezeigt werden, wenn du das Element erneut untersuchst.

Das erste Custom Styling

Durch diese Funktionalität wird allerdings immer die Hintergrundfarbe eingesetzt, wenn der HTML-Tag „section“ verwendet wird. Vielleicht wollen wir die Hintergrundfarbe aber nur bei bestimmten „sections“ verändern. Dazu gibt es die CSS-Selektoren, die Klassen und IDs ansprechen können. Mit diesen Funktionalitäten kann man Elemente gezielt ansprechen und stylen.

Grundlegende CSS-Selektoren

Im DOM-Tree ist dir eventuell schon aufgefallen, unsere Section eine id („container-CSS—App–page-cont“) sowie mehrere Klassen („sapMPageEnableScrolling“ und „sapUiScrollDelegate“) zugeordnet bekommen hat. Die ID und die Klassen können wir gezielt in unserem CSS-Code ansteuern, sodass wir nur die Elemente ändern, die die entsprechende Klasse besitzen. Möchten wir eine ID ansprechen benutzen wir den Präfix „#“. Sprechen wir eine Klasse an, benutzen wir den Präfix „.“. Dies würde in unserem Beispiel dann so aussehen:

#container-CSS---App--page-cont{
	background-color: #007AFF;
}

Weiterführende Stylesheet-Tutorials

Außerhalb von Klassen und IDs kann man Elemente auch auf unterschiedliche Weisen ansprechen. Zum Beispiel jedes n-te Element eines bestimmten Typs. Oder alle Elemente die eine bestimmte Klasse besitzen aber eine andere wiederum nicht. Es empfiehlt sich durchaus, ein paar CSS-Tutorials durchzuführen. Dies hilft insbesondere auch das Standard-UI5-Styling zu verstehen.
Ich habe eine kleine Sammlung von (meiner Meinung nach) guten CSS-Tutorials zusammengestellt:

1. https://www.w3schools.com/css/
2. https://wiki.selfhtml.org/wiki/CSS

Beide Seiten bieten wirklich umfangreiche CSS-Tutorials mit anschaulichen Beispielen.

Best Practices

Bevor du jetzt loslegst und deine UI5-Apps aufhübschst möchte ich dich noch auf einige wichtige Dinge beim Umgang mit Custom Styles aufmerksam machen.

1. Prüfe, ob Custom Styling wirklich notwendig ist

Die SAP hat bei ihren Standard-Styles eine sehr gute Arbeit geleistet und für die User Experience von SAP Fiori auch den reddot Award (s. https://experience.sap.com/fiori-design/) gewonnen. Ein großes Ziel von Fiori ist es vor allem, dem Benutzer ein einheitliches Benutzererlebnis zu bieten. Fangen wir nun an, alle unsere Apps mit Custom Styles umzubauen sodass sie alle anders zu bedienen sind, verspielen wir einen riesigen Vorteil von SAP Fiori gegen über den teilweise überladenen Transaktionen in der SAP GUI. Vor jedem Custom Styling sollte man sich also überlegen: „Muss diese Änderung wirklich sein? Geht diese Änderung am Styling auf Kosten der User Experience?“. Custom Styling sollte also generell sparsam eingesetzt werden. Trotzdem gibt es gute Gründe für das Custom Styling. Der naheliegendste Grund sind die Umsetzung eines Corporate Designs eines Unternehmens. Man sollte den Einsatz aber immer kritisch hinterfragen.

2. Benutze eigene CSS-Klassen

Die CSS-Klassen und IDs, die wir im DOM-Tree in Chrome sehen können, sind teilweise von UI5 generiert und wir haben keinen Einfluss auf deren Benennung. Ändert sich in einer zukünftigen Version die Benennung bzw. fallen einzelne Klassen komplett weg, wird unser Custom Styling keine oder falsche Auswirkungen haben. Um die komplette Kontrolle über das Styling zu behalten und auch Vorwärtskompatibilität herzustellen, sollten daher am besten immer nur eigene Klassen bzw. IDs im Styling geändert werden.

3. Verwende möglichst explizite Selektoren

In unserem obigen Beispiel wollten wir den Hintergrund blau färben. In dem ersten Code-Beispiel haben wir dafür alle „section“-HTML-Tags blau gefärbt. Das sah in unserem einfach Fall richtig aus. Bei größeren Apps kann aber so ein allgemeiner CSS-Selektor auch Auswirkungen auf Bereiche haben, die wir zunächst gar nicht beachten. Daher sollte man die CSS-Selektoren immer so explizit wie möglich wählen, um unterwünschte Seiteneffekte zu minimieren.

Beispielcoding

Ich habe in einem Beispielprojekt einmal verschiedene Stylings durchgeführt. Du kannst es hier kostenlos herunterladen und das Projekt dann in deiner SAP Web IDE importieren.

CustomStylesDemo

Fazit

Du hast in diesem Tutorial gelernt, wie man Custom Styles einbindet und wann man diese verwendet. Damit hast du die grundlegenden Werkzeuge kennengelernt, mit denen du alles tun kannst, was du für das Custom Styling brauchst. Schaue dir gerne die von mir genannten Tutorials an, um CSS tiefer zu verstehen und damit saubere Custom Styles zu entwickeln.
Möchtest du mehr Beispiele oder ein CSS-Tutorial, dass auf UI5-Apps zugeschnitten ist? Schreib mir dies gerne in die Kommentare 🙂