Entwicklung ·SAPUI5-API

SimpleForm entmystifiziert – Teil 3

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.

Quelle: https://experience.sap.com/fiori-design-web/form/

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.

Quelle: https://experience.sap.com/fiori-design-web/form/ (gekürzt)

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.

Quelle: https://experience.sap.com/fiori-design-web/form/ (gekürzt)

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):

AttributTypBeschreibung
adjustLabelSpan
boolDynamische Anpassung der Breite der Label nach Größe des Display
breakpointL
intBestimmt Umbruch zwischen großen und mittleren Displays
breakpointMintBestimmt Umbruch zwischen mittleren und kleinen Displays
breakpointXLintBestimmt Umbruch zwischen sehr großen und großen Displays
columnsMintAnzahl der Spalten für mittlere Displays
columnsLintAnzahl der Spalten für große Displays
columnsXLintAnzahl der Spalten für sehr große Displays
emptySpanLintAnzahl leere Zellen am Ende einer Zeile für große Displays
emptySpanMintAnzahl leere Zellen am Ende einer Zeile für mittlere Displays
emptySpanSintAnzahl leere Zellen am Ende einer Zeile für kleine Displays
emptySpanXLintAnzahl leere Zellen am Ende einer Zeile für sehr große Displays
labelMinWidthintGarantierte Breite für Label in Pixel
labelSpanLintBreite der Label für große Displays in Zellen
labelSpanMintBreite der Label für mittlere Displays in Zellen
labelSpanSintBreite der Label für kleine Displays in Zellen
labelSpanXLintBreite der Label für sehr große Displays in Zellen
minWidthintMindestwert an Pixel für das SimpleForm Control
singleContainerFullSizeboolWenn ein Formular nur aus einem einzelnen Container besteht, wird diesem die volle Breite zur Verfügung gestellt

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[_]

Unser Leistungsangebot und weitere Artikel rund um das Thema finden sich auf unserer Acando Fiori-Landing Page.

Schreibe einen Kommentar