State Variables

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 null:

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

info

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 state variables in response to events using the Set State Variable action type that can be triggered by event handlers.

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 State Variables in response to events using the Reset State Variable to Default action type that can be triggered by event handlers.

Reset a variable from code in Run JS (Frontend)

Reset state variables from code using the predefined resetToDefault() function that can be executed from Run JS action types in the frontend of your Superblocks Application.

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:

State Variables can also be referenced in Run JS action types which is JavaScript that runs in the frontend. In this case the binding syntax is not needed:

Reference variables from the backend

In the example below the value of the name property that is stored in the state variable TempVar1 is returned from a JavaScript step in a backend API: