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

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

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

Seit der Version 7.4 bietet das SAP NetWeaver Portal das sogenannte Fiori Launchpad an. Dahinter verbirgt sich eine neue Framework-Page, die sich zum einen näher an den W3C-Richtlinien orientiert als […]

weiterlesen

UI5 verfügt über hunderte Icons. Trotzdem kommt es immer wieder vor, dass beim Design einer App genau das gewünschte Icon nicht existiert. Ich zeige Ihnen, wie Sie Ihre eigenen Icons […]

weiterlesen

Dass SAP mit Fiori noch so einiges in Planung hat, um die SAP-Oberflächen aller Endanwender auf ein neues Level zu heben und die User Experience noch weiter zu optimieren, war […]

weiterlesen

Schreiben Sie einen Kommentar

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





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice