Set UI Variable

Controlled node

Overview

The Set UI Variable node stores data in the form's variable store, making it accessible to UI elements and other nodes within the form context. Unlike the standard Set Variable node which stores data in the workflow's variable scope, this node writes to the form-specific variable store that persists across form pages and can be read by the UI Variable node.

The variable name supports Handlebars templating, allowing dynamic variable names based on runtime data. For example, you can create variables named user_{{userId}}_preferences where userId is passed as an input.

Form vs Workflow Variables

Form variables (formVariables) are separate from workflow variables. They are designed for UI state management and are accessible across different pages of a form, while workflow variables are scoped to the workflow execution.

Inputs

Input	Type	Description	Default
set	Event	Fires when the node should set the variable.	-
name	Text	The name/path of the variable to set. Supports Handlebars templates (e.g., user_{{id}}_name). Dots are converted to path separators.	-
value	Text	The value to store in the variable. Can be any data type (text, number, object, etc.).	-
Dynamic	Data	Any variables referenced in the name field using {{variable}} syntax appear as additional inputs.	-

Outputs

Output	Type	Description
done	Event	Fires when the variable has been successfully written to the form store.

Runtime Behavior and Defaults

When triggered by the set event, the node processes the variable name as a Handlebars template, substituting any referenced variables with their current values. The resulting name has dots (.) replaced with forward slashes (/) to create a valid path for the underlying storage system.

The variable is written to the formVariables runtime data store, making it accessible via the UI Variable node or other form elements that can bind to form variables.

Key behaviors:

• If the name input is empty or undefined, the node does nothing
• Template variables in the name are resolved against workflow variables, parent variables, and node inputs
• The value is stored as-is without type conversion
• Variables persist for the duration of the form session

Example

Basic Variable Setting

Connect a button's click event to the set input to store form data:

1. Add a Set UI Variable node
2. Set the name to customerName
3. Connect a text input's value to the value input
4. Connect a button's event to the set input
5. Use a UI Variable node elsewhere with name customerName to retrieve the value

Dynamic Variable Names

Create user-specific variables using templates:

1. Set name to user_{{userId}}_settings
2. Connect a variable containing the user ID to a new input socket that appears (labeled userId)
3. Connect the settings object to value
4. When triggered, this creates variables like user_123_settings, user_456_settings, etc.

Nested Paths

Use dot notation to create nested variable structures:

• Setting name to app.settings.theme creates a nested path accessible as app/settings/theme
• This allows organizing variables hierarchically (e.g., app.settings.theme, app.settings.language)