Forms Builder

Der Forms Builder besteht aus zwei Hauptkomponenten:

1. Die Haupt-Builder-Oberfläche bietet eine Umgebung zum Erstellen strukturierter Dateneingabeformulare. Mit einer Drag-and-Drop-Oberfläche kannst du schnell Eingabefelder mit einer Vielzahl von Eingabetypen und Validierungsregeln erstellen.

2. Der Forms Playground ermöglicht es dir, deine Eingabefelder zu testen und ihre Datenausgabe in Echtzeit zu sehen. Während du das Formular ausfüllst, kannst du beobachten, wie die Daten strukturiert und gespeichert werden, was es einfacher macht, die Beziehung zwischen Formularfeldern und ihrer resultierenden Datenstruktur zu verstehen.

Builder Interface

Die Forms Builder Oberfläche mit ihren Schlüsselkomponenten beschriftet

Die Builder-Oberfläche besteht aus drei Hauptbereichen:

1. Form Elements Palette

   • Drag-and-Drop Formularkomponenten
   • Breite Palette von Eingabetypen
   • Layout- und Strukturelemente
   • Interaktive Steuerelemente

2. Form Canvas

   • Visueller Formularlayout-Bereich
   • Drag-and-Drop-Anordnung
   • Echtzeit-Vorschau
   • Elementauswahl und -bearbeitung

3. Properties Panel

   • Dynamische Konfigurationsoptionen
   • Validierungsregeln
   • Bedingte Logik
   • Styling-Optionen

Verfügbare Formularelemente

Der Forms Builder bietet einen umfassenden Satz von Eingabeelementen, um verschiedene Datenerfassungsanforderungen zu bewältigen:

Grundlegende Eingabeelemente

Elementtyp	Zweck	Schlüsselfunktionen
Text Field	Einzeilige Texteingabe	Zeichenlimits, Muster, Platzhalter
Text Area	Mehrzeilige Texteingabe	Auto-Resize, Zeichenlimits
Number	Numerische Eingabe	Min/Max-Werte, Schrittgröße, Einheiten
Datetime	Datums- und Zeitauswahl	Datumsbereiche, Formate, Zeitzonenbehandlung
Checkbox	Boolean-Werte	Benutzerdefinierte Labels, Standardzustand
Radio Group	Einzelauswahl aus Optionen	Vertikales/horizontales Layout
Select	Dropdown-Auswahl	Suche, Multi-Select-Option
Checkbox Group	Mehrfachauswahl	Layout-Optionen, Min/Max-Auswahlen

Erweiterte Elemente

Elementtyp	Zweck	Schlüsselfunktionen
Taglist	Mehrfachwerteingabe	Benutzerdefinierte Tags, Autovervollständigung
Group	Verwandte Felder organisieren	Einklappbare Abschnitte
Expression Field	Berechnete Werte	Formelunterstützung
Image View	Bilder anzeigen	Größenkontrolle, Alt-Text

Layout-Elemente

Elementtyp	Zweck	Schlüsselfunktionen
Spacer	Vertikalen Abstand hinzufügen	Benutzerdefinierte Höhe
Separator	Visueller Trennstrich	Styling-Optionen

Formularelemente konfigurieren

Das Properties Panel passt sich an, um relevante Optionen basierend auf dem ausgewählten Element anzuzeigen:

Allgemeine Eigenschaften

1. Grundlegende Einstellungen

   • Feldlabel
   • Hilfetext
   • Platzhaltertext
   • key (Das ist der Schlüssel, der in der Datenstruktur verwendet wird, um auf die Daten des Feldes zuzugreifen)
   • Pflichtfeld-Toggle

2. Validierungsregeln

   • Eingabemuster
   • Min/Max-Werte
   • Zeichenlimits
   • Benutzerdefinierte Fehlermeldungen

3. Erscheinungsbild

   • Breiteneinstellungen
   • Ausrichtungsoptionen
   • Benutzerdefiniertes Styling
   • Sichtbarkeitsbedingungen

