Forms Builder

Der Forms Builder in CertHub besteht aus zwei Hauptkomponenten:

1. Die Builder-Oberfläche bietet eine leistungsstarke, aber intuitive Umgebung zur Erstellung strukturierter Eingabeformulare. Über eine Drag-and-Drop-Oberfläche können Formulare mit einer Vielzahl an Eingabetypen und Validierungsregeln erstellt werden.

2. Der Forms Playground ermöglicht es, erstellte Formulare in Echtzeit zu testen. Während das Formular ausgefüllt wird, zeigt der Playground, wie die Daten strukturiert und gespeichert werden – das hilft, die Beziehung zwischen Formularfeldern und der resultierenden Datenstruktur zu verstehen.

Builder-Oberfläche

Die Forms-Builder-Oberfläche mit markierten Hauptbereichen

Die Oberfläche besteht aus drei zentralen Bereichen:

1. Formular-Elemente Palette

   • Drag-and-Drop von Eingabekomponenten
   • Vielzahl an Eingabetypen
   • Layout- und Struktur-Elemente
   • Interaktive Steuerelemente

2. Formular-Canvas

   • Visuelle Formularansicht
   • Drag-and-Drop Anordnung
   • Echtzeit-Vorschau
   • Auswahl und Bearbeitung von Elementen

3. Eigenschafts-Panel

   • Dynamische Konfigurationsmöglichkeiten
   • Validierungsregeln
   • Bedingte Logik
   • Styling-Optionen

Verfügbare Formularelemente

Der Forms Builder bietet eine breite Auswahl an Eingabeelementen für unterschiedliche Anwendungsfälle:

Basis-Eingabeelemente

Elementtyp	Zweck	Hauptfunktionen
Textfeld	Einzeiliger Texteingabe	Zeichenbegrenzung, Platzhalter
Textbereich	Mehrzeilige Texteingabe	Automatische Größenanpassung
Zahl	Numerische Eingabe	Min/Max-Werte, Einheiten
Datum/Zeit	Datums- und Uhrzeitauswahl	Formate, Zeitzonen
Checkbox	Boolescher Wert	Standardwert, Beschriftung
Radio-Gruppe	Einzelauswahl	Horizontal/vertikal darstellbar
Auswahlfeld	Dropdown	Suchfunktion, Mehrfachauswahl möglich
Checkbox-Gruppe	Mehrfachauswahl	Layoutoptionen, min/max-Auswahl

Erweiterte Elemente

Elementtyp	Zweck	Hauptfunktionen
Tagliste	Mehrwertige Eingabe	Autovervollständigung, freie Tags
Gruppe	Felder zusammenfassen	Einklappbare Bereiche
Ausdrucksfeld	Berechnete Werte	Formelunterstützung
Bildanzeige	Bilder darstellen	Größe, Alternativtext

Layout-Elemente

Elementtyp	Zweck	Hauptfunktionen
Abstand	Vertikaler Abstand	Höhe konfigurierbar
Trenner	Visuelle Trennung	Stiloptionen

Konfiguration von Formularfeldern

Das Eigenschaften-Panel passt sich je nach ausgewähltem Element dynamisch an:

Allgemeine Eigenschaften

1. Basiseinstellungen

   • Feldbezeichnung
   • Hilfetext
   • Platzhalter
   • Key (für Zugriff in der Datenstruktur)
   • Pflichtfeld (Ja/Nein)

2. Validierungsregeln

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

3. Darstellung

   • Breite, Ausrichtung
   • Styling
   • Sichtbarkeitsregeln

Erweiterte Konfiguration

1. Bedingte Logik

   • Sichtbarkeit basierend auf anderen Feldern
   • Aktivierungsregeln
   • Werteabhängigkeiten
   • Eigene Ausdrücke

2. Datenverarbeitung

   • Standardwerte
   • Datenformatierung
   • Transformationsregeln

Forms Playground

Der Forms Playground ist eine interaktive Testumgebung zur Überprüfung von Formularverhalten und Datenstruktur. Er zeigt in Echtzeit, welche Daten erzeugt werden.

Forms Playground mit Formularvorschau und JSON-Datenausgabe

Hauptfunktionen

1. Live-Vorschau

   • Formularanzeige wie für Endnutzer
   • Direkte Interaktionstest
   • Bedingte Logik prüfen
   • Responsives Verhalten testen

2. Datenausgabe

   • Live-Ansicht der JSON-Struktur
   • Strukturierte Darstellung von Feldwerten
   • Einblick in verschachtelte Daten
   • Berechnete Werte nachvollziehen

Arbeiten mit Field Keys

Field Keys sind essenziell, da sie:

• Eindeutige Feld-IDs darstellen
• In Bedingungen verwendet werden
• Die Datenstruktur definieren
• Verbindungen zwischen Feldern ermöglichen

Benennung von Keys

• Aussagekräftige Namen verwenden (is_complaint statt checkbox1)
• Einheitliche Konventionen einhalten
• Sonderzeichen vermeiden
• Datenstruktur vorher überlegen

Testen von Logik

Beispielhafte JSON-Ausgabe:

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

Zeige Feld severity_level, wenn is_complaint == true

Setze description als Pflichtfeld, wenn severity_level > 2

Unterschiedliche Optionen bei complaint_type

:::tip[Komplexe Logik testen]

Bedingungen im Builder konfigurieren

Formulareingaben simulieren

Sichtbarkeit und Ausgabe prüfen

Grenzfälle testen
:::

Import und Export

Der Formular-Builder bietet Import- und Exportfunktionen, um Formulare zu sichern, weiterzugeben oder erneut zu verwenden:

Die Formular-Builder-Oberfläche mit hervorgehobenen Import- und Exportoptionen

Formulare exportieren

Beim Export eines Formulars erhältst du eine .form-Datei, die die komplette Definition des Formulars enthält – einschließlich aller Konfigurationen und Validierungen. Die Exportoption findest du im Aktionsmenü oben rechts.

Formulare importieren

So importierst du ein Formular:

1. Wähle im Aktionsmenü die Option Importieren
2. Lade eine .form-Datei hoch
3. Das Formular wird im Formular-Playground vollständig mit allen Einstellungen wiederhergestellt

Formulare teilen

Die .form-Datei enthält alle nötigen Informationen zur Wiederherstellung eines Formulars und eignet sich ideal für:

• Die Sicherung von Formular-Definitionen
• Das Teilen von Formularen zwischen verschiedenen Systemen
• Die Erstellung von Formularvorlagen