State Variables allow users to create Temporary (for the user session, resets on refresh) and Local Storage (stored in the browser across sessions) variables for their Superblocks Applications. The Local Storage variant makes use of the browsers Storage interface to write data to and read data from the client.
Variables can be used by builders to store local state in their applications for use-cases like: caching and re-use of intermediate state across different APIs/Components.
The context menu for state variables is located in state variable panel on the left-hand side of the App Builder.
Create a variable
Create a variable from the state variable panel
To create a variable from the state variable panel open the VAR section from the state variable panel and click on the Add button. Choose whether to create a
Temporary state variable or a
Local Storage state variable from the dropdown menu.
By default the value of a new variable will be set to
To change the default, set the variables Default value in the properties panel on the right-hand side of the app builder:
The values passed to a state variable will be parsed as JSON. A variable can hold any type of data, including an object with multiple key-value pairs:
The value a state variable has will be displayed in the context menu. If a state variable holds more than one key-value pair then the list will have an entry for each pair:
Create a variable from the Properties Panel
State variables can also be created from the event handler menu in the applications properties panel.
Select Set State Variable from the list of available action types. Click on State Variable to open the dropdown menu and create a new
Temporary State Variable or
Local Storage State Variable:
Delete a variable
To delete a state variable, select the variable from the state variable panel, click on the three-dots menu and click on Delete:
Set a variable
State variables are stored on the client. Therefore, they live in the frontend scope of an application and cannot be set from a backend API.
Set a variable by an event handler
Set a variable from code in Run JS (Frontend)
Set state variables from code using the predefined variable.set() and variable.setProperty() functions that can be executed from Run JS action types in the frontend of your Superblocks Application. There are important considerations when using frontend variables to avoid retrieving stale values.
Reset a variable
Reset a variable from the state variable panel
To reset a state variable to its default value, select the variable from the state variable panel and click on the Reset to default icon. If the user has not defined a custom default value, value is reset to
null. A state variable can also be reset using an event handler.
Reset a variable by an event handler
Reset a variable from code in Run JS (Frontend)
Reference a variable
Reference variables in the frontend
Using the binding syntax, the data stored in a state variable can be referenced by any frontend component in your Superblocks Application:
Reference variables from the backend
In the example below the value of the
name property that is stored in the state variable