Grundlagen

Den Formularen in KIX liegt ein Grid-Layout zugrunde (aktuell nur für Tickets und Artikel). Dieses ermöglicht eine responsive Darstellung und damit eine automatische Anpassung der Formulare an die jeweiligen Bildschirmgröße.

Das Grid-Layout basiert auf einem 12-spaltigem Raster mit beliebig vielen Zeilen. Innerhalb der Zeilen werden Container/Gruppen definiert, welche eine bestimmte Breite besitzen. Die Breite wird durch die Anzahl der Spalten definiert. Diese wird für jede Bildschirmgröße (i. d. R. groß, mittel, klein) separat festgelegt. So entsteht ein responsives Layout, in welchem sich die Formular-Elemente der jeweiligen Bildschirmgröße anpassen.

Abb.: Schema eines Formulars im Grid-Layout

Jedes Formular in KIX kann aus einer oder mehreren Seiten bestehen. Sind mehrere Seiten definiert, enthält der Seitenkopf einen Slider, mit dem der Benutzer zwischen den Seiten wechseln kann.

Abb.: Formularkopf mit Seiten-Slider

Jede Seite kann eine oder mehrere Formulargruppen enthalten. Die Formulargruppen dienen dem Gruppieren der Formularfelder z. B. nach Thematik.

Abb.: Eine Seite mit 2 Formulargruppen - verteilt auf 2 Zeilen

Jede Seite kann beliebig viele Zeilen enthalten, in denen die Formulargruppen innerhalb von Containern angeordnet werden. Jede Zeile wird mit einem Container erstellt, der zunächst die gesamte Breite von 12 Spalten einnimmt. Ein Container kann aber auch nur einen Teil der verfügbaren Breite einnehmen (mindestens 3 Spalten). Nehmen die Container nur einen Teil der verfügbaren Breite ein, so werden diese nebeneinander angeordnet (in Summe max. 12 Spalten). Das heißt, wenn Sie 3 Formulargruppen in einer Zeile haben möchten, müssen die Container jeweils 4 Spalten einnehmen.

Abb.: 3 Formulargruppen mit je 4 Spalten und 1 Formulargruppe mit 12 Spalten

Jede Formulargruppe kann beliebig viele Zeilen enthalten. Innerhalb der Zeilen befinden sich Container in denen die Eingabe- und Auswahlfelder platziert werden. Jeder Container kann ein oder mehrere Eingabe- und Auswahlfelder beinhalten. Jeder Container besitzt eine definierte Spaltenbreite. Er kann entweder die gesamte Breite (12 Spalten) oder nur einen Teil der Breite (z. B. 6 Spalten) einnehmen. Nehmen die Container nur einen Teil der Breite ein, so werden diese nebeneinander angeordnet (in Summe max. 12 Spalten).

Abb.: 3 Container mit je 4 Spalten in einer 12-spaltigen Formulargruppe

Formulargruppen und Felder werden immer von Links nach Rechts aufgefüllt. Passt eine Formulargruppe nicht mehr in eine Zeile, weil sie mehr Spalten benötigt, so wird diese umgebrochen und auf einer neuen Zeile angezeigt.

Für die responsive Darstellung gibt es 3 Breakpoints (s. auch: https://getbootstrap.com/docs/5.3/layout/breakpoints/).