Global Variables Panel

Global Variables Panel

Table of Contents

• Global Variables Panel Overview
  • Panel Functionality
    • Accessing the Panel
  • Global Variables Panel Interface
  • Creating Global Variables
  • Editing Global Variables
  • Real-Time Updates in Connected Widgets
  • Control Types
    • Shared UI Actions (Available for All Variables)
    • 1. Anything
    • 2. Number
    • 3. Slider
    • 4. Text
    • 5. MultilineText
    • 6. Dropdown
    • 7. Image
    • 8. BinaryFile
    • 9. Checkbox
    • 10. MultiSelect
    • 11. Button
    • 12. Group
  • Practical Use Case with Multiple Control Types
  • File and Image Handling
    • Image Variables
    • Binary File Variables
  • Integration with the Global Variable Widget
    • Variable Reference
    • Reactive Behavior
    • Change Propagation
  • Use Case Examples
    • Reactive Number Variables for Automatic Calculations
    • Boolean Variable with Conditional Logic
  • Use Cases and Examples: Centralized Recipe Control
    • Centralized Message Composition
    • Dynamic Global Variables with Script Initialization (Session & 2FA)

 

Global Variables Panel Overview

The Global Variables Panel is a centralised interface component in Kemu that provides a single location to create, configure, and manage Global Variables used throughout your recipes. Global Variables are values that persist during recipe execution and can be accessed and modified from any widget in the workflow or directly from the panel interface.

The panel functions as the primary interface for Global Variable configuration and management, providing:

• Centralized variable management — Single interface for variable creation, modification, and deletion
• Runtime control — Variable value modification at runtime without workflow modification; changes propagate immediately to connected widgets
• Configuration sharing — Variable values shared across multiple workflows within the same recipe
• Organization — Hierarchical grouping of related variables

Variables created in the panel are immediately available to widgets, expressions, and services throughout the recipe. The Global Variable Widget provides programmatic access to these variables within workflows, performing read and write operations. When a variable value changes in the panel or through a widget, all widgets, expressions, and services that reference that variable receive the updated value immediately.

 

Panel Functionality

Accessing the Panel

The Global Variables Panel is accessed through the Logic Mapper's Settings menu. To open or close the panel:

1. Click the gear icon in the top-right corner of the canvas to open the Settings menu
2. In the Settings menu, locate the "Global Variables Panel" toggle
3. Enable the toggle to display the panel on the screen
4. Disable the toggle to hide the panel

 

Global Variables Panel Interface

When initialized, the panel displays an empty table layout with two columns:

• Name — Column reserved for variable names
• Value — Column displaying the current value of each variable using the appropriate control type

When no variables exist, only the table headers and top-bar controls are visible.

Top-Bar Controls

The top bar provides panel-level actions:

• Add Variable — Opens a modal for creating new variables. The modal contains:
  • Variable Name — Text field accepting names that start with a letter and contain only letters, numbers, underscores, or spaces
  • Control Type — Selection from available types: Anything, Number, Slider, Text, Multiline Text, Dropdown, Image, Binary File, Checkbox, MultiSelect, Button, or Group
  • Group — Optional field for assigning the variable to an existing group. Visible only when at least one Group variable exists
  • Help Text — Optional text field for variable description

Three-dot menu (⋯) Provides configuration management operations for the panel:

• Download Configuration — Exports a JSON file containing the current configuration of all variables. Each variable is represented as an object within a globalVariables array. The export can include or exclude stored values.

{
"globalVariables": [
   {
      "name": "welcome_message",
      "controlType": "text",
      "controlSettings": { "value": "", "placeholder": "Enter text" },
      "group": null,
      "order": 1,
      "lastValue": "<stored value>",
      "lastDataType": 1
   }
]
}

• Copy Configuration — Copies the configuration of all variables to the clipboard. The copied data can be pasted into external files or transferred to another recipe. The copy operation can include stored values or only variable definitions.

• Paste Configuration — Inserts a previously copied configuration with two modes:

  • Add to Existing — Appends copied variables without modifying existing variables
  • Replace Existing — Clears all existing variables and replaces them with the pasted configuration

