EUCA

Mit FormularFlow stellen wir ein leistungsstarkes neues Feature vor, das Ihnen die vollständige Kontrolle über die Abläufe Ihrer Formulare gibt. Ob Standardablauf oder individuell definierte Schritte – mit FormularFlow lassen sich Formulare exakt an Ihre Anforderungen und die Ihrer Nutzer anpassen.

Was ist FormularFlow?

FormularFlow ermöglicht es, eigene Formularabläufe zu definieren und die Darstellung sowie das Verhalten einzelner Formulare gezielt zu konfigurieren. Sie entscheiden, welche Seiten angezeigt oder ausgeblendet werden, welche Buttons wo erscheinen, wie die Struktur aufgebaut ist oder ob bestimmte Seiten durch zusätzliche Variablen andere Inhalte oder Funktionen erhalten.

Das bedeutet: Sie sind nicht länger an den klassischen, vorgegebenen Ablauf gebunden. Stattdessen können Sie jeden Schritt selbst gestalten – von der Navigation bis hin zur Integration spezieller Logik.

Beispiel: Individuelle Abläufe ohne Zusammenfassung

Neben dem bisherigen Standardablauf haben wir bereits ein alternatives Template namens „Ohne Zusammenfassung“ umgesetzt. Damit lässt sich auf Ebene einzelner Formulare – über eine Konfiguration in FormGrid – gezielt festlegen, ob ein Formular die klassische Zusammenfassung am Ende anzeigen soll oder nicht.

Diese Individualisierung eröffnet viele neue Möglichkeiten, z. B.:

bestimmte Buttons gezielt ausblenden
spezifische Variablen übergeben, die weitere Features im Formular aktivieren
steuern, ob ein Druck-Button angezeigt wird
festlegen, ob die Zusammenfassung Detailinformationen enthalten soll

Konfiguration von FormularFlow Abläufen

Mit dem Feature feature_form_flow steuern Sie exakt, welche Seiten, Buttons und Variablen ein Formularablauf (Flow) enthält.
Im Auslieferungszustand stehen zwei Abläufe bereit:

Schlüssel (`key`)	Anzeigename (`name`)	Zweck
`default`	Klassischer Formularablauf	Enthält Formular → Zusammenfassung → Success
`no_summary`	Ohne Zusammenfassung	Enthält Formular → Success

Sie können diese Abläufe anpassen oder beliebig viele weitere über Environment-Variablen hinzufügen.

1. JSON-Struktur im Überblick

[
  {
    "key": "default",
    "name": "Standard",
    "formFlowSteps": [
      {
        "buttonText": "form_flow_btn_form",
        "reactClass": "FormScreen",
        "name": "form_flow_name_form",
        "description": "form_flow_desc_form",
        "buttonDefinition": [
          { "btnComponent": "DetailInfoButton",  "translateKey": "form_detailinfo",  "mobileDisabled": true },
          { "btnComponent": "CancelButton",      "translateKey": "form_cancel" },
          { "btnComponent": "PreviousPageButton","translateKey": "form_previousPage" },
          { "btnComponent": "NextPageButton",    "translateKey": "form_nextPage" }
        ],
        "variables": []
      }
      …
    ]
  }
]

1.1 Top-Level-Felder

key – eindeutiger Ablauf-Name (Unique Key), wird im Formular (z. B. über FormGrid) referenziert.
name – menschenlesbarer Name.
formFlowSteps – Reihenfolge der Screens, die der Benutzer durchläuft.

1.2 Felder eines `formFlowSteps`-Eintrags

buttonText – i18n-Key des Buttons, der zu diesem Schritt führt (Was soll auf der Seite davor im Button angezeigt werden - z.B. i18n-Key für "Zum Formular" wenn davor eine Startseite implementiert wurde).
reactClass – React-Native-Komponente des Screens (FormScreen, SummaryScreen, SuccessScreen …). - Konfigurierbar unter feature-formgen/src/custom/ScreenComponents.tsx
name – i18n-Key für den Titel des Screens.
description – i18n-Key für die Beschreibung (optional).
buttonDefinition – Liste zusätzlicher Buttons im Footer.
variables – Key-Value-Paare, die der Screen-Komponente als Props bereitgestellt werden (optional).

1.3 Felder eines `buttonDefinition`-Eintrags

