Konfiguration von Formularen
Zur visuellen Gestaltung von Formularen steht Ihnen ein Formulardesigner zur Verfügung. Mit diesem können Sie die Eingabefelder in Aktionen oder Vorlagen einbinden, diese strukturiert gruppieren und das responsive Verhalten des Formulars steuern.
Alternativ können Sie zur Formulargestaltung auch den Expertenmodus nutzen, in dem die vollständige Formularkonfiguration als JSON-String abgebildet ist.
Warnung
Verwenden Sie den Expertenmodus nur, wenn Sie ausreichende Fachkenntnisse über die KIX-Struktur und über JSON besitzen. Insbesondere, wenn Sie Änderungen an den Standardformularen vornehmen. Im Fehlerfall könnten die Formulare nicht mehr bedienbar sein.
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/).
sm - small - für kleine Displays (z. B. Smartphone)
md - medium - für mittlere Displays (z. B. Tablet)
lg - large - für große Displays (z. B. PC)
In neu angelegten Formularen startet der Formulardesigner mit einer leeren Formularseite und einer noch nicht zugeordneten Formulargruppe "Standard". Wenn Sie ein bereits existierendes Formular bearbeiten, sind die entsprechenden Felder und Formularseiten im Formulardesigner enthalten, sodass sie nach Bedarf geändert werden können.
 Abb.: Überblick zu den Funktionen des Formulardesigners | |