Erweiterte Konfiguration

1. Bedingte Logik

   • Ein-/Ausblenden basierend auf anderen Feldern
   • Aktivieren/Deaktivieren-Regeln
   • Wertabhängigkeiten
   • Benutzerdefinierte Ausdrücke

2. Datenverarbeitung

   • Standardwerte
   • Datentransformation
   • Formateinstellungen
   • Wertbeschränkungen

Forms Playground

Der Forms Playground ist eine leistungsstarke Testumgebung, die dir hilft, das Verhalten und die Datenstruktur deines Formulars zu verstehen und zu validieren. Er bietet Echtzeit-Feedback darüber, wie dein Formular funktionieren wird und welche Daten es generieren wird.

Der Forms Playground zeigt eine Formularvorschau zusammen mit seiner JSON-Datenausgabe

Schlüsselfunktionen

1. Live-Vorschau

   • Sieh dein Formular genau so, wie Benutzer es sehen werden
   • Teste Interaktionen in Echtzeit
   • Validiere bedingte Logik
   • Überprüfe responsives Verhalten

2. Datenausgabeansicht

   • Echtzeit JSON-Datenstruktur
   • Sieh, wie Formularwerte gespeichert werden
   • Verstehe verschachtelte Datenbeziehungen
   • Vorschau berechneter Werte

Mit Field Keys arbeiten

Field Keys sind entscheidend für die Formularfunktionalität, da sie:

• Als eindeutige Identifikatoren für jedes Feld dienen
• In bedingter Logik verwendet werden
• Die Struktur der Ausgabedaten definieren
• Feldbeziehungen ermöglichen

Key Benennung

Beim Setzen von Field Keys:

• Verwende beschreibende Namen (z.B. is_complaint statt checkbox1)
• Folge einer konsistenten Benennungskonvention
• Vermeide Sonderzeichen
• Berücksichtige die Datenstruktur, die du erstellen willst

Bedingte Logik testen

Der Playground ist besonders nützlich zum Testen von bedingtem Formularverhalten:

{
  "is_complaint": true,
  "complaint_type": "product",
  "severity_level": 3,
  "description": "Product malfunction"
}

Beispielbedingungen, die du testen kannst:

• Zeige Severity-Feld, wenn is_complaint == true
• Erfordere Beschreibung, wenn severity_level > 2
• Zeige verschiedene Optionen basierend auf complaint_type

Komplexe Logik testen

Verwende den Playground, um komplexe Bedingungen zu überprüfen:

1. Richte deine bedingte Logik ein
2. Fülle das Formular mit verschiedenen Testfällen aus
3. Überprüfe sowohl die Sichtbarkeitsregeln als auch die Datenausgabe
4. Prüfe Edge Cases und Kombinationen

Import und Export

Der Forms Builder bietet Import- und Export-Funktionalität, um dir zu helfen, deine Formulare zu sichern, zu teilen oder wiederzuverwenden:

Die Forms Builder Oberfläche mit hervorgehobenen Import- und Export-Optionen

Formulare exportieren

Wenn du ein Formular exportierst, erhältst du eine .form Datei, die die vollständige Formulardefinition enthält, einschließlich aller Konfigurationen und Validierungen. Du kannst auf Export-Optionen über das Actions-Menü in der oberen rechten Ecke zugreifen.

Formulare importieren

Um ein Formular zu importieren:

1. Verwende die Import-Option aus dem Actions-Menü
2. Wähle eine .form Datei
3. Das Formular wird im Forms Playground mit all seinen Konfigurationen neu erstellt

Formular teilen

Die .form Datei enthält alle Informationen, die benötigt werden, um das Formular neu zu erstellen, was es perfekt macht für:

• Sicherung von Formulardefinitionen
• Teilen von Formularen zwischen Systemen
• Erstellen von Formularvorlagen