• Import Configuration — Opens the system file explorer for uploading a JSON configuration file. All variables contained in the file are loaded into the panel.

Panel Controls

The panel includes secondary interface controls:

• Minimize Panel — Collapses the panel into a compact bar to reduce obstruction of the logic map
• Move Panel — Drag handle located in the top-left corner enables repositioning the panel within the logic map
• Resize Panel — Resize handle in the lower-right corner adjusts the panel dimensions

 

Creating Global Variables

To create a new global variable:

1. Click the "+" button at the top of the panel.
2. An "Add Variable" modal opens with the following fields:
   • Variable Name — Unique identifier for the variable. Must start with a letter and use only letters, numbers, underscores, and spaces.
   • Control Type — Select the control type (String, Number, Dropdown, etc.)
   • Help Text (optional) — Describes the variable’s function. It appears as a help icon (?) next to the name and is shown on hover.
3. Click "Create" to add the variable.

Note — The Group field appears only if at least one Group-type variable already exists.

Editing Global Variables

• Edition Panel — The gear icon next to each variable opens the configuration panel, which enables modification of:

  • Control Type — Changes the control type used by the variable
  • Control-Specific Settings — Configuration options that vary by control type
  • Help Text — Text field for variable description, displayed through the help icon
  • Group Assignment — Assignment of the variable to an existing group
  • Clicking "Save" applies the changes to the variable.

• Clear Value Option — The clear value option removes the stored value while preserving the variable definition and configuration.

• Deleting Global Variables — The bin icon next to each variable removes the variable immediately and permanently, including all stored values. Deleting a group variable removes all variables contained within that group.

• Reordering Variables — Variables support reordering via drag and drop:

  • Use the drag handle (six vertical dots) to the left of each variable to change its position.
    • Release the variable to apply the new order in the list.
  • To move a variable into a group, drag it over the group row until a blue highlight line appears under the group name, then release.

Real-Time Updates in Connected Widgets

This example demonstrates real-time value propagation: a numeric Global Variable updates and triggers evaluation through a Switch Widget. With Reactive Mode enabled, the connected Text Widget receives and displays the result immediately.

Drag the example onto the workspace to explore and experiment!

In this example

1. The Global Variable Widget references the score variable (number control type, Number data type) with Auto-emit on variable change enabled.

2. When the score value changes in the Global Variables Panel, the Global Variable Widget automatically transmits the updated Number value to the Switch Widget (Number data type).

3. The Switch Widget evaluates conditions using $vars.score:

   • If score >= 16 && score < 20: The first output triggers and outputs "Excellent Work!"
   • If score >= 10 && score < 16: The second output triggers and outputs "Acceptable performance."

4. Based on the condition result, the corresponding Text Widget receives the string value and displays the message.

Reactive Mode Behavior

With reactive mode enabled, changing the score value in the panel immediately updates the stored value and triggers conditional evaluation. Global Variables propagate updated values to connected widgets in real time:

• Variable changes in the panel immediately notify all widgets linked to that variable.
• Widgets with reactive mode enabled automatically output the updated value.
• Variable modifications adjust recipe behavior without workflow modification.

 

Control Types

The Global Variables Panel supports different control types that determine how each variable is displayed and edited in the interface. Each control type is designed for a specific data type and use case.

Shared UI Actions (Available for All Variables)

These UI actions are available for every Global Variable, regardless of control type:

• Help Text (tooltip icon) — Displays the HelpText assigned to the variable on hover.

• Generate Event with Current Value — Transmits the current value to connected widgets. Used when Global Variable Widgets have Auto-emit on variable change enabled.

• Editing and Configuration Options:

  • Configure — Opens a modal with Control Type, Help Text, and Group Settings (Group Settings appear only if a group variable was previously created).
  • Clear Value (X) — Removes the current stored value (lastValue).
  • Delete — Removes the Global Variable completely.

1. Anything

• Description — Variables of type Anything have no specific UI control for editing values. Values cannot be manually set or edited in the Global Variables Panel; they must be received from the workflow. The panel displays the value that the variable receives at runtime.

