With FormFlow, we introduce a powerful new feature that gives you full control over your form processes. Whether it is a standard process or individually defined steps – with FormFlow, forms can be adapted exactly to your requirements and those of your users.

What is FormFlow?

FormFlow allows you to define your own form workflows and to specifically configure the display and behavior of individual forms. You decide which pages are shown or hidden, which buttons appear where, how the structure is built, or whether certain pages receive other contents or functions through additional variables.

This means: You are no longer bound to the classic, predefined workflow. Instead, you can design every step yourself – from navigation to the integration of special logic.

Example: Individual Workflows without Summary

In addition to the previous standard workflow, we have already implemented an alternative template called "No Summary". This allows you to specifically determine on the level of individual forms – via a configuration in FormGrid – whether a form should display the classic summary at the end or not.

This individualization opens up many new possibilities, e.g.:

  • Specifically hide certain buttons

  • Pass specific variables that activate further features in the form

  • Control whether a print button is displayed

  • Determine whether the summary should contain detailed information

Configuration of FormFlow Workflows

With the feature feature_form_flow, you control exactly which pages, buttons, and variables a form workflow (Flow) contains.

In the delivery state, two workflows are available:

Key (key) Display Name (name) Purpose

default

Classic Form Flow

Contains Form → Summary → Success

no_summary

Without Summary

Contains Form → Success

You can adapt these workflows or add as many others as you like via environment variables.

1. JSON Structure Overview

[
  {
    "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 Fields

  • key – Unique workflow name (Unique Key), referenced in the form (e.g., via FormGrid).

  • name – Human-readable name.

  • formFlowSteps – Sequence of screens that the user goes through.

1.2 Fields of a formFlowSteps Entry

  • buttonText – i18n key of the button leading to this step (What should be displayed in the button on the previous page - e.g., i18n key for "To Form" if a start page was implemented before).

  • reactClass – React Native component of the screen (FormScreen, SummaryScreen, SuccessScreen …).

    • Configurable under feature-formgen/src/custom/ScreenComponents.tsx

  • name – i18n key for the screen title.

  • description – i18n key for the description (optional).

  • buttonDefinition – List of additional buttons in the footer.

  • variables – Key-Value pairs provided to the screen component as props (optional).

1.3 Fields of a buttonDefinition Entry

  • btnComponent – React Native component of the button (SubmitButton, PrintPdfButton …).

    • Configurable under feature-formgen/src/custom/ButtonComponentsTypes.tsx

  • translateKey – i18n key for the button label.

  • mobileDisabled – Hides the button on mobile devices (if this button implementation has this feature) (optional).

2. Enable & Extend via Environment Variables

Variable Description Default Value

FEATURE_FORMFLOW_CONFIG

Replaces the entire JSON configuration with your own string.

Default JSON

FEATURE_FORMFLOW_ADDITIONALFLOW

Adds additional workflows to the default configuration (JSON array).

[]

Note: If FEATURE_FORMFLOW_ADDITIONALFLOWS is set, its workflows are appended to the end of the standard list.

Tip: Ensure that your JSON is transferred without syntax errors.

3. Enable & Extend via features.yaml

Variable Description Default Value

formFlows

Replaces the entire JSON configuration with your own string.

Default JSON

additionalFlows

Adds additional workflows to the default configuration (formFlows) (JSON array).

[]

Note: If additionalFlows is set, its workflows are appended to the end of the standard list.

Tip: Ensure that your JSON is transferred without syntax errors.

4. Minimal Example: Adding a Custom Workflow with features.yaml

To be found under: mesh/plugins/acta-nova-plugin/features.yml

feature_form_flow:
  additionalFlows: '[
    {
      "key": "quick_submit",
      "name": "Direct Submit",
      "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": []
        }
      ]
    }
  ]'

  1. Restart Container/Service → the new template is immediately available for selection in FormGrid.

  2. Assign the workflow "Direct Submit" to the desired form in FormGrid.

Best Practices

  • Ensure Translatability: Create all i18n keys like name and description keys in the translation page in the CMS.

  • Reusable Buttons: Only use custom btnComponent classes if the standard buttons are not sufficient.

  • Variables as Feature Flags: Use Bool or String variables to trigger conditional logic in React (e.g., showDetails).

  • Check Multi-Platform Behavior: Mark buttons that were implemented only for the web application (mobileDisabled: true).

Troubleshooting

Problem Cause Solution

Build Error "JSON parse error"

Syntax error in FEATURE_FORMFLOW_CONFIG

Validate JSON.

Assignment in FormGrid

Now you can select your desired FormFlow workflow in FormGrid when selecting individual forms under the field "Form Workflow".