Variables

Introduction

In Wized, variables serve as temporary containers that allow you to store and manage specific information. You can store various data types, including text, numbers, booleans (true or false), objects, and arrays (lists). These variables enable you to access and utilize the information across different sections of your application, offering significant flexibility for creating dynamic and personalized interactions.

Why Use Variables?

• Display Dynamic Information: Utilize variables to present custom content on your website, such as a user's name, the outcome of a calculation, or data retrieved from an API.

• Control Application Behavior: Variables empower you to make decisions and execute different actions based on their values. For instance, you can show or hide elements, alter styles, or redirect users to various pages depending on a variable's state.

• Simplify Logic: Storing information in variables helps you avoid code repetition, making your logic clearer and easier to maintain.

Creating and managing variables in the Data Store Panel

In the Data Store Panel, you will find the "Variables" section where you can:

• View existing variables: You'll see a list of all the variables you've created, along with their current values.
• Create new variables: Click the "+" button and define their name and initial value using the Function Editor.
• Modify variables: Click an existing variable to edit its name or value.
• Delete variables: Click on the variable you want to delete and then the trash can icon to delete it.

Variable Configuration Options

• Name: Choose a clear name for your variable so you can easily identify it later. For example, if your variable stores the username, you might call it userName.

• Initial Value: Define the initial value of the variable using the Function Editor. You can use any data available in Wized, such as cookies, API responses, or user input.

• Persistence:

  • None: The value of the variable will be lost upon reloading the page (default).
  • Session Storage: The value of the variable will persist during the user's session, even if they navigate to other pages within your application. This value will be removed when the tab or browser is closed. For example, if you store the shopping cart value, it will remain available as long as the tab is open.
  • Local Storage: The value of the variable will persist even after the user closes the browser, allowing information to be remembered between sessions.

• Computed: If you check this option, the value of the variable will be automatically recalculated whenever any of its dependencies (other data used in its initial value) change. This is useful for creating variables that depend on other data and need to be updated in real-time.

Variables and the Function Editor

Once you've created your variables in the Data Store Panel, you can access and use them in the Function Editor to create conditional logic, perform calculations, display dynamic information, and more.

Accessing Variables in the Function Editor

To access the value of a variable in the Function Editor, use the v prefix followed by the variable name. For example, if you have a variable named username , you can access its value using v.username .

Examples of using variables in the Function Editor

• Display a custom welcome message:

// In the "Set Text" configuration of a text element:

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!