• When to use — Suitable for storing values of mixed types or when the type is not determined in advance.

• Usage examples:

  • Storing dynamic results from APIs that may return different data types
  • Storing intermediate workflow data that may vary in structure

Anything Variable Interface

• Name — Displays the variable name
• Value — Displays the detected data type (e.g., <String>, <Number>, <ImageData>). Read-only; reflects data from the workflow
• Editing and Configuration Options:
  • Additional Options — Additional actions may appear depending on the data type (e.g., copy or download tools for image-based values)
  • Standard actions — Described in the "Shared UI Actions" section above

2. Number

• Description — Control type for storing and managing numeric values. Accepts integer and decimal numbers.

• When to use — For numeric values that require manual entry or adjustment in the panel.

• Usage examples:

  • Temperature settings
  • Time limits in seconds
  • Percentage values

Number Variable Interface

• Name — Displays the variable name
• Value — Editable input field displaying the current numeric value. Supports direct numeric input and spinner controls (increment/decrement arrows) for value adjustment
• Editing and Configuration Options:
  • Standard actions — Described in the "Shared UI Actions" section above

3. Slider

• Description — Control type for numeric values adjusted through a visual slider. Requires defined minimum, maximum, and step values.

• When to use — When a value must remain within a fixed range and be adjusted via drag control.

• Usage examples:

  • Volume control
  • Threshold settings

Slider Variable Interface

• Name — Displays the variable name
• Value — Displays the current numeric value with a slider control. Value adjustment occurs via drag interaction with the slider handle
• Editing and Configuration Options:
  • Configure — Opens a modal with slider-specific settings:
    • Minimum Value — Lowest allowed number
    • Maximum Value — Highest allowed number
    • Step — Increment between values when dragging the slider
  • Standard actions — Described in the "Shared UI Actions" section above

4. Text

• Description — Control type for storing and managing single-line text values. Supports optional placeholder text.

• When to use — For short text values such as names, titles, URLs, etc.

• Usage examples:

  • Username
  • API URL
  • Document title

Text Variable Interface

• Name — Displays the variable name
• Value — Editable input field displaying the current text value
• Editing and Configuration Options:
  • Place Holder — Displays a hint in the input when the field is empty
  • Standard actions — Described in the "Shared UI Actions" section above

5. MultilineText

• Description — Control type for storing and managing multi-line text values. Supports optional placeholder text.

• When to use — For long texts, descriptions, message content, etc.

• Usage examples:

  • Product description
  • Email content
  • Extensive notes or comments

MultilineText Variable Interface

• Name — Displays the variable name
• Value — Editable multi-line input field displaying the current text value. Supports direct multi-line text input
• Editing and Configuration Options:
  • Place Holder — Displays a hint in the input when the field is empty
  • Standard actions — Described in the "Shared UI Actions" section above

6. Dropdown

• Description — Control type for storing and managing single selection from predefined options. Allows only one selection from a dropdown menu.

• When to use — When the variable must be restricted to a controlled set of predefined values.

• Usage examples:

  • Language selection
  • Notification type
  • Order status

Dropdown Variable Interface

• Name — Displays the variable name
• Value — Dropdown control displaying the current selected option. Supports single selection from the predefined list
• Editing and Configuration Options:
  • Options — Defines the list of selectable values available in the dropdown. Options are stored as an array of strings (string[]) and can include text or numeric values (e.g., "EN", "ES", "1", "2")
  • Standard actions — Described in the "Shared UI Actions" section above

7. Image

• Description — Control type for loading, visualizing, and managing images. Accepts ImageData data type.

• When to use — For storing images used in the recipe.

• Usage examples:

  • Company logo
  • Product images
  • User avatars
  • Background images

Image Variable Interface

• Name — Displays the variable name
• Value — Stores the image in DataURL format (Base64-encoded) and displays a preview thumbnail in the panel
• Editing and Configuration Options:
  • Upload Image — Loads images via drag and drop or file selection from the upload area
  • Change — Replaces the current image
  • Copy — Copies the image to the clipboard
  • Download — Downloads the current image file
  • Standard actions — Described in the "Shared UI Actions" section above

