Working with variables

Variables enable you to manage state throughout your application, allowing you to create dynamic and interactive components.

Create a variable

Live

To create a variable:

1. 1

   Open the data panel with no element selected
2. 2

   In the Variables section, click the + button
3. 3

   Enter a name for your variable
4. 4

   Set an initial value (can be a static value or formula)

When you create a variable, its default initial value is null. You can either keep this default value or specify a different initial value:

• Static values: You can directly enter text, numbers, booleans, arrays and JSON objects etc.
• Formula-based values: Click the fx button to open the formula editor to create a dynamic initial value

The initial value serves several purposes:

• Provides a starting state for your component
• Determines the implicit data type of the variable
• Ensures the variable has a known value before any user interaction

Initialization examples:

• 0 creates a numeric variable
• "" (empty string) creates a string (text) variable
• [] creates an array variable
• {} creates an object variable
• true or false creates a boolean variable
• null is the default and can be used when the actual value will be set later

You can update variables using workflows or events:

1. 1

   In a workflow or event add a new action by clicking the + button
2. 2

   Select in Variables the Set: variable action for desired variable
3. 3

   Specify the new value (static value or via a formula)

You can connect variables to element properties through binding to dynamically control the appearance and behavior of your components.

To bind a variable:

1. 1

   Select the element in the element tree
2. 2

   Find the property you want to bind
3. 3

   Click the fx button next to the property
4. 4

   In the formula editor, select your variable from the available options
5. 5

   Add any additional logic if needed (transformations, conditions, etc.)

You can bind variables to various aspects of elements:

• Attribute values ( text, src, href, etc.)
• Classes (see conditional styling)
• Show/hide functionality (with boolean conditions)
• Repeat formulas (using arrays to generate multiple elements)
• Workflows and actions (as inputs or conditions to control logic)

For input elements, Nordcraft provides a convenient shortcut to create two-way binding with variables:

1. 1

   Select an input element in the element tree
2. 2

   In the Attributes tab, find the 'Bind to variable` dropdown
3. 3

   Choose an existing variable or create a new one

This is a shortcut that automatically sets up:

• A binding of the variable to the input's value attribute
• An event handler on the input event that updates the variable when the user types