Wized Docs

Appearance

Variables ​

Variables are used to store any kind of data that can be accessed across your app. They can be accessed via the v keyword in the Function Editor.

Creating a variable ​

To create a variable, click the + button in the Variables section of the Data Store. The following fields are available:

  • Name: The name of the variable. This name must be unique and will be used to access the variable via v.variable_name.
  • Initial value: Optionally, you can set an initial value for the variable using a Function.
  • Persist in storage: If set, the variable's value will be persisted in the browser's storage.
  • Computed: If checked, the variable will become a computed variable.

Persisting a variable's value ​

By default variables are not persisted, this means that their value will be reset whenever the app is reloaded. To persist a variable's value, you can define in the Persist in storage field:

  • Session Storage: The variable's value will be persisted in sessionStorage. This means that the value will be reset whenever the browser tab is closed.
  • Local Storage: The variable's value will be persisted in localStorage. This means that the value will be reset whenever the browser's local storage is cleared.

Once defined, any time the variable's value changes, it will be stored in the designated storage. If a value exists in the storage when loading the app, it will be used as the variable's initial value instead of the one defined in the Initial value field:

Persisting values in the browser's storage has a few differences from using Cookies:

  • Cookies are sent to the server with every request, while values stored in the browser's storage are not.
  • Cookies are stored as strings, while persisted variable values can be any type as long as it can be serialized to JSON. Wized takes care of serializing and deserializing the values for you.
  • Cookies can be set to expire after a certain amount of time, while persisted variable values will remain in the storage until they are removed.
  • Cookies maximum size is 4KB, while the maximum size of a value stored in the browser's storage is 5MB.

Tip

Whenever the variable's value is set to null or undefined, it will be removed from the storage.

Creating a computed variable ​

A computed variable will check all the initial value's dependencies and update its value whenever one of them changes. This is useful for creating variables that depend on other variables.

Example: You can create a variable v.total that depends on i.price_1 and i.price_2. Whenever one of these input fields changes, v.total will be updated too:

js
(c, f, i, n, r, v, e, t) => {
  return i.price_1 + i.price_2; 
};

Here's the result:

Updating a variable ​

To update a variable, you can either use the Set variable action or use custom JavaScript.

Updating a variable using JavaScript ​

WARNING

This is an advanced feature and should only be used if you know what you're doing.

All variables can be updated using custom JavaScript instead of relying on the Set Variable action. Any changes made to a variable using JavaScript will be reflected in the app's state, triggering any dependent actions.

Updating a variable inside the Function Editor

To update a variable inside the Function Editor, you can simply assign a new value to it:

js
(c, f, i, n, r, v, e, t) => {
  v.variable_name = 'new value'; 
};
Updating a variable via the JavaScript API

Variables can also be updated via the JavaScript API:

js
Wized.data.v.variable_name = 'new value';