8. BinaryFile

• Description — Control type for loading and managing binary files of any type. Accepts BinaryFile data type, which can store files with any valid MIME type (e.g., image/png, application/pdf, text/plain, audio/mpeg, video/mp4).

• When to use — For storing files processed or used in the recipe.

• Usage examples:

  • PDF documents
  • Configuration files
  • Data in specific binary format

BinaryFile Variable Interface

• Name — Displays the variable name
• Value — Stores the file as a BinaryFile object with binary data encoded as a Base64 string. The stored structure includes the file's MIME type, filename, and Base64-encoded data. Displays file information (name, type, size) in the panel. For some types (such as images), a preview may be shown
• Editing and Configuration Options:
  • Change — Replaces the current file. Opens the system file explorer for file selection. Files can also be updated via drag and drop
  • Download — Downloads the stored file
  • Configure — Opens the configuration panel
  • Standard actions — Described in the "Shared UI Actions" section above

9. Checkbox

• Description — Control type for boolean values represented as an on/off toggle. Stores a true or false state.

• When to use — When a setting, option, or behavior requires enable/disable functionality via a simple toggle.

• Usage examples:

  • Enable or disable notifications
  • Turn a feature on or off

Checkbox Variable Interface

• Name — Displays the variable name
• Value — Displays the current boolean state as a toggle (On/Off). Toggle state changes update the stored value
• Editing and Configuration Options:
  • Configure — Opens a modal with checkbox-specific settings:
    • Default Value — Sets the initial toggle state (True/False) used when the variable is created
  • Standard actions — Described in the "Shared UI Actions" section above

10. MultiSelect

• Description — Control type for storing and managing multiple selections from predefined options. Allows selecting multiple options from a dropdown menu.

• When to use — When multiple options must be selected from a list.

• Usage examples:

  • Product categories
  • User permissions
  • Tags

MultiSelect Variable Interface

• Name — Displays the variable name
• Value — Multi-select dropdown control displaying the current selected options. Supports multiple selection from the predefined list
• Editing and Configuration Options:
  • Configure — Opens a modal with multi-select-specific settings:
    • Options — Array of strings with available options (e.g., ["Electronics", "Clothing", "Home"])
  • Standard actions — Described in the "Shared UI Actions" section above

11. Button

• Description — Control type that displays as a button and triggers actions when clicked. Stores boolean values.

• When to use — For creating controls that trigger events or actions in the recipe.

• Usage examples:

  • "Start Process" button
  • "Reset" button
  • "Export Data" button

Button Variable Interface

• Name — Displays the variable name
• Value — Button control that stores a boolean value and triggers an event when clicked. To execute the recipe when the button is clicked, connect a Global Variable Widget to this variable and enable Auto-emit on variable change in the widget settings
• Editing and Configuration Options:
  • Standard actions — Described in the "Shared UI Actions" section above

Use Case Description

Manual Control of Loop Execution Using Button Variables

This example demonstrates manual control of loop execution using Button Global Variables. One button initializes the loop with a predefined list of values; another button advances the loop step by step, providing manual control over item processing.

Drag the example onto the workspace to explore and experiment!

In this example

1. Button 1 triggers the Text Widget to output a JSON string (String data type)
2. The Text to Object Widget parses the string into an Array (Array data type)
3. The Loop Widget receives the array and initializes with three items (autoLoop disabled)
4. Button 2 triggers the Loop Widget next port (Boolean data type)
5. The Loop Widget advances and outputs the current item and index (String and Number data types)
6. Text Widgets display the current item value and index

12. Group

Description — A Group variable organizes Global Variables into logical sections within the Global Variables Panel. It does not store a value itself; it only contains other variables.

When to use — For organizing related variables into categories.

Usage examples:

• "Configuration" group with settings variables
• "API" group with credentials and endpoints
• "UI" group with interface variables

Key behavior:

• A Group has no value. Only variables inside the group store values.
• Once a Group is created, all other variables can be assigned to it using the Group selector in their configuration modal.
• Variables remain fully editable; the Group only affects organization.
• Groups can be nested inside other groups to:
  • Structure large configurations (e.g., App → UI → Typography)
  • Separate concerns within the same feature
  • Improve navigation in complex projects

