From 7866751b82daf7c5cc3ec9330b511b69f421e621 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 15 Jun 2026 20:12:17 +0000 Subject: [PATCH] docs: ausgespielte Doku (public/documentation.html) auf aktuellen Stand Die in der App verlinkte und per gh-pages deployte Doku war noch alt - sie wird aus public/documentation.html gespeist, nicht aus docs/user_documentation.md (das PR #25 aktualisiert hatte). Inhalt jetzt deckungsgleich mit der Markdown- Doku: neue aufgabenorientierte Gliederung inkl. Module, Flow-Eigenschaften, Onboarding, Tastaturkuerzel, Validierungs-Indikator, Layout-Vorschau. Korrigiert: nur die drei real gerenderten Layouts; Boolean-Darstellungsarten, SingleSelection-RADIO/BUTTONGROUP, Number-Schrittgroesse und String- Platzhalter/Standardwert nicht mehr als Funktion beworben (laut Schema-Audit wirkungslos). Styling und Smooth-Scroll-Script unveraendert. Deploy: deploy.yml baut+deployt automatisch bei Push auf main nach gh-pages. --- public/documentation.html | 674 ++++++++++++++++---------------------- 1 file changed, 290 insertions(+), 384 deletions(-) diff --git a/public/documentation.html b/public/documentation.html index 9e5e613..c157c22 100644 --- a/public/documentation.html +++ b/public/documentation.html @@ -238,428 +238,334 @@

Flow UI Toolkit - Dokumentation

Inhaltsverzeichnis

-

Übersicht

-
- 🆕 Neu in Version 2.0 (Februar 2026): -
    -
  • Multi-Selektion & Gruppierung: Elemente können mit Strg+Klick ausgewählt und zu Gruppen zusammengefasst werden
    • -
  • Suchfunktion: Hierarchie-Baum mit Suche, Auto-Expand und Treffer-Highlighting
    • -
  • Element Drag & Drop: Elemente per Drag-Handle verschieben
    • -
  • Tastaturkürzel: Strg+Z (Undo), Strg+Y (Redo), Strg+S (Speichern), Escape (Selektion beenden)
    • -
  • Doppelklick-Navigation: Container per Doppelklick öffnen
    • -
  • Übersichts-Menü: Elementaktionen in ⋮-Menü gruppiert
    • -
+

1. Über das Flow UI Toolkit

+

Das Flow UI Toolkit ist ein visueller Editor, mit dem Sie Flows erstellen + und bearbeiten — die mehrseitigen, dynamischen Formular-Workflows, die in der + doorbit App und in doorbit Web zur Laufzeit angezeigt + werden. Ein Flow wird als JSON-Datei gespeichert und geladen; dieses JSON + ist das Format, das doorbit rendert.

+

Mit dem Toolkit können Sie:

+
    +
  • Seiten und UI-Elemente per Drag & Drop anlegen und anordnen,
    • +
  • Eigenschaften jedes Elements bearbeiten (inkl. mehrsprachiger Texte),
    • +
  • Sichtbarkeitsregeln definieren,
    • +
  • Flows in Module gliedern, die pro Projekt zu- oder abgeschaltet werden,
    • +
  • Flows als JSON exportieren und wieder importieren.
    • +
+
+

Sie arbeiten immer an genau einem Flow. „Speichern" lädt eine + JSON-Datei herunter; es gibt keine serverseitige Ablage im Toolkit selbst.

-

Das Flow UI Toolkit ermöglicht die visuelle Erstellung und Bearbeitung von individuellem Workflow in der doorbit App und in doorbit Web. Sie können verschiedene UI-Elemente per Drag & Drop platzieren, deren Eigenschaften anpassen und mehrsprachige Inhalte verwalten.

+
-

Mit diesem Tool können Sie:

+
+

2. Die Oberfläche im Überblick

+

Der Editor ist in drei Spalten aufgebaut:

+ + + + + +
SpalteInhalt
Links — HierarchieBaumansicht aller Elemente der aktuellen Seite; Auswahl und Navigation durch verschachtelte Strukturen.
Mitte — KontextDas aktuell geöffnete Element/Container mit seinen direkten Kindern; hier fügen Sie Elemente hinzu.
Rechts — EigenschaftenDer Eigenschaften-Editor für das ausgewählte Element.
+ +

Werkzeugleiste

+

Unter der Werkzeugleiste liegt die Seiten-Navigation (Tabs) mit „+" + (neue Seite) und dem Import-Symbol.

+
+

Tastaturkürzel: Rückgängig (Strg/Cmd+Z), Wiederherstellen (Strg/Cmd+Y), + Speichern (Strg/Cmd+S), Abbrechen/Schließen (Esc).

+
-
-

Hauptfunktionen

- - +
+

3. Flows anlegen, öffnen & speichern

+
    +
  • Neu: legt einen leeren Flow an. Ungespeicherte Änderungen gehen verloren — Sie werden vorher gefragt.
    • +
  • Öffnen: lädt einen Flow aus einer JSON-Datei. Bei einem nicht-leeren Flow wird vor dem Überschreiben nachgefragt.
    • +
  • Speichern: lädt den aktuellen Flow als JSON-Datei herunter.
    • +
-
-

Seitenverwaltung

-

Das Flow UI Toolkit unterstützt die Verwaltung mehrerer Seiten innerhalb eines Flows:

-
    -
  • Seiten über Tabs navigieren
    • -
  • Seiten durch Drag & Drop neu anordnen
    • -
  • Seiten hinzufügen, bearbeiten oder löschen
    • -
  • Seitentitel in mehreren Sprachen anpassen (Deutsch und Englisch)
    • -
  • Material Design Icons für Seiten auswählen
    • -
  • Sichtbarkeitsbedingungen für Seiten definieren
    • -
- -

Seiten bearbeiten

-
    -
  1. Klicken Sie auf das Bearbeiten-Symbol (Stift) neben dem Seiten-Tab
    2. -
  2. Im Dialog können Sie folgende Eigenschaften anpassen: -
      -
    • Titel in verschiedenen Sprachen (lang und kurz)
      • -
    • Icon aus der Material Design Bibliothek
      • -
    • Layout der Seite
      • -
    • Verknüpfung mit korrespondierenden Seiten
      • -
    -
    3. -
- -

Icon-Auswahl

-
    -
  1. Klicken Sie im Seiten-Dialog auf "Icon auswählen"
    2. -
  2. Wählen Sie eine Kategorie (z.B. "Haus & Gebäude", "Smart Home & HVAC")
    3. -
  3. Nutzen Sie die Suchfunktion für spezifische Icons
    4. -
  4. Klicken Sie auf ein Icon, um es auszuwählen
    5. -
-
+

Flow-Eigenschaften bearbeiten

+

Über die Schaltfläche mit dem Flow-Namen öffnen Sie den Dialog „Flow-Eigenschaften":

+
    +
  • Name — interner Anzeigename.
    • +
  • ID und URL-Key — technische Identifier. Sie müssen + gesetzt sein und dürfen nur Kleinbuchstaben, Ziffern, „-" und „_" enthalten (keine + Leerzeichen). Mit „aus Name" wird automatisch ein passender Wert abgeleitet.
    • +
  • Titel (Deutsch/Englisch) — nutzersichtbarer Titel des Flows.
    • +
  • Flow-Icon — über die Icon-Auswahl.
    • +
+

Ungültige Eingaben werden direkt am Feld markiert; „Speichern" bleibt bis zur Korrektur deaktiviert.

-
-

UI-Elemente

-

Das Flow UI Toolkit bietet verschiedene UI-Elemente, die per Drag & Drop platziert werden können:

- -

Elementtypen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementBeschreibungAnpassbare Eigenschaften
TextUIElementStatischer Text (Überschriften, Absätze)Text, Texttyp (Überschrift, Absatz), Mehrsprachigkeit
BooleanUIElementJa/Nein-AuswahlDarstellungsart (Checkbox, Toggle, Dropdown), Beschriftungen
SingleSelectionUIElementAuswahl aus mehreren OptionenOptionen, Darstellungsart (Dropdown, Radio)
NumberUIElementZahleneingabeMin/Max-Werte, Schrittgröße, Einheit
DateUIElementDatumseingabeFormat, Min/Max-Datum
FileUIElementDatei-UploadErlaubte Dateitypen, Maximale Größe
GroupUIElementContainer für andere ElementeLayout, Titel, enthaltene Elemente
ArrayUIElementListe gleichartiger ElementeMin/Max-Anzahl, Elementtyp
ChipGroupUIElementGruppe von auswählbaren ChipsOptionen, Mehrfachauswahl
CustomUIElementBenutzerdefinierte KomponentenTyp (Scanner/doorbit Studio, Address, Location, Environment)
-
+
+

4. Seiten verwalten

+

Ein Flow besteht aus mehreren Seiten, zwischen denen Sie über die Tabs wechseln.

+
    +
  • Seite anlegen: „+" in der Seiten-Navigation. Im Dialog vergeben Sie + einen Titel und wählen das Layout — mit einer Live-Vorschau, + die zeigt, wie die rechte Spalte dargestellt wird.
    • +
  • Seite bearbeiten: Stift-Symbol am Tab. Hier setzen Sie Titel + (mehrsprachig), Icon, Layout (mit Vorschau), die Modul-Zuordnung und Sichtbarkeitsregeln.
    • +
  • Reihenfolge ändern: Tabs per Drag & Drop verschieben.
    • +
  • Seite löschen: mit Bestätigung; die letzte verbleibende Seite kann nicht gelöscht werden.
    • +
-
-

Eigenschaftseditor

-

Der Eigenschaftseditor ermöglicht die detaillierte Anpassung der ausgewählten Elemente:

- -

Allgemeine Eigenschaften

-
    -
  • Titel: Der Titel des Elements (mehrsprachig)
    • -
  • Beschreibung: Eine optionale Beschreibung (mehrsprachig)
    • -
  • Feld-ID: Eine eindeutige ID für das Element (wird automatisch generiert)
    • -
  • Pflichtfeld: Gibt an, ob das Feld ausgefüllt werden muss
    • -
- -

Elementspezifische Eigenschaften

-

Je nach Elementtyp stehen verschiedene spezifische Eigenschaften zur Verfügung:

-
    -
  • Für Textelemente: Texttyp (Überschrift, Absatz), Textinhalt
    • -
  • Für Boolesche Elemente: Darstellungsart, Beschriftungen für Wahr/Falsch
    • -
  • Für Auswahlfelder: Optionen, Darstellungsart
    • -
  • Für Zahlenfelder: Min/Max-Werte, Schrittgröße
    • -
  • Für Container: Layout, enthaltene Elemente
    • -
-
+

Layouts

+

Es stehen genau die Layouts zur Verfügung, die doorbit auch tatsächlich darstellt:

+ + + + + +
LayoutDarstellung
Standardrechte Spalte zentriert (kein Layout-Feld gesetzt)
2-spaltig, rechts breiterrechte Spalte breiter zentriert
2-spaltig, rechts gefülltgenau ein rechtes Element füllt die Spalte
+ +

View-Modus automatisch erzeugen

+

Beim Bearbeiten einer Edit-Seite können Sie „Im View-Modus anzeigen" + aktivieren. Die Eingabefelder werden dann automatisch in Anzeige-Elemente umgewandelt + (z. B. Eingaben → Tabellen, Datei-Uploads → Bildergalerien). So müssen Sie die zugehörige + View-Seite nicht von Hand pflegen. Enthält die View-Seite bereits manuelle Inhalte, werden + Sie vor dem Überschreiben gewarnt.

+ +

Seiten aus einer anderen Datei importieren

+

Über das Import-Symbol neben „+" übernehmen Sie ganze Seiten aus einer anderen JSON-Datei:

+
    +
  1. Datei auswählen → die enthaltenen Seiten werden aufgelistet.
    2. +
  2. Gewünschte Seiten per Checkbox markieren (oder „Alle auswählen").
    3. +
  3. „Importieren".
    4. +
+

Importierte Seiten erhalten neue interne IDs (um Konflikte zu vermeiden); die + field_id-Werte der Elemente bleiben erhalten, damit die Datenbindung intakt + bleibt. Edit- und zugehörige View-Seite werden als Paar übernommen. Der Import lässt sich + rückgängig machen.

+
-
-

Sichtbarkeitsbedingungen

-

Mit Sichtbarkeitsbedingungen können Sie festlegen, wann ein Element oder eine Seite angezeigt wird:

- -

Bedingungstypen

-
    -
  • Einfache Bedingung: Basierend auf dem Wert eines anderen Feldes
    • -
  • Komplexe Bedingung: Mehrere Bedingungen mit UND/ODER verknüpft
    • -
- -

Verfügbare Operatoren

-
    -
  • Gleich (=)
    • -
  • Ungleich (!=)
    • -
  • Größer als (>)
    • -
  • Kleiner als (<)
    • -
  • Größer oder gleich (>=)
    • -
  • Kleiner oder gleich (<=)
    • -
  • Enthält (contains)
    • -
- -
-

Hinweis: Sichtbarkeitsbedingungen können auf alle Felder im Flow angewendet werden, auch auf Felder anderer Seiten.

-
-
+
+

5. Elemente hinzufügen & verschachteln

+

Element hinzufügen

+

In der mittleren Spalte fügen Sie über die Element-Auswahl ein neues Element hinzu. Der + Auswahl-Dialog bietet:

+
    +
  • ein Suchfeld (filtert nach Name, Typ und Beschreibung),
    • +
  • eine Beschreibung je Elementtyp,
    • +
  • eine Vorab-Prüfung der Verschachtelungsregeln: Typen, die im aktuellen + Container nicht erlaubt sind, werden deaktiviert und mit Begründung angezeigt.
    • +
+ +

Verschachteln & Container

+

Container-Elemente nehmen weitere Elemente auf:

+
    +
  • Gruppe — fasst Elemente zusammen (bildet auch optisch eine Gruppe). Kann alle Typen enthalten.
    • +
  • Array — wiederholbare Elementgruppen. Kann alle Typen enthalten.
    • +
  • Chip-Gruppe — enthält ausschließlich Boolean-Elemente (Chips).
    • +
  • Benutzerdefiniert (Custom) — kann Elemente und Subflows enthalten (z. B. Scanner).
    • +
+

Ziehen Sie Elemente per Drag & Drop in einen Container oder ändern Sie ihre + Reihenfolge. Die Hierarchie ist bis zu sechs Ebenen tief gut handhabbar. In der Hierarchie + (links) und im Kontext (Mitte) navigieren Sie durch die Ebenen; der Containertyp wird + farblich gekennzeichnet.

-
-

Elementtypen im Detail

- -
-

Textelemente

-

Es gibt zwei Arten von Textelementen mit unterschiedlichen Zwecken:

- -

Text (Anzeige) - TextUIElement

-

Für statische Textanzeige ohne Benutzereingabe.

-
    -
  • Zweck: Anzeige von Überschriften, Absätzen und Informationstexten
    • -
  • Texttyp: HEADING (Überschrift) oder PARAGRAPH (Absatz)
    • -
  • Text: Der anzuzeigende Text (mehrsprachig)
    • -
  • Keine Datenspeicherung: Dient nur zur Anzeige, speichert keine Benutzereingaben
    • -
- -

Texteingabe - StringUIElement

-

Für Benutzereingaben von Textdaten.

-
    -
  • Zweck: Erfassung von Textdaten vom Benutzer
    • -
  • Eingabetyp: TEXT (einzeilig) oder TEXT_AREA (mehrzeilig)
    • -
  • Feld-ID: Eindeutige ID zur Speicherung der Eingabe
    • -
  • Validierung: Mindest-/Maximallänge, Muster (Regex)
    • -
  • Platzhalter: Optionaler Hinweistext im leeren Feld
    • -
  • Standardwert: Vorbelegter Wert
    • -
- -
-

Wichtig: Verwenden Sie Text (Anzeige) für statische Inhalte wie Überschriften und Beschreibungen. Verwenden Sie Texteingabe wenn Benutzer Text eingeben und speichern sollen.

-
- -

Verwendungsbeispiele

-

Text (Anzeige) eignet sich für:

-
    -
  • Abschnittsüberschriften
    • -
  • Erklärungstexte und Anleitungen
    • -
  • Hinweise und Warnungen
    • -
  • Rechtliche Informationen
    • -
- -

Texteingabe eignet sich für:

-
    -
  • Namen, Adressen, Beschreibungen
    • -
  • Kommentare und Notizen
    • -
  • Suchfelder
    • -
  • Beliebige Textdaten vom Benutzer
    • -
-
+
+

6. Elementeigenschaften bearbeiten

+

Im rechten Eigenschaften-Editor (mit Tabs für Allgemein, Sichtbarkeit, ggf. Unterelemente + und JSON) bearbeiten Sie:

+
    +
  • Titel & Beschreibung — mehrsprachig (Deutsch/Englisch).
    • +
  • Feld-ID — bei eingebenden Elementen; hier wird der erfasste Wert + gespeichert. Sie wird einheitlich und prominent angezeigt.
    • +
  • Pflichtfeld — ob eine Eingabe erforderlich ist.
    • +
  • Modul-Zuordnung — ordnet das Element einem Modul zu (siehe Abschnitt 9). + Immer sichtbar; ohne definierte Module mit Hinweis, wie man welche anlegt.
    • +
  • Elementspezifische Einstellungen — je nach Typ (siehe Abschnitt 7).
    • +
  • Sichtbarkeitsregeln — siehe unten.
    • +
-
-

Weitere Eingabeelemente

-

Neben Texteingaben gibt es weitere spezialisierte Eingabeelemente für verschiedene Datentypen.

- -

Typen von Eingabeelementen

-
    -
  • NumberUIElement: Für Zahleneingaben (Ganzzahlen oder Dezimalzahlen)
    • -
  • DateUIElement: Für Datumseingaben (Jahr, Monat, Tag)
    • -
  • FileUIElement: Für Datei-Uploads (Bilder, Dokumente)
    • -
- -

Validierung

-

Für Eingabeelemente können verschiedene Validierungsregeln definiert werden:

-
    -
  • Pflichtfeld-Validierung
    • -
  • Min/Max-Länge für Texte
    • -
  • Min/Max-Werte für Zahlen
    • -
  • Datumsbereich für Datumsfelder
    • -
  • Dateitypen und -größen für Datei-Uploads
    • -
-
+

Sichtbarkeitsregeln

+

Mit dem Bedingungs-Editor steuern Sie, wann ein Element (oder eine Seite) angezeigt wird:

+
    +
  • Feldbasierte Bedingungen — abhängig vom Wert eines anderen Feldes.
    • +
  • Kontextbedingungen — z. B. nur beim Erstellen, Bearbeiten oder Ansehen.
    • +
  • Logische Verknüpfung — UND / ODER / NICHT für komplexe Bedingungen.
    • +
+
-
-

Auswahlelemente

-

Auswahlelemente ermöglichen die Auswahl aus vordefinierten Optionen.

- -

Typen von Auswahlelementen

-
    -
  • BooleanUIElement: Ja/Nein-Auswahl (Checkbox, Toggle, Dropdown)
    • -
  • SingleSelectionUIElement: Einzelauswahl aus mehreren Optionen
    • -
  • ChipGroupUIElement: Mehrfachauswahl mit visuellen Chips
    • -
- -

Darstellungsarten

-

Je nach Elementtyp stehen verschiedene Darstellungsarten zur Verfügung:

-
    -
  • Für BooleanUIElement: SWITCH, CHECKBOX, DROPDOWN, RADIO, BUTTONGROUP
    • -
  • Für SingleSelectionUIElement: DROPDOWN, RADIO, BUTTONGROUP
    • -
- -
-

Hinweis: Bei ChipGroupUIElement können nur BooleanUIElements als Unterelemente hinzugefügt werden. Diese erhalten automatisch eine eindeutige UUID als Feld-ID.

-
-
+
+

7. Elementtypen im Überblick

-
-

Container-Elemente

-

Container-Elemente dienen zur Strukturierung und Gruppierung anderer Elemente.

- -

Typen von Container-Elementen

-
    -
  • GroupUIElement: Gruppiert verschiedene Elemente
    • -
  • ArrayUIElement: Enthält mehrere Instanzen des gleichen Elementtyps
    • -
- -

Einschränkungen

-
    -
  • GroupUIElement kann alle Elementtypen enthalten, außer andere GroupUIElements
    • -
  • ArrayUIElement sollte keine komplexen Elemente oder andere Arrays enthalten
    • -
- -
-

Wichtig: Alle Elemente, die zu Containern hinzugefügt werden, sollten eindeutige UUIDs als Feld-IDs haben, damit Sichtbarkeitsregeln korrekt funktionieren.

-
-
+

Anzeige (keine Benutzereingabe)

+
    +
  • Text — statische Überschrift oder Absatz.
    • +
  • Feld-Text — zeigt den Wert eines Feldes als Text an (dynamisch).
    • +
  • Schlüssel-Wert-Liste, Tabelle, Bildergalerie — Anzeige-Elemente, v. a. für den View-Modus.
    • +
  • Kontakt — zeigt eine Identitäts-/Kontaktkarte (z. B. den zuständigen Energieberater).
    • +
+ +

Eingabe

+
    +
  • Texteingabe — ein- oder mehrzeilig, mit optionaler Längen-Validierung.
    • +
  • Nummer — Ganzzahl oder Dezimalzahl, mit Minimum/Maximum, Default-Wert und Einheit.
    • +
  • Datum — Jahr, Monat, Tag oder Uhrzeit (je nach Genauigkeit).
    • +
  • Datei — Datei-/Bild-Upload mit Typ-Beschränkungen.
    • +
-
-

Benutzerdefinierte Elemente

-

CustomUIElements sind spezialisierte Komponenten für bestimmte Anwendungsfälle.

+

Auswahl

+
    +
  • Boolean — Ja/Nein.
    • +
  • Einzelauswahl — eine Option aus mehreren, als Dropdown oder + Button-Gruppe. Jede Option hat einen eindeutigen Schlüssel (wird auf Eindeutigkeit + geprüft), eine mehrsprachige Beschriftung und optional ein Icon.
    • +
  • Chip-Gruppe — mehrere unabhängig aktivierbare Chips.
    • +
-

Verfügbare Typen

-
    -
  • Scanner: Scan- und doorbit Studio Integration. Hier können die Screens, die während des Scans bearbeitet werden inkl. der Notizfunktion individualisiert werden
    • -
  • Address: Für strukturierte Adresseingaben
    • -
  • Location: Für Standortdaten mit Koordinaten
    • -
  • Environment: Für sozioökonomische Umgebungsdaten (Statistiken)
    • -
+

Struktur

+
    +
  • Gruppe, Array — siehe Abschnitt 5.
    • +
-

Besonderheiten

-

CustomUIElements generieren komplexe JSON-Strukturen, die Subflows enthalten können. Diese werden automatisch mit eindeutigen UUIDs für alle Elemente generiert.

-
+

Benutzerdefiniert (Custom)

+
    +
  • Scanner — Scan- und doorbit-Studio-Integration; die Screens während des + Scans lassen sich hier über Subflows anpassen.
    • +
  • Adresse — strukturierte Adresseingabe mit Validierung.
    • +
  • Standort — GPS-Koordinaten und Kartenintegration.
    • +
  • Umgebung — Standort-Statistiken (z. B. Altersverteilung, Bildungsniveau).
    • +
-
-

Arbeitsablauf

-

Ein typischer Arbeitsablauf im Flow UI Toolkit sieht wie folgt aus:

+
+

8. Mehrere Elemente: Auswählen, Gruppieren, Kopieren, Exportieren

+

Mehrfachauswahl & Gruppieren

    -
  1. Workflow erstellen oder öffnen -
      -
    • Neuen Workflow erstellen über den "Neu"-Button
      • -
    • Bestehenden Workflow öffnen über den "Öffnen"-Button
      • -
    • Workflow-Namen festlegen
      • -
    -
    2. -
  2. Seiten verwalten -
      -
    • Seiten hinzufügen, bearbeiten oder löschen
      • -
    • Seitentitel und Icons anpassen
      • -
    • Seitenreihenfolge durch Drag & Drop ändern
      • -
    -
    3. -
  3. UI-Elemente hinzufügen -
      -
    • Elemente per Drag & Drop aus der Elementpalette ziehen
      • -
    • Elemente in Container-Elementen verschachteln
      • -
    • Elemente in der Hierarchie neu anordnen
      • -
    -
    4. -
  4. Eigenschaften anpassen -
      -
    • Allgemeine Eigenschaften wie Titel und Beschreibung festlegen
      • -
    • Elementspezifische Eigenschaften konfigurieren
      • -
    • Mehrsprachige Inhalte für Deutsch und Englisch definieren
      • -
    -
    5. -
  5. Sichtbarkeitsbedingungen definieren -
      -
    • Bedingungen für die Anzeige von Elementen festlegen
      • -
    • Komplexe Bedingungen mit UND/ODER-Verknüpfungen erstellen
      • -
    -
    6. -
  6. Workflow speichern +
  7. Selektionsmodus aktivieren (Checkbox-Symbol in der Editor-Werkzeugleiste). + Neben den Elementen erscheinen Checkboxen; ein Aktionsbalken zeigt die + Anzahl der ausgewählten Elemente.
    8. +
  8. Elemente markieren → „Zu Gruppe zusammenfassen".
    9. +
  9. Gruppentitel und Feld-ID vergeben (wird vorgeschlagen) → die Auswahl wird in eine neue + Gruppe eingebettet.
    10. +
+

Voraussetzungen: Alle Elemente müssen auf derselben Ebene liegen; Elemente + innerhalb von Arrays, Subflows oder Chip-Gruppen sowie bereits bestehende Gruppen können + nicht (erneut) gruppiert werden. Bei Verstößen erscheint eine verständliche Meldung.

+ +

Gruppierung auflösen

+

Eine Gruppe auswählen → Auflösen-Symbol. Die Kinder-Elemente rücken an die + Position der Gruppe; ihre field_id-Werte bleiben unverändert.

+ +

Element auf andere Seite kopieren

+

Kopier-Symbol an der Elementkarte → Zielseite und Position wählen. Das kopierte Element + (inkl. aller Kinder) erhält neue UUIDs und neue + field_id-Werte, um Konflikte im selben Flow zu vermeiden.

+ +

Element in andere JSON-Datei exportieren

+

Export-Symbol → Zieldatei, Zielseite und Position wählen. Die Zieldatei wird als + [Dateiname]_modified.json heruntergeladen; der aktuelle Flow bleibt unverändert. + Die field_id-Werte bleiben erhalten (anderer Flow → kein Konflikt). Enthält das + Element Sichtbarkeitsbedingungen mit Feldverweisen, erscheint eine Warnung, da diese Felder + in der Zieldatei evtl. fehlen.

+
+

Alle diese Aktionen unterstützen Undo/Redo.

+
+
+ +
+

9. Module (modulare Flows)

+

Ein Flow kann optionale Module deklarieren — Bündel aus Seiten/Feldern, die + ein Projekt bei Bedarf (auch nachträglich) aktiviert. Mit module_id markierte + Seiten oder Elemente sind nur sichtbar, wenn das zugehörige Modul im Projekt aktiv ist.

+
    +
  • Modul-Katalog verwalten: Schaltfläche „Module" in der + Werkzeugleiste — Module anlegen, bearbeiten, löschen. Je Modul: ID, Name, Beschreibung, + Icon und ob es standardmäßig aktiv ist.
    • +
  • Auslieferungsart:
      -
    • Workflow als JSON-Datei speichern
      • -
    • Die generierte JSON-Datei kann direkt verwendet werden
      • +
    • INLINE — das Modul ist im Flow enthalten.
      • +
    • CATALOG — das Modul ist ein eigenständiges, versioniertes Artefakt, + das separat exportiert/importiert und nachgeladen werden kann.
    • - +
  • Zuordnung: Im Eigenschaften-Editor (Element) und im Seiten-Dialog ordnen + Sie über „Modul-Zuordnung" ein Element/eine Seite einem Modul zu. Verweist + eine Zuordnung auf ein nicht (mehr) vorhandenes Modul, wird das als „⚠ Unbekannt" angezeigt; + der Modul-Manager warnt vor solchen verwaisten Zuordnungen.
    • +
-

Tipps und Tricks

+

10. Tipps & häufige Fragen

-

Allgemeine Tipps

+

Tipps

    -
  • Regelmäßiges Speichern: Speichern Sie Ihren Workflow regelmäßig, um Datenverlust zu vermeiden.
    • -
  • Undo/Redo: Nutzen Sie die Undo/Redo-Funktionen, um Änderungen rückgängig zu machen oder wiederherzustellen.
    • -
  • Eindeutige IDs: Achten Sie darauf, dass alle Elemente eindeutige UUIDs als Feld-IDs haben, besonders wenn Sie Sichtbarkeitsbedingungen verwenden.
    • -
  • Mehrsprachigkeit: Füllen Sie immer beide Sprachversionen (Deutsch und Englisch) aus, um eine vollständige Mehrsprachigkeit zu gewährleisten.
    • +
  • Gruppen schaffen auch in App und Web eine optische Zusammenfassung — + nutzen Sie sie für zusammengehörige Felder.
    • +
  • Mehrfachauswahl ist schneller als einzelnes Drag & Drop, wenn Sie + mehrere Elemente gruppieren.
    • +
  • Seiten importieren und Elemente kopieren/exportieren + helfen, bewährte Strukturen wiederzuverwenden und projektübergreifend zu standardisieren.
    • +
  • Achten Sie auf den Validierungs-Indikator — er weist früh auf + strukturelle Probleme hin.
    • +
  • Füllen Sie alle Sprachversionen aus und halten Sie die Verschachtelung überschaubar + (≤ 6 Ebenen).
-

Leistungsoptimierung

-
    -
  • Komplexität reduzieren: Vermeiden Sie zu tiefe Verschachtelungen von Elementen.
    • -
  • Sichtbarkeitsbedingungen: Komplexe Sichtbarkeitsbedingungen können die Leistung beeinträchtigen. Halten Sie sie so einfach wie möglich.
    • -
  • Icon-Auswahl: Die Suche nach Icons funktioniert über alle Kategorien hinweg, auch wenn ein bestimmter Filter ausgewählt ist.
    • -
+

Häufige Fragen

+

Wie sichere ich meine Arbeit?

+

Regelmäßig über „Speichern" als JSON exportieren und Backups wichtiger Flows anlegen. Das + Toolkit speichert nicht serverseitig.

-

Bekannte Einschränkungen

-
    -
  • GroupUIElements können keine anderen GroupUIElements enthalten.
    • -
  • ArrayUIElements sollten keine komplexen Elemente oder andere Arrays enthalten.
    • -
  • Bei ChipGroupUIElements können nur BooleanUIElements hinzugefügt werden.
    • -
+

Kann ich Änderungen rückgängig machen?

+

Ja, über Rückgängig/Wiederherstellen (Strg/Cmd+Z bzw. Y). Auch Importe, Kopien und + Gruppierungen sind umkehrbar.

+ +

Welches Dateiformat wird verwendet?

+

Import und Export erfolgen als JSON. Sollen im Workflow Bilder gezeigt werden, müssen diese + aktuell noch separat übermittelt werden.

+ +

Wie funktioniert die Mehrsprachigkeit?

+

Texte werden in allen konfigurierten Sprachen (mind. Deutsch/Englisch) gespeichert.

+ +

Was ist eine Feld-ID — und was passiert mit ihr beim Kopieren/Exportieren?

+

Die Feld-ID bestimmt, wo der erfasste Wert abgelegt wird. Beim Kopieren innerhalb + desselben Flows wird sie neu generiert (Konfliktvermeidung); beim + Export in eine andere Datei und beim Seitenimport bleibt + sie erhalten.

+ +

Wozu dienen Module?

+

Module bündeln optionale Seiten/Felder, die pro Projekt aktiviert werden. So lässt sich ein + Basis-Flow um projektspezifische Teile erweitern, ohne ihn zu duplizieren (siehe Abschnitt 9).

+ +

Warum kann ich ein bestimmtes Element hier nicht hinzufügen?

+

Manche Typen sind in bestimmten Containern nicht erlaubt. Der Element-Auswahl-Dialog zeigt + solche Typen deaktiviert mit Begründung an.

+ +

Werden Sichtbarkeitsbedingungen mitkopiert?

+

Ja. Beim Export in eine andere Datei erscheint zusätzlich eine Warnung, falls die Bedingung + auf Felder verweist, die dort evtl. nicht existieren.