Frontend - Form node

The Frontend - Form node displays a customizable form to the user. It allows collecting input data and triggering actions through buttons to proceed with the next steps of the flow.

This node is available in: Authentication, Admin, Self Service, Consent, Library, Custom, User Defined

Form structure

This component configuration allows building dynamic user interfaces by composing multiple UI components.
Each component can be configured individually to control layout, behavior, and validation.

Form is based on Vuetify form but it is possible to define your own html code. There is also a Preview Form button that allows previewing the form before execution.

The top toolbar allows adding UI elements to the Vuetify form. Each component has its own configuration panel:

Text input field.

Configurable properties include: ID, layout, label, hint, placeholder, value, trim, outlined, dense, required, regex, confirmation value, read-only, filled, prepend icon, clearable, primary colour.

Password field (masked input).

Configurable properties include: ID, layout, label, hint, placeholder, value, trim, outlined, dense, required, regex, confirmation value, read-only, filled, prepend icon, clearable, primary colour.

Action button.

Configurable properties include: ID, layout, label, primary colour.

Associate a function when the button is clicked

Allows defining custom script that is executed after clicking the button.

Dropdown selection.

Configurable properties include: ID, layout, label, hint, placeholder, select values, outlined, dense, required, filled, prepend icon, clearable, primary colour.

Static text.

Configurable properties include: ID, alignment, text content, font size, font style, default colour.

Boolean input.

Configurable properties include: ID, layout, label, alignment, font size, font style, default checkbox state, required (user must accept), primary colour.

Searchable dropdown.

Configurable properties include: ID, layout, label, hint, placeholder, select values, default selection, chips, read-only, outlined, dense, required, multiple, filled, prepend icon, clearable, primary colour.

Display an image.

Configurable properties include: ID, layout, image source, aspect ratio, width, height, max width, max height, avoid image clipping.

Loading indicator.

Configurable properties include: ID, layout, circular, indeterminate, value, size, position absolute, active, bottom, position fixed, buffer value, height, query, reverse, rounded, stream, striped, top, primary colour.

Multi-line input.

Configurable properties include: ID, layout, label, hint, placeholder, value, auto-grow, read-only, outlined, dense, required, minimum rows, filled, prepend icon, clearable, primary colour.

Custom HTML code — allows defining fully customized behavior and UI using HTML and Vue.js logic.

Configurable properties include: HTML code, additional Vue data, Vue watcher, Vue computed properties, Vue methods.

Generates and displays a QR code.

Configurable properties include: ID, layout, value, aspect ratio, width, height, max width, max height, avoid image clipping.

Provides the ability to inject head elements into the rendered page, these can be added in 2 ways:

• From a CDN: A JavaScript resource can be loaded from a CDN by choosing a library from the list retrieved automatically from https://api.cdnjs.com/libraries.
• From a Custom Library: A custom element can be defined using the integrated editor, which allows creating and loading a custom <script> element.

For each loaded element, it is also possible to specify its scope: it can be loaded temporarily (only for the duration of the node) or persist for the entire flow execution.

Allows defining custom script that is executed within the rendered HTML page.
The script runs in the browser context when the node is processed and can be used to manipulate the page, interact with loaded libraries, or perform custom client-side logic.

Variable output table

The Variable Output Table defines the possible outputs of the node and allows you to create custom outputs that can be used during the flow execution.
Each custom output represents a possible exit path from the node and can be triggered by assigning the same output ID to an HTML element (for example, a button).

This mechanism allows the node behavior to be dynamically controlled by scripts, UI interactions, or nested flows.

Save in the flow store

Attributes generated or retrieved from the node can be saved into a variable.
They can then be reused by other nodes in the flow by referencing them as {{variable.attribute}}.

To do this you choose attributes that need to be stored in the variable, and in the flow store (All attributes exposed by the node are listed in a multi-select dropdown, allowing the user to choose one or more of them), then a variable name that can be freely defined by the user.

There is also a flag to make the variable available to the frontend.

Default output node

• Failure

JSON metadata

{
    "name": "fe_form",
    "active": true,
    "bundleName": "default-nodes",
    "bundleVersion": "1.0",
    "nodeName": "FrontendForm",
    "category": "user_agent_components",
    "deprecated": false,
    "displayName": [{
            "lang": "en",
            "value": "Frontend - Form"
        }, {
            "lang": "it",
            "value": "Frontend - Form"
        }
    ],
    "flowCategory": [
        "custom",
        "admin",
        "auth",
        "self",
        "consent"
    ],
    "flowType": [
        "library"
    ],
    "index": 3,
    "inputs": [{
            "name": "Input"
        }
    ],
    "outputs": [{
            "name": "Failure",
            "level": "error"
        }
    ],
    "allowAdditionalOutputs": true
}