Group Variable Interface

• Name — Displays the group name
• Variables — Displays variables nested within the group. Variables are displayed hierarchically under the group name
• Options Menu (⋯) — Available actions for managing grouped configurations:
  • Download configuration — Exports the group structure (with or without values) as a .json file
  • Copy configuration — Copies the group configuration to the clipboard
  • Paste configuration — Pastes a copied configuration, with the option to replace or merge
  • Import configuration — Imports a configuration from a .json file
• Editing and Configuration Options — Opens the configuration modal with the following fields:
  • Control Type — Fixed to Group and cannot be changed
  • Group — Allows nesting this group inside another existing group without using drag and drop
  • Standard actions — Described in the "Shared UI Actions" section above

 

Practical Use Case with Multiple Control Types

This example demonstrates multiple Global Variables with different control types used together to manage application-level configuration. A Slider Widget and a Dropdown Widget are grouped under a single configuration context, enabling interface-related settings—such as language and font size—to be adjusted dynamically and represented as a unified configuration object.

Drag the example onto the workspace to explore and experiment!

In this example

1. The Slider Widget updates its value and sends it to the Sequence Widget (Number data type)
2. The Sequence Widget executes sequentially: first triggers the language Global Variable Widget (Dropdown) to read its value, then triggers the font_size Global Variable Widget (Slider) to set its value (Number data type)
3. Both Global Variable Widgets (with reactive mode enabled) automatically transmit their values to the Object Widget (String and Number data types)
4. The Object Widget combines both values into a single object (JsonObj data type)
5. The Object to Text Widget converts the object to a JSON string (String data type)
6. The Text Widget displays the resulting JSON configuration

 

File and Image Handling

This section describes how Image and Binary File variables handle files once stored in the Global Variables Panel, including setting, viewing, and exporting operations. Control-type creation and basic upload methods are covered in the Control Types section.

Image Variables

Image variables store image data as ImageData objects and display thumbnail previews in the panel.

Setting Images:

• Images are added via drag and drop of an image file directly onto the variable
• Once added, the image is immediately stored and displayed in the panel

Viewing Images:

• The variable displays a thumbnail preview of the stored image
• The image is stored internally as Base64-encoded ImageData
• This enables image persistence across sessions and exports

Exporting Images:

• Download icon — Downloads the image as a file in its original format
• Copy icon — Copies the image data to the clipboard
• Download Configuration (Global Variables Panel) — Exports the variables configuration as JSON, with image data serialized in Base64 format

Drag the example onto the workspace to explore and experiment!

In this example

1. The workflow is triggered using Generate Event with Current Value in the panel
   • The Global Variable Widget requires Auto-emit on variable change to be enabled
2. The Global Variable Widget reads the ImageData from the source_image variable (ImageData data type)
3. The Image Filter Widget applies an invert filter to the image (ImageData data type)
4. The Display Widget shows the processed image

Binary File Variables

Binary File variables store files as BinaryFile objects. Each BinaryFile contains three properties: format (MIME type as a string), fileName (filename as a string), and data (binary content as an ArrayBuffer). When stored in configurations, the data property is serialized as a Base64-encoded string.

Setting Files - Files are added via drag and drop or the upload button. Binary File variables accept files of any type, including documents, archives, media files, and images

Viewing Files - The panel displays basic file metadata (name and size) but does not provide visual previews. All files are treated as generic binary assets, regardless of their MIME type

Exporting Files:

• Download icon — Downloads the stored file to the file system
• Configuration export — When exporting Global Variables as JSON, the file is included as encoded binary data

In the exported configuration, Binary File values include metadata such as the file name, MIME type, and encoded content.

Drag the example onto the workspace to explore and experiment!

In this example

1. The workflow is triggered using Generate Event with Current Value in the panel
   • The Global Variable Widget requires Auto-emit on variable change to be enabled
2. The Global Variable Widget reads the BinaryFile from the binary_file variable (BinaryFile data type)
3. The Get Property Widget extracts the format and fileName properties (String data types)
4. Two Text Widgets display the MIME type and file name respectively

 

