Johannes Behrndt
 - 27. Februar 2015

Ändern der Schriftgröße einer SAPUI5 App mit CSS

SAPUI5 App

Generell sollte natürlich davon Abstand genommen werden, die Schriftgröße einer SAPUI5 App zu ändern. Warum? Es handelt sich hierbei um ein Framework mit responsive Design, das sich automatisch an die Gegebenheiten des Endgeräts anpasst was die Größe und Anordnung der Elemente betrifft.

Zu viele manuelle Änderungen wie eben die Änderung der Schriftgröße einer SAPUI5 App können das Design zerstören.

E-Book: App-Entwicklung

In diesem E-Book erhalten Sie eine Übersicht über die Entwicklung von Enterprise-Apps mit SAPUI5 und OData.

Manchmal ist es allerdings doch gewünscht oder sinnvoll, manuell die Schriftgröße in der App zu ändern. Ein Anwendungsfall könnte sein, dass bestimmte Daten sehr groß angezeigt werden sollen, weil die Entfernung zum Endgerät vielleicht zu groß ist oder einfach sehr wenige Informationen sehr schnell zugreifbar sein sollen. Oder wenn beispielsweise Buttons auf Tablets mit Handschuhen bedient werden sollen und ein entsprechend großer Knopf notwendig ist, um Fehleingaben zu reduzieren. Ein weiterer Anwendungsfall könnten besondere Anforderungen an die Barrierefreiheit sein.

Im Neptune Application Designer kann die Schriftgröße einer SAPUI5 App folgendermaßen manuell geändert werden:

Zuerst muss dem entsprechenden Element eine eigene CSS-Klasse zugewiesen werden:

Dies wird über die Methode addStyleClass(„NAME_DER_KLASSE“) des Elements realisiert:

addStyleClass

addStyleClass

Im Neptune Application Designer kann hier einfach ein Skript-Element eingefügt und in diesem der Code geschrieben werden.

Nun kann über den Reiter „Stylesheet“ links im NAD das Stylesheet für diese Klasse angepasst werden. Hierbei ist der Parameter !important wichtig, damit bestehende CSS-Bindungen überschrieben werden:

Schriftgröße in SAPUI5 anpassen - !Important

Schriftgröße in SAPUI5 anpassen – !Important

Im Anschluss wird das entsprechende Element mit der gewünschten Größe angezeigt. Natürlich sind auch weitere Überschreibungen des Standards wie z.B. auch der Farbe möglich.

Schriftgröße einer SAPUI5 App

Schriftgröße einer SAPUI5 App

Bei vielen neuen Style-Klassen bzw. generell wenn viel Skript-Coding im NAD verwendet wird, sollten die Skripts natürlich möglichst sinnvoll strukturiert werden, damit sie auch später noch verständlich sind.

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support