Doc Summary
Willkommen bei deinem Formular-Editor! Mit diesem Werkzeug kannst du digitale Formulare erstellen, ohne eine einzige Zeile Code schreiben zu müssen. #
Dieses Handbuch erklärt dir Schritt für Schritt alle 16 verfügbaren Bausteine, ihre Einstellungen und die strengen Regeln im Hintergrund.
1. Die Grundstruktur eines Formulars #
Jedes Formular besteht beim Import aus zwei Bereichen:
- Das Formular (
form): Der Rahmen. Hier legst du denNamenund dieBeschreibungdes Formulars fest. - Die Felder (
fields): Die eigentlichen Bausteine (Fragen, Knöpfe, Texte), die untereinander dargestellt werden.
2. Alle 16 Bausteine (Feldtypen) und ihre Einstellungen #
Jedes Feld benötigt einen festgelegten Typ. Je nach Typ kannst du in den Einstellungen (settings) feine Anpassungen vornehmen.
Text- & Eingabefelder #
- 1. Einfaches Textfeld (
textfield)- Für kurze Antworten (z. B. Namen, Nummern).
- Mögliche Formate: Keine Prüfung (
none), E-Mail-Adresse (email), Telefonnummer im internationalen Format (e164), reine Zahl (number), 4-stellige Postleitzahl (postcode_4), 5-stellige Postleitzahl (postcode_5). - Zusatz-Einstellungen: Maximale Textlänge (
maxLength), Platzhaltertext (placeholder), Hilfetext (help).
- 2. Großes Textfeld (
textarea)- Für längere Fließtexte, Berichte oder ausführliche Kommentare.
- Zusatz-Einstellungen: Maximale Textlänge (
maxLength), Platzhaltertext (placeholder), Hilfetext (help).
- 3. Häkchen (
checkbox)- Ein einfaches Kästchen zum Anklicken (z. B. „Gelesen und verstanden“).
- Zusatz-Einstellungen: Standardmäßig bereits angehakt? (
defaultChecked), Hilfetext (help).
Auswahllisten & Dropdowns #
- 4. Einfache Auswahl (
dropdown)- Der Nutzer wählt einen Eintrag aus einer Liste.
- Optionen: Du kannst feste Auswahlwerte (
options) hinterlegen.
- 5. Mehrfachauswahl (
multiselect)- Der Nutzer kann mehrere Haken in einer Liste setzen.
- Zusatz-Einstellungen: Maximale Anzahl an erlaubten Haken (
maxSelections).
Schnittstellen-Tipp für Dropdown & Multiselect: Du kannst diese Listen mit unseren Systemdaten verknüpfen (
datasource).
none: Du tippst die Optionen selbst ein.assigned_objects: Zeigt automatisch alle dem Nutzer zugewiesenen Objekte/Einsatzorte an.assigned_employees_by_object: Zeigt automatisch alle Mitarbeiter an, die für das gewählte Objekt zuständig sind. (Hierzu muss zwingend das FelddatasourceObjectFieldausgefüllt sein).- Weitere Einstellungen: Liste durchsuchbar machen (
searchable), Nutzer eigene Werte eintippen lassen (creatable), doppelte Werte verhindern (uniqueValues).
Datum & Spezial-Eingaben #
- 6. Datum (
date)- Für Termine, Fristen oder Geburtsdaten.
- Format: Nur das Jahr (
year), Monat & Jahr (month) oder das exakte Datum (date). - Vorauswahl (
prefillDate): Entweder leer lassen (none) oder automatisch mit dem heutigen Tag vorausfüllen (today).
- 7. Drehknopf / Regler (
knob)- Ein visueller Regler zum Einstellen von Zahlenwerten (z. B. für Bewertungen oder Prozentangaben).
- Zusatz-Einstellungen: Mindestwert (
min), Maximalwert (max), Schrittweite beim Drehen (step), optische Größe (size), Farbmodus (colorMode– entweder Standardprimaryoder als Tacho-Anzeigegauge).
- 8. Formular-Verknüpfung (
submission_ref)- Verweist auf eine bereits abgesendete Antwort eines anderen Formulars.
- Zusatz-Einstellungen: Erlaubte Formular-ID (
allowedFormId– muss eine positive Zahl sein).
Medien, Nachweise & Checklisten #
- 9. Bild hochladen (
image)- Aktiviert die Kamera oder den Foto-Upload des Smartphones (z. B. für Mängel- oder Erfolgsfotos).
- Zusatz-Einstellungen: Maximale erlaubte Dateigröße (
maxFileSize).
- 10. Unterschrift (
signature)- Ein digitales Unterschriftenfeld für Kunden oder Mitarbeiter, das direkt auf dem Display mit dem Finger unterschrieben wird.
- Zusatz-Einstellungen: Genauigkeit der Erfassung (
accuracy).
- 11. Prüfliste (
checkpoint)- Eine strukturierte Checkliste für Kontrollgänge oder Qualitätsprüfungen.
- Zusatz-Einstellungen: Name der Checklisten-Punkte (
itemName), die Liste der Punkte selbst (items), Erlaubnis für den Nutzer, spontan eigene Punkte hinzuzufügen (allowCustomItems).
Layout, Struktur & Optik (Keine Eingabe möglich) #
Diese Felder dienen rein der visuellen Führung des Nutzers. Sie können nicht vom Nutzer ausgefüllt werden.
- 12. Titel (
title)- Überschriften zur Strukturierung des Formulars.
- Zusatz-Einstellungen: Schriftgröße von riesig bis klein (
fontSize:h1bish6), Ausrichtung (align:left,center,right).
- 13. Hinweistext (
hint)- Ein farbig hervorgehobener Infokasten für wichtige Anweisungen.
- Dringlichkeit (
severity): Information (blau:info), Warnung (gelb:warn), Fehler (rot:error), Erfolg (grün:success).
- 14. Trennlinie (
divider)- Eine einfache, dezente Linie, um Abschnitte visuell voneinander zu trennen. Besitzt keine weiteren Einstellungen.
Container & Gruppen (Verschachtelungen) #
Diese Elemente dienen als „Körbe“, um andere Felder hineinzustecken.
- 15. Ordner / Bereich (
container)- Fasst thematisch zusammengehörige Felder zusammen.
- Zusatz-Einstellungen: Ein-/ausklappbar machen (
collapsable), standardmäßig bei Start eingeklappt lassen (collapsedByDefault), Inhalte verstecken, wenn eingeklappt (hideIfCollapsed).
- 16. Wiederholungsgruppe (
repeatingGroup)- Ein mächtiges Werkzeug, wenn der Nutzer einen Block aus Feldern mehrfach ausfüllen muss (z. B. „Mängel aufnehmen“ – pro Mangel ein Block mit Textfeld und Foto). Der Nutzer kann per Knopfdruck beliebig viele Blöcke hinzufügen.
- Zusatz-Einstellungen: Mindestanzahl Wiederholungen (
minRepeat), Maximalanzahl (maxRepeat), Beschriftung des „Hinzufügen“-Knopfs (addButtonText), Beschriftung des „Löschen“-Knopfs (removeButtonText), Titel des einzelnen Eintrags (itemTitle).
3. Sonstiges #
Pflichtfelder (required) #
- Nur Felder, in die der Nutzer aktiv etwas eintragen kann, dürfen Pflichtfelder sein (
required: true). - Wichtig: Titel, Hinweistexte, Trennlinien oder Container dürfen niemals als Pflichtfeld markiert werden.
Eltern-Kind-Beziehung (parentFieldId) #
Wenn du ein Feld innerhalb eines Containers oder einer Wiederholungsgruppe platzierst, musst du bei diesem „Kind-Feld“ im Feld parentFieldId die genaue fieldId des übergeordneten Containers eintragen. Nur so weiß das System, dass das Feld im Ordner liegt.
4. Formular mit KI erstellen #
Keine Lust alles händisch zu erstellen? Hier ist ein Prompt, den du für deine lieblings-KI nutzen kann, damit diese dir ein Formular erstellt, das du importieren kannst.
#
Du bist ein Generator fuer importierbare Formular-Definitionen.
Deine Aufgabe:
Erstelle aus meinen Anforderungen ein JSON fuer den Formular-Import. Das Ergebnis muss direkt zum bestehenden Importformat passen und sich strikt an die Field Config halten. Wenn Informationen fehlen, stelle zuerst kurze Rueckfragen. Sobald genug Informationen vorliegen, gib ausschliesslich JSON aus.
Ausgabeformat:
{
"form": {
"name": "string",
"description": "string",
"config": null
},
"fields": [
{
"fieldId": 1,
"fieldKey": "kundennummer01",
"label": "Anzeigename",
"fieldType": "textfield",
"required": true,
"visible": true,
"editable": true,
"defaultValue": null,
"pos": 1,
"parentFieldId": null,
"settings": {},
"options": []
}
],
"template": {
"fieldConfigVersion": 9
}
}
Wichtige Regeln:
- Gib nur JSON aus, ohne Markdown, ohne Kommentare, ohne Erklaerung.
- `form` und `fields` sind Pflicht.
- `fieldId` und `pos` muessen eindeutig und fortlaufend sein.
- `fieldKey` muss eindeutig sein und als technischer Key funktionieren.
- `fieldKey` darf ausschliesslich Kleinbuchstaben `a-z` und Ziffern `0-9` enthalten.
- `fieldKey` darf keine Unterstriche, Bindestriche, Leerzeichen, Umlaute oder Grossbuchstaben enthalten.
- Beispiele fuer gueltige `fieldKey`-Werte: `kundennummer`, `objekt1`, `einsatzdatum2026`.
- `parentFieldId` nur setzen, wenn ein Feld innerhalb von `container` oder `repeatingGroup` liegt.
- `options` nur bei Feldtypen verwenden, die Optionen unterstuetzen.
- Keine ungueltigen Zusatzfelder erfinden.
- `settings` duerfen nur Keys enthalten, die fuer den jeweiligen Feldtyp erlaubt sind.
- Bei Select-Settings muessen exakt die erlaubten `value`-Werte verwendet werden.
Erlaubte Feldtypen mit Settings:
1. `textfield`
- settings: `format`, `maxLength`, `placeholder`, `help`
- `format`: `none`, `email`, `e164`, `number`, `postcode_4`, `postcode_5`
2. `textarea`
- settings: `maxLength`, `placeholder`, `help`
3. `dropdown`
- settings: `placeholder`, `searchable`, `creatable`, `uniqueValues`, `help`, `datasource`, `datasourceObjectField`
- `datasource`: `none`, `assigned_objects`, `assigned_employees_by_object`
- hat `options`
4. `date`
- settings: `format`, `prefillDate`, `placeholder`, `help`
- `format`: `date`, `month`, `year`
- `prefillDate`: `none`, `today`
5. `multiselect`
- settings: `placeholder`, `searchable`, `maxSelections`, `uniqueValues`, `help`, `datasource`, `datasourceObjectField`
- `datasource`: `none`, `assigned_objects`, `assigned_employees_by_object`
- hat `options`
6. `image`
- settings: `maxFileSize`
7. `title`
- settings: `fontSize`, `align`
- `fontSize`: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
- `align`: `left`, `center`, `right`
8. `hint`
- settings: `severity`
- `severity`: `info`, `warn`, `error`, `success`
9. `divider`
- keine settings
10. `signature`
- settings: `accuracy`
11. `repeatingGroup`
- settings: `minRepeat`, `maxRepeat`, `addButtonText`, `removeButtonText`, `itemTitle`, `requiredErrorMessage`
- kann Kind-Felder enthalten
12. `container`
- settings: `collapsable`, `collapsedByDefault`, `hideIfCollapsed`
- kann Kind-Felder enthalten
13. `checkbox`
- settings: `defaultChecked`, `help`
14. `knob`
- settings: `min`, `max`, `step`, `size`, `colorMode`, `help`
- `colorMode`: `primary`, `gauge`
15. `submission_ref`
- settings: `allowedFormId`, `help`
- `allowedFormId` muss eine positive Ganzzahl sein
16. `checkpoint`
- settings: `allowCustomItems`, `help`, `itemName`, `items`
- hat `options`
Weitere Fachregeln:
- UI-only Felder wie `title`, `hint`, `divider`, `container` nicht als Pflichtfeld modellieren.
- Normale Eingabefelder standardmaessig mit `editable: true` anlegen.
- Anzeigeelemente standardmaessig mit `editable: false` anlegen.
- `visible` standardmaessig auf `true` setzen.
- `defaultValue` nur setzen, wenn fachlich sinnvoll, sonst `null`.
- `datasourceObjectField` nur setzen, wenn `datasource = assigned_employees_by_object`.
- Bei verschachtelten Feldern muss `parentFieldId` auf die `fieldId` des Elternelements zeigen.
Arbeitsweise:
1. Pruefe, ob meine Anforderungen vollstaendig sind.
2. Stelle bei Luecken kurze Rueckfragen.
3. Gib danach ausschliesslich das finale JSON im oben definierten Format aus.
Meine Anforderungen:
[Hier die Formularanforderungen einfuegen]
Den Prompt in deine lieblings KI einfügen und ganz unten deine Anforderungen an das Formular mitgeben.
Beispiel:
Meine Anforderungen:
Ich möchte ein Verbandsbuch Formular machen. Mit Objekt, Reinigungskraft, Was passiert ist, was gemacht wurde.
Als Ergebnis bekommst du so etwas zurück:
Das einfach lokal am PC abspeichern und dann bei der Erstellung eines neuen Formulares aus „Vorlage auswählen“ und die zuvor gespeicherte .json Datei hochladen. Fertig!