Integration with the Global Variable Widget

The Global Variable Widget connects workflows to variables defined in the Global Variables Panel. See the Global Variable Widget documentation for complete details.

Variable Reference

The Global Variable Widget references variables through its Variable Name setting:

• When configuring the widget, a dropdown displays all variables available in the Global Variables Panel
• Selecting a variable name from the dropdown connects the widget to that variable
• Variable names cannot contain dots (.) or hyphens (-); use underscores (_) or spaces instead
• For grouped variables, use the full path notation (e.g., app.language)

When workflows are duplicated, saved and reopened, or copied into a clean Logic Mapper, only variables that were explicitly defined through Global Variable Widgets (or created in the Global Variables Panel) are loaded into the panel. Variables referenced only via inline expressions (for example $vars.score, $vars["session.user.name"], or Template String expressions such as {{$vars.department}}) are not automatically created or loaded unless they were previously defined as global variables.

Reactive Behavior

The Auto-emit on variable change setting controls how the widget responds to variable changes:

When Enabled:

• The widget automatically forwards the variable's value to connected child widgets when:
  • The variable is changed from the Global Variables Panel
  • The variable is changed by another widget via the setValue port
  • The widget's own setValue port is triggered
• Changes in the panel immediately propagate through reactive widgets to their connected children

When Disabled:

• The widget can store and read variable values but does not automatically forward them to connected child widgets
• To transmit the value, the read input port must be explicitly triggered
• When the setValue port is triggered, the value is stored and other reactive widgets subscribed to the variable are notified, but this widget does not forward the value to its own children
• This widget does not subscribe to external changes (from the panel or other widgets), so it does not automatically react to or forward those changes

Change Propagation

When a variable value changes:

1. From Panel — Changing a value in the panel notifies all widgets subscribed to that variable. Reactive widgets automatically forward the new value to their connected child widgets

2. From Widget — When a widget writes a value via the setValue port:

   • The value is immediately stored and reflected in the panel
   • All widgets subscribed to that variable receive a notification
   • Reactive widgets automatically forward the value to their connected children

3. Bidirectional Sync — Reactive widgets subscribed to the variable automatically forward the value to their connected children

Use Case Examples

Reactive Number Variables for Automatic Calculations

This example demonstrates reactive mode: a Global Variable Widget automatically forwards values to connected widgets when updated. With reactive mode enabled, changes propagate immediately through the workflow without requiring manual triggers.

Drag the example onto the workspace to explore and experiment!

In this example

1. The Global Variable Widget references the Factor variable (slider control type, Number data type) with Auto-emit on variable change enabled

2. The Slider Widget transmits a numeric value (2-10) to the Global Variable Widget setValue input port (Number data type)

3. The Global Variable Widget stores the value and, due to reactive mode, automatically forwards it to the Expression Eval Widget data input port (Number data type)

4. The Expression Eval Widget evaluates the expression data * $vars.Table, multiplying the input value by the Table global variable accessed via $vars.Table (Number data type)

5. The Display Widget receives the calculation result and renders it (Number data type)

Reactive Mode Behavior

With reactive mode enabled, value changes propagate automatically through connected widgets. When the slider value changes, the stored value updates and the calculation executes without manual intervention. In non-reactive mode, the read input port must be explicitly triggered to forward values to downstream widgets.

Note: In this example, the Factor variable is created and managed automatically by the Global Variable Widget in the snippet, while the Table value is read directly using $vars.Table. When you drag this snippet into the Logic Mapper, you only need to create the following variable in the Global Variables Panel:

• Table — Number control type, representing the base value for the multiplication (e.g., 5)

Boolean Variable with Conditional Logic

This example demonstrates reactive mode using a Boolean checkbox variable to control conditional workflow execution. When the checkbox state changes, the workflow automatically evaluates the condition and displays the appropriate message.

Drag the example onto the workspace to explore and experiment!

In this example

1. The Global Variable Widget references the isAdmin variable (checkbox control type, Boolean data type) with Auto-emit on variable change enabled

