Im Netz der Formulare

Im vorherigen Teil dieser Reihe hatten wir uns das unterschiedliche Verhalten der Layout-Attribute der SimpleForm angesehen. GridLayout und ResponsiveLayout waren schnell beschrieben. Das ResponsiveGridLayout jedoch nicht. Dieser Layout-Typ bringt zahlreiche Möglichkeiten der Anpassungen mit. Sogar so viele, dass inzwischen dieses Control fast immer als die richtige Wahl empfohlen werden kann. Alles Gründe für einen eigenen Beitrag.

Das gespaltene Dutzend

Im letzten Beitrag hatte ich bereits geschrieben, dass das ResponsiveGridLayout nach Bedarf konfiguriert werden kann. Genau genommen gilt hier das Prinzip, dass man dem Control zahlreiche Einstellungen geben kann, die mit einem vertretbaren Aufwand die gewollte Darstellung der Felder ermöglichen soll. Individuell für kleine, mittlere, große und sehr große Displays. Bevor wir uns diese Attribute anschauen, ist es wichtig das unterliegende Prinzip des Layout der Formulare in SAPUI5 zu kennen. Jedes Formular wird in 12 gleich großen Spalten (oder auch “Zellen”) aufgeteilt. Wie man sich das vorstellen kann zeigt die nächste Abbildung.

Jedem der in einem Formular vorkommenden Elemente (Label, Eingabefeld und Platzhalter) kann eine Anzahl von Spalten/Zellen reserviert werden. Die obere Abbildung hat beispielsweise drei Spalten für die Label, fünf für die Eingabefelder und vier für die horizontalen Platzhalter. In den Fiori Guidelines und Dokumentationen wird dies gerne als “3:5:4” abgekürzt. Die nächste Abbildung zeigt ein “4:8:0” Layout.

Nach 12 Spalten erfolgt immer ein Umbruch für eine neue Zeile. Ein Schema “12:12:0” steht übersetzt für “Eine Zeile für Label, Umbruch, eine Zeile für Eingabefelder, Umbruch, Nichts für Platzhalter” und kann in der folgenden Abbildung gesehen werden.

Dies bietet sich besonders für die mobile Darstellung an.

Attribute für ResponsiveGridLayout

Mit diesem wissen im Hinterkopf können wir uns nun die Attribute des ResponsiveGridLayout genauer ansehen. Einen Überblick über diese Attribute soll die folgende Tabelle bieten (Quelle):

[table id=responsive_grid_attributes /]

Mittels XL, L, M und S wird zwischen sehr großen, großen, mittleren und kleinen Displays unterschieden. Als Faustregel kann man diese auch mit Ultra HD, Desktop, Tablet und Mobil gleich setzen. Jede dieser Display-Gruppen hat einen Grenzwert in Pixel. Wird dieser über oder unterschritten wechselt die Darstellungsform in den entsprechenden neuen Modus. Somit kann ich also nicht nur die einzelnen Modi des Formular steuern (zB. “4:6:2”), sondern dies auch pro Endgerät fein konfigurieren. Seien es nun Label, Eingabefelder, Platzhalter und Vieles mehr.

Dem geübten Auge kann aufgefallen sein, dass manche der oben gezeigten Formulare mehrere Eingabefelder pro Zeile haben. Auch hier, also auf Ebene des jeweiligen Control, gibt es zusätzliche Möglichkeiten der Einstellung. Diese sind jetzt nicht mehr Teil des SimpleForm, werden aber den Ausgangspunkt für die kommende Reihe dieses Blogs sein c[_]

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.