Variables

Variables in Wized act as dynamic containers that store data in real time, making them an essential part of your application's state. Wized variables are reactive, meaning that any change to their value automatically updates all elements, events, or configurations that depend on them.

They can store various data types, including:

• Text (strings)
• Numbers
• Booleans (true or false)
• Objects
• Arrays (lists)

These variables allow you to create logic-driven behaviors, such as showing or hiding elements, triggering events, and modifying element configurations based on their current values.

Important

Variable values reset to their initial state every time the page reloads or navigates to another page. To maintain values across pages, use cookies or enable the persist values option.

Managing variables in the data store

The Variables section within the Data Store provides a clear overview of all created variables, including their names, current values, and persistence settings. Here’s what you can do:

• View existing variables: See a real-time list of all stored variables and their values.
• Create new variables: Click the "+" button to define a new variable.
• Modify variables: Click a variable to edit its name or value.
• Delete variables: Click the trash icon next to a variable to remove it.

Configuring variables

When creating or modifying a variable, you can define the following properties:

1. Name

Choose a clear, descriptive name.
Example: If storing a username, name the variable userName instead of var1.

2. Initial value

Set the starting value using the function editor.
You can use any data available in Wized, such as cookies, API responses, or user inputs.

3. Persistence options

Variables can persist across different scopes:

• None (Default): The variable resets when the page reloads.
• Session Storage: The variable persists as long as the browser tab is open.
• Local Storage: The variable remains saved even after the browser is closed.

Example

If storing a shopping cart, session storage ensures it remains available while the tab is open, whereas local storage keeps it even after closing and reopening the browser.

4. Computed variables

If enabled, the variable automatically recalculates whenever any of its dependencies (such as API data or user inputs) change.
Useful for values that must update dynamically without manual intervention.

---

Using variables in the function editor

Once created, variables can be accessed and manipulated directly within the function editor.

Accessing a variable

To use a variable, prefix its name with v.
Example: If you have a variable named username, retrieve its value using:

return v.username;

Practical Use Cases

1. Displaying dynamic text

return `Welcome, ${v.username}!`;

• Calculate the total price of a shopping cart:

// In the "Set Text" configuration of an item that displays the total price:

let total = 0;

for (const product of v.cart) {

total += product.price * product.quantity;

}

return `Total: $${total.toFixed(2)}`;

• Controlling the visibility of an element:

// In the "Set Visibility" configuration of an element:

return v.showElement; // Show the element if v.showElement is true, hide it if false

Variables and reactivity

Variables in Wized are reactive, meaning that any change in their value will trigger an automatic update of events and configurations of elements that depend on them. This allows you to create dynamic and responsive user interfaces without the need to reload the page.

• Example:

  Imagine you have a button that, when clicked, increments a counter stored in a variable called v.clickCount . You also have a text element that displays the value of this counter.

  1. Event: On Click on the button
  2. Action: Set Variable to increment the counter: v.contadorClics += 1;
  3. Configuration: Set Text on the text element, with the return value Clicks: ${v.contadorClics} ;

  Every time the user clicks the button, the event will fire, the v.ClickCount variable will increment, and the element's text will automatically update to reflect the new value, all in real time!