|
|
Optional: Klicken Sie (ggf. mehrfach) auf , wenn Sie dem Formular weitere Seiten hinzufügen möchten.
Navigieren Sie mit den blauen Punkt- oder Pfeilschaltflächen zu der Formularseite, die Sie bearbeiten möchten.
Klicken Sie (ggf. mehrfach) auf , um der Formularseite weitere Formulargruppen hinzuzufügen.
Die Formulargruppen dienen dazu, die Eingabe- und Auswahlfelder aufzunehmen.
Die Formulargruppen werden zunächst untereinander auf der Formularseite angeordnet und nehmen die gesamte Breite ein. In den Seiteneigenschaften können Sie diese in Größe und Anordnung anpassen.
Klicken Sie auf , um die Seiteneigenschaften zu öffnen und zu bearbeiten.
Klicken Sie nach dem Speichern der Seiteneigenschaften auf , damit das Formular gespeichert wird..
Nach Klick auf öffnen sich die Seiteneigenschaften, wo Sie die Grundeinstellungen für die Formularseite und die Anordnung der Formulargruppen vornehmen können.
Register "Allgemein"
Hier werden die Grundinformationen der Seite hinterlegt.
Parameter | Beschreibung |
|---|---|
Name | Beschriftung der Formularseite. Der Name wird im Formular oberhalb der Navigationsschaltflächen angezeigt. Achten Sie daher auf eine selbsterklärende Beschriftung. |
Gültig | Wenn aktiv: Die Formularseite ist gültig und kann verwendet werden. Wenn inaktiv: Die Formularseite ist ungültig und kann nicht genutzt werden. |
Beschreibung | Optional: Editor zum Hinterlegen von Notizen zur Formularseite (z. B. Verwendungszweck, Einsatzszenarien u.a.m.) Die Beschreibung wird im Kopfbereich der Seite angezeigt (unterhalb der Navigationsschaltflächen). |
Register "Layout"
Hier erfolgt die Anordnung der Formulargruppen auf der Seite. Die Konfiguration der Formulargruppen erfolgt gesondert.
Die Formulargruppen können auf eine oder mehrere Zeilen verteilt werden. Jede Formularseite kann beliebig viele Zeilen enthalten.
Im Bereich Nicht zugeordnete Gruppen finden Sie alle Formulargruppen, die Sie der Formularseite hinzugefügt, aber noch keiner Zeile zugeordnet haben.
Klicken Sie (ggf. mehrfach) auf , um eine oder mehrere Zeilen hinzuzufügen.
Jede Zeile wird mit einem initialen Container erstellt. Diesem können Sie die Formulargruppen zuordnen.
Der Container nimmt zunächst die gesamte verfügbare Breite von 12 Spalten ein. Durch Verschieben des Schiebereglers können Sie die Spaltenbreite reduzieren und somit Platz für weitere Container innerhalb der Zeile schaffen.
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.
Optional: Klicken Sie auf die Plus-Schaltfläche, um innerhalb einer Zeile einen zusätzlichen Container hinzuzufügen.
Verwenden Sie den Schieberegler, um die Spaltenbreite so anzupassen, dass die Container nebeneinander angeordnet sind (falls gewünscht).
Optional: Klicken Sie auf das Papierkorb-Icon, wenn Sie Zeile oder einen Container entfernen möchten.
Ordnen Sie die noch nicht zugeordneten Gruppen den Zeilen und Spalten zu. Ziehen Sie dazu die Gruppen via Drag & Drop an die entsprechende Stelle.
Abb.: Seitenkonfiguration
Abb.: Konfigurierte Seite
Tipp
Sie können die Formulargruppen und Zeilen via Drag & Drop verschieben. Ziehen Sie sie dazu mit gedrückter linker Maustaste an die gewünschte Position.
Klicken Sie nach Bearbeiten der Eigenschaften auf , damit die Änderungen gespeichert werden.
Beim Löschen einer Formularseite werden auch die dort eingebundenen Formulargruppen und -felder aus dem Formular entfernt.
Wechseln Sie auf die zu löschende Formularseite.
Klicken Sie dazu im Seitenkopf auf den entsprechenden blauen Punkt oder nutzen Sie die Pfeilschaltflächen.
Klicken Sie auf , um die Seiteneigenschaften zu öffnen.
Klicken Sie in den Seiteneigenschaften auf das Papierkorb-Icon.
Die Seite wird sofort gelöscht. Sie erhalten keine gesonderte Abfrage zur Bestätigung des Vorgangs.
Klicken Sie in der zu bearbeitenden Formulargruppe auf 
, damit die Gruppeneigenschaften zur Bearbeitung geöffnet werden.
Hier hinterlegen Sie die allgemeinen Informationen zur Formulargruppe.
Parameter | Beschreibung |
|---|---|
Name | Benennung der Formulargruppe. Der Name wird im Formular an der Gruppe angezeigt. Achten Sie daher auf eine selbsterklärende Benennung. |
Beschreibung | Optional: Im Editor können Sie weiterführende Informationen zur Formulargruppe in Form eines formatierten Textes hinterlegen. Die Beschreibung wird innerhalb der Formulargruppe im Formular angezeigt. |
Gruppen Layout | Definieren Sie hier die Breakpoints in Bezug auf die Bildschirmgröße. Sie steuern damit das responsive Verhalten der Gruppe. Geben Sie an, wieviel Spalten die Gruppe bei welcher Bildschirmgröße einnehmen soll.
Nehmen die Gruppen nur einen Teil der Breite ein, so werden diese nebeneinander angeordnet (in Summe max. 12 Spalten). Beispiel:
Hinweise zu den Breakpoints finden Sie unter https://getbootstrap.com/docs/5.3/layout/breakpoints/). |
Hier erfolgt die Anordnung der Formularfelder in der Formulargruppe sowie die Anordnung der Formulargruppe im Formular.
Im Bereich Nicht zugeordnedte Felder finden Sie alle Formularfelder, die Sie der Formulargruppe hinzugefügt, aber noch keiner Zeile zugeordnet haben.
Abb.: Noch nicht zugeordnete Formularfelder in einer Gruppe
Klicken Sie (ggf. mehrfach) auf , um eine oder mehrere Zeilen hinzuzufügen.
Jede Zeile wird mit einem initialen Container erstellt. Diesem können Sie die Formularfelder zuordnen.
Der Container nimmt zunächst die gesamte verfügbare Breite von 12 Spalten ein. Durch Verschieben des Schiebereglers können Sie die Spaltenbreite reduzieren und somit Platz für weitere Container innerhalb der Zeile schaffen.
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 Formularfelder in einer Zeile haben möchten, müssen die Container jeweils 4 Spalten einnehmen.
Optional: Klicken Sie auf die Plus-Schaltfläche, um innerhalb einer Zeile einen zusätzlichen Container hinzuzufügen.
Verwenden Sie den Schieberegler, um die Spaltenbreite so anzupassen, dass die Container nebeneinander angeordnet sind (falls gewünscht).
Optional: Klicken Sie auf das Papierkorb-Icon, wenn Sie Zeile oder einen Container entfernen möchten.
Ordnen Sie die unter Nicht zugeordnete FelderNich aufgeführten Formularfelder den Zeilen und Spalten zu. Ziehen Sie dazu die Formularfelder via Drag & Drop an die entsprechende Stelle.
Abb.: Gruppenkonfiguration
Abb.: Konfigurierte Gruppe
Tipp
Sie können die Formularfelder und Zeilen via Drag & Drop verschieben. Ziehen Sie sie dazu mit gedrückter linker Maustaste an die gewünschte Position.
Klicken Sie nach Bearbeiten der Eigenschaften auf , damit die Änderungen gespeichert werden.
Beim Löschen einer Formulargruppe werden die darin eingebundenen Formularfelder wieder freigegeben. Sie werden wieder unter Nicht zugeordnete Felder aufgeführt, sodass Sie sie anderweitig ins Formular einbinden können.
Die Änderungen am Formular haben keine Auswirkungen auf die Daten bestehender Tickets.
Klicken Sie in der zu löschenden Formulargruppe auf
.Die Gruppeneigenschaften werden geöffnet.
Klicken Sie in den Gruppeneigenschaften auf das Papierkorb-Icon.
Die Gruppe wird sofort gelöscht. Sie erhalten keine gesonderte Abfrage zur Bestätigung des Vorgangs.
Klicken Sie auf das Plus-Symbol der Formulargruppe, der Sie die Formularfelder hinzufügen möchten
.Die Feldeigenschaften werden geöffnet.
Wählen Sie unter Eigenschaft das zu integrierende Formularfeld aus
Hinterlegen Sie weitere Feldeigenschaften nach Erfordernis.
Übernehmen Sie das Feld mit Klick auf
Das Formularfeld wird der Formulargruppe als Nicht zugeordnetes Feld hinzugefügt.
Klicken Sie in der gleichen Formulargruppe auf
Die Gruppeneigenschaften werden zur Bearbeitung geöffnet.
Optional: Hinterlegen Sie im Register Allgemein die allgemeinen Informationen zur Formulargruppe, sofern noch nicht geschehen.
Wechseln Sie ins Register Layout, um das Formularfeld in der Formulargruppe zu platzieren.
Gehen Sie dazu vor, wie unter Register "Layout" beschrieben.
Hinweis
Per Workflow Rule hinzugefügte Felder werden wie Nicht zugeordnete Felder behandelt und unterhalb aller anderen Gruppen angeordnet.
Gehen Sie wie folgt vor, wenn Sie Felder per Workflow Rule aktivieren möchten und diese Felder an bestimmten Positionen im Formuluar eingeblendet werden sollen:
Konfigurieren Sie die Felder ins Formular und ordnen Sie die Felder im Layout an.
Setzen Sie die Felder inaktiv.
Mittels Workflow Rule können Sie die Felder jederzeit aktivieren und mit Werten belegen.
Feldeigenschaften
Hinweis: Die geltenden Einstellungen können bspw. durch Workflow Rules modifiziert werden.
Parameter | Beschreibung | |
|---|---|---|
Group | Definiert die Gruppe, der das Feld zugeordnet ist | |
Eigenschaft | Auswahl des zu integrierenden Formularfeldes. Zur Auswahl stehen alle im System angelegten Felder und Dynamischen Felder, welche noch nicht im Formular enthalten sind. | |
Operator | Definiert das Verhalten des Feldes im Formular Der Operator wird im Formulardesigner am Feld angezeigt.
Hinweise zu relativen Zeitangaben: Dynamische Felder vom Typ Datum bzw. Datum/Zeit können mit einer relativen Initialisierung versehen werden. Folgende Optionen sind möglich:
Das Verhalten des Dynamischen Felds ist wie zuvor beschrieben, jedoch erfolgen die Angaben jeweils als relativer Zeitwert (z. B. 10 Minuten). Verwendbar bspw. für Wartezeitpunkte mit relativen Zeitdifferenzen oder Tickets mit relativen Zeitpunkten für Plan-Beginn/Plan-Ende. In der Konfiguration selbst muss somit kein Wartestatus hinterlegt sein. Basierend auf dem Zeitpunkt der Verwendung wird der angegebene Zeitwert zur aktuellen Zeit addiert und als Datum gesetzt (bei jedem Aufruf der Aktion erneut). Die Verwendung von KIX Platzhaltern wird unterstützt, sodass bspw. eine in einem Dynamischen Feld angegebene Zahl als Zeitwert ausgelesen und verwendet werden kann. Wenn kein Wartezeitpunkte vorgegeben ist, greift die Einstellung im SysConfig-Schlüssel . | |
Gültig |
| |
Pflichtfeld |
| |
Feldbeschreibung | Label, welches dem Formularfeld vorangestellt wird. Das Label kennzeichnet die Informationen, die im Formularfeld vom Anwender einzutragen sind. Achten Sie daher auf eine aussagekräftige Kurzbezeichnung. | |
Hinweis | Optionaler Hinweistext, der am Formularfeld angezeigt wird.
Dieser kann bspw. nähere Informationen darüber enthalten, welche Informationen im Formularfeld einzutragen sind. Wenn ein Hinweistext angegeben ist, wird am Feld ein Fragezeichen-Symbol angezeigt. Der Hinweistext wird nach Klick auf das Fragzeichen angezeigt. Die initialen Felder enthalten bereits lokalisierte Hinweistexte, welche über das Weblate bereitgestellt werden. Bei Bedarf können Sie diese durch Ihren individuellen Text ersetzen. Im Menü können Sie die Pattern für die Übersetzung Ihrer eigenen Texte selbst pflegen. | |
Beschreibung | Optional: Im Editor können Sie weiterführende Informationen zum Formularfeld in Form eines formatierten Textes hinterlegen. Die Beschreibung wird am Formularfeld angezeigt.
| |
Field Layout | Geben Sie an, wieviel Spalten das Feld bei welcher Bildschirmgröße einnehmen soll.
Nehmen die Felder nur einen Teil der Breite ein, so werden diese nebeneinander angeordnet (in Summe max. 12 Spalten). Beispiel
| |
Feldoptionen | Sie können ein Array weiterer Konfigurationsoptionen für das Feld im JSON-Format angeben, z. B. spezifische Ladeoptionen, den zu ladenden Objekttyp usw.
Setzen Sie die Feldoptionen in eckige Klammern [
{
"option": "SHOW_NEW_CONTACT",
"value": 1
},
{
"option": "SHOW_INVALID",
"value": 0
}
] |
Sie können Formularfeldern im Voraus Werte zuweisen, sodass das Formular bereits mit diesen Werten geladen wird. Den Agenten wird somit wiederkehrende Schreibarbeit abgenommen. Die Werte können vom Agent jederzeit geändert werden.
Das Vorbelegen der Formularfelder mit Werten erfolgt im Formulardesigner in der Seitenansicht direkt im entsprechenden Formularfeld.
Stellen Sie dazu sicher, dass das Formular über mindestens eine Seite und mindestens eine Formulargruppe verfügt und dass der Formulargruppe mindestens ein Formularfeld zugeordnet ist.
Wählen Sie in Auswahlfeldern den oder die Werte aus, mit denen das Auswahlfeld vorbelegt sein soll. Tragen Sie in Textfeldern den Text oder den Wert ein, welcher im Feld stehen soll. Hinterlegen Sie in Tabellen oder Checklisten die Werte, mit denen diese geladen werden.
Abb.: Feld Betroffenenes Asset mit einem Wert vorbelegen
Sie können für jedes Formularfeld ganz spezifische Einstellungen vornehmen.
Klicken Sie dazu am entsprechenden Formularfeld auf . Die Feldeigenschaften werden geöffnet. Sie enthalten bereits die am Formularfeld hinterlegten Eigenschaften. Sie können nun die Feldeigenschaften gezielt ändern. Speichern Sie abschließend Ihre Änderungen mit Klick auf .
Weiterführende Hinweise zu den Feldeigenschaften: Formularfelder einer Gruppe hinzufügen).
Sie können nicht benötigte Formularfelder gezielt aus dem Formular löschen. Die Formularfelder werden wieder frei, um sie anderweitig einzubinden.
Klicken Sie am zu löschenden Formularfeld auf
.Die Feldeigenschaften werden geöffnet.
Klicken Sie in den Feldeigenschaften auf das Papierkorb-Icon.
Das Formularfeld wird sofort gelöscht. Sie erhalten keine gesonderte Abfrage zur Bestätigung des Vorgangs.
Warnung
Verwenden Sie den Expertenmodus nur, wenn Sie ausreichende Fachkenntnisse über die KIX-Struktur und über JSON besitzen. Insbesondere, wenn Sie Änderungen an den Standardformularen vornehmen. Im Fehlerfall könnten die Formulare nicht mehr bedienbar sein.
Der JSON-Editor bildet die vollständige Konfiguration des Formulars als JSON-Struktur ab. Sollten Sie das Formular mittels Formulardesigner erstellt haben, so wird auch diese Struktur im JSON-Editor abgebildet.
Konfiguriert werden können das Layout des Formulars (formLayout) und die Seiten (pages) nebst Formularfeldern.
Der Parameter formLayout enthält die Grund-Konfiguration (Layout) des Formulars. Konfiguriert werden können:
Parameter | Beschreibung |
|---|---|
fields | Für konkrete Felder kann hier angegeben werden, wie viele Spalten das Feld einnehmen soll. Kann verwendet werden, um ein zu großes Feld kleiner darzustellen |
fontSize | Definiert die Schriftgröße im Formular
Standard: sm |
groupLayout | Optional: Definiert, wie viele Spalten eine Gruppe einnehmen soll (auch responsive) Für jede Gruppe existiert ein Konfigurationsblock, der von geschweiften Klammern umschlossen ist. "groupLayout": [
{
"groupId": "1745929386952",
"colSM": "12",
"colMD": "4",
"colLG": "4",
"fieldLayout": [],
"rowLayout": [
[
{
"formObjectIds": [
"ticket-new-form-field-organisation",
"ticket-new-form-field-contact"
],
"colLG": 12
}
]
]
},
{...}
]
Eine Gruppe nimmt initial eine Breite von 12 Spalten ein. Sie können abweichend andere Breiten für unterschiedliche Displaygrößen angeben:
|
rowLayout | Optional: Gibt an, wie viele Spalten eine Zeile haben soll und welche Gruppen in den Spalten angezeigt werden sollen.
Hinweis: Die Gruppen beziehen ihre eigene Größe aus der Beispiel "rowLayout":[
{
"pageId": "1745929366718",
"rows": []
},
{
"pageId": "1745929438375",
"rows": [
[
{
"formObjectIds": [
"1745932098287",
"1745932154961"
],
"colLG": 4
},
{
"formObjectIds": [
"1745932151176"
],
"colLG": 4
},
{
"formObjectIds": [
"1745932109476"
],
"colLG": 4
}
],
[
{
"formObjectIds": [
"1745932105291",
"1745932090395"
]
}
]
]
},
{
"pageId": "1745929352880",
"rows": []
}
] |
Im Parameter pages werden die einzelnen Seiten des Formulars konfiguriert. Für jede Seite existiert ein Konfigurationsblock, der von geschweiften Klammern umschlossen ist.
Konfiguriert werden können:
Parameter | Beschreibung |
|---|---|
groups | Definiert die Formulargruppen auf einer Seite. Sie können mehrere Gruppen konfigurieren. Jede Gruppe ist von geschweiften Klammern umschlossen. |
formFields | Definiert die Formularfelder in einer Gruppe. Sie können mehrere Formularfelder konfigurieren. Jedes Formularfeld ist von geschweiften Klammern umschlossen. Den Formularfeldern können spezifische Parameter und Werte mitgegeben werden. Nachfolgend eine Auswahl:
|