btnComponent – React-Native-Komponente des Buttons (SubmitButton, PrintPdfButton …). - Konfigurierbar unter feature-formgen/src/custom/ButtonComponentsTypes.tsx
translateKey – i18n-Key für die Button-Beschriftung.
mobileDisabled – blendet den Button auf Mobilgeräten aus (falls dieser Button, diese Implementierung vorweist) (optional).

2. Aktivieren & Erweitern per Environment-Variablen

Variable Beschreibung Standardwert

Variable	Beschreibung	Standardwert
FEATURE_FORMFLOW_CONFIG	Ersetzt die gesamte JSON-Konfiguration durch Ihren eigenen String.	Default-JSON
FEATURE_FORMFLOW_ADDITIONALFLOW	Fügt der Default-Konfiguration zusätzliche Abläufe hinzu (JSON-Array).	`[]`

FEATURE_FORMFLOW_CONFIG

Ersetzt die gesamte JSON-Konfiguration durch Ihren eigenen String.

Default-JSON

FEATURE_FORMFLOW_ADDITIONALFLOW

Fügt der Default-Konfiguration zusätzliche Abläufe hinzu (JSON-Array).

[]

Hinweis: Wird FEATURE_FORMFLOW_ADDITIONALFLOWS gesetzt, werden dessen Abläufe an das Ende der Standardliste angehängt.
Tipp: Achten Sie darauf, dass Ihr JSON ohne Syntaxfehler übertragen wird.

3. Aktivieren & Erweitern per features.yaml

Variable	Beschreibung	Standardwert
formFlows	Ersetzt die gesamte JSON-Konfiguration durch Ihren eigenen String.	Default-JSON
additionalFlows	Fügt der Default-Konfiguration (formFlows) zusätzliche Abläufe hinzu (JSON-Array).	`[]`

Hinweis: Wird additionalFlows gesetzt, werden dessen Abläufe an das Ende der Standardliste angehängt.
Tipp: Achten Sie darauf, dass Ihr JSON ohne Syntaxfehler übertragen wird.

4. Minimalbeispiel: Eigenen Ablauf hinzufügen mit features.yaml

Zu finden unter: mesh/plugins/acta-nova-plugin/features.yml



feature_form_flow:

    additionalFlows: '[

                        {

                          "key": "quick_submit",

                          "name": "Direkt Einreichen",

                          "formFlowSteps": [

                            {

                              "buttonText": "form_flow_btn_form",

                              "reactClass": "FormScreen",

                              "name": "form_flow_name_form",

                              "description": "form_flow_desc_form",

                              "buttonDefinition": [

                                { "btnComponent": "CancelButton", "translateKey": "form_cancel" },

                                { "btnComponent": "SubmitButton", "translateKey": "form_submit" }

                              ],

                              "variables": []

                            },

                            {

                              "buttonText": "form_flow_btn_success",

                              "reactClass": "SuccessScreen",

                              "name": "form_flow_name_success",

                              "description": "form_flow_desc_success",

                              "buttonDefinition": [],

                              "variables": []

                            }

                          ]

                        }

                      ]'

Container/Service neu starten → das neue Template steht sofort im FormGrid zur Auswahl.
Weisen Sie dem gewünschten Formular im FormGrid den Ablauf Direkt Einreichen zu.

4. Best Practices

Übersetzbarkeit sicherstellen: Legen Sie alle i18n-keys wie name- und description-Keys in der Übersetzungsseite im CMS an.
Wiederverwendbare Buttons: Eigene btnComponent-Klassen nur nutzen, wenn die Standard-Buttons nicht ausreichen.
Variables als Feature-Flags: Nutzen Sie Bool- oder String-Variablen, um in React bedingte Logik auszulösen (z. B. showDetails).
Multi Platform Verhalten prüfen: Markieren Sie Buttons, die nur für die Web-Anwendung implementiert wurden (mobileDisabled: true).

5. Troubleshooting

Problem	Ursache	Lösung
Build-Fehler „JSON parse error“	Syntaxfehler in FEATURE_FORMFLOW_CONFIG	JSON validieren.

6. Zuweisen im FormGrid

Nun können Sie im FormGrid beim Auswählen von einzelnen Formularen unter dem Feld "Formular Ablauf" Ihr gewünschtes FormularFlow Ablauf auswählen.

ANDP 8.2 - FormGEN FormularFlow