2. When the checkbox state changes in the Global Variables Panel, the Global Variable Widget automatically transmits the updated Boolean value to the Conditional Widget

3. The Conditional Widget evaluates the input value against the configured condition (Equal to true). Based on the evaluation result:

   • If the condition is satisfied (true): The then output port is triggered
   • If the condition is not satisfied (false): The else output port is triggered

4. Conditional execution branches:

   • True branch: The then output triggers a Text Widget that outputs "Access Granted"
   • False branch: The else output triggers a Text Widget that outputs "Access Denied"

5. The final Text Widget receives the string value through the setText input port and renders the message

Reactive Mode Behavior

With reactive mode enabled, toggling the checkbox in the panel immediately updates the stored value and triggers the conditional evaluation. The workflow executes automatically without manual intervention, demonstrating real-time reactive updates for Boolean-based conditional logic.

 

Use Cases and Examples: Centralized Recipe Control

The Global Variables Panel acts as a centralized control layer for recipes. Global Variables are not limited to manual configuration in the panel. They can be:

• Defined or updated by scripts
• Read by widgets, expressions, and services
• Referenced dynamically using Template String and Expression Eval
• Used together with secrets for secure configuration values

This enables recipes to separate logic from configuration, shared data, and environment-specific values.

Centralized Message Composition

This example demonstrates how Global Variables centralize configuration values used across a recipe. Message parts such as prefixes, suffixes, and shared labels are stored in the Global Variables Panel and read by a Template String Widget at runtime. Updating any value in the panel immediately affects the rendered message without changing the workflow logic.

Drag the example onto the workspace to explore and experiment!

In this example:

1. Global Variables provide the message components:

   • Grouped variables from the welcome_msg group, accessed with:

     $vars["welcome_msg.msg_prefix"]  // "Welcome to Kemu"
     $vars["welcome_msg.msg_suffix"]  // "We are glad to have you onboard!"

   • Standalone variable, accessed with:

     $vars.department  // "Support"
     

2. The Text Widget supplies the name (e.g., "Maria")

3. The Button Widget triggers the entire workflow

4. The Template String Widget combines:

   • the grouped variables,
   • the standalone variable,
   • and the input value

   with the following template:

   {{$vars["welcome_msg.msg_prefix"]}}
   {{$vars.department}} team,
   {{input.value}}!
   {{$vars["welcome_msg.msg_suffix"]}}

   Using the example values, the final message would be:

   Welcome to Kemu
   Support team,
   Maria!
   We are glad to have you onboard!

5. The final Text Widget displays the completed message

Note: In this example, the global variables are referenced directly using $vars[...] notation and no Global Variable Widget is used. When you drag this snippet into the Logic Mapper, you must first create the required variables in the Global Variables Panel:

• A Group variable named welcome_msg
• Inside that group:
  • msg_prefix — Text control type, value: "Welcome to Kemu"
  • msg_suffix — Text control type, value: "We are glad to have you onboard!"
• A standalone variable department — Text control type, value: "Support"

Dynamic Global Variables with Script Initialization (Session & 2FA)

This example demonstrates how Global Variables are created and structured dynamically at runtime using a script. The workflow initializes a session state, generates user-related data, and creates a session-level Two-Factor Authentication (2FA) code, all without predefining any variables in the Global Variables Panel.

Drag the example onto the workspace to explore and experiment!

In this example:

1. The Button Widget triggers the workflow and starts the session initialization

2. The Script Widget runs and creates the Global Variables structure at runtime:

   • Creates the top-level session group
   • Creates the nested session.user group
   • Sets session.user.name and session.user.surname
   • Generates a random 6-digit 2FA code
   • Stores the code as session.2faCode

3. The Script Widget reads back session.2faCode and sends it through its output port (2FA Code)

4. The Template String Widget formats the final message using:

   • Nested Global Variables: $vars["session.user.name"] and $vars["session.user.surname"]
   • The workflow input value (the 2FA code): {{input.value}}

5. The Text Widget renders the final message:

   Rendered output:

   Hello John Doe !!
   
   This is your verification code:
   806715