Frontend Variables
Frontend Variables were previously known as State Variables. While the naming and Superblocks UI has changed slightly since the recording of the video below, the core concepts remain the same.
Frontend 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 browser's Storage interface to write data to and read data from the client. With frontend variables, application builders can implement caching and re-use of intermediate state across different APIs / components.
Create a frontend variable
To create a frontend variable, open the Navigation panel then click the + sign next to Frontend Variables. Choose whether to create a Temporary variable or a Local storage variable from the dropdown menu.
![Create a new frontend variable from the Navigation panel Create a new frontend variable from the Navigation panel](/assets/images/state_variables_create_new-725b4bfb107a5200513941421987ea39.png)
Click into the variable to open its properties panel where you can set the Default Value (initially an empty string, ""
) as well as edit the Persistence after creation.
![Set a default value for a frontend variable in the properties panel Set a default value for a frontend variable in the properties panel](/assets/images/state_variables_set_default_value-b8fe770f6fc3008c4c5a4b2c4345df90.png)
Alternatively, frontend variables can be created from a component's event handler menu when using the Set Frontend Variable action type. Under Variable, open the dropdown menu to create a new temporary variable or new local storage variable.
![Create a new frontend variables from a component's event handler menu Create a new frontend variables from a component's event handler menu](/assets/images/state_variables_create_new_from_properties_panel-5583650ce4d5e79db3c21dad052c11d1.png)
Delete a frontend variable
To delete a frontend variable, click the more options menu (...
) next to the variable in the Navigation panel, then click Delete.
![Delete a frontend variable Delete a frontend variable](/assets/images/state_variables_delete-5b5409befc99d6000085985e17e397e7.png)
Set a frontend variable
Frontend 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 frontend variables in response to events using the form-based Set Frontend Variable action type in an event handler.
In addition, you can set frontend variables from code using the predefined variable.set()
and variable.setProperty()
functions in frontend Run JS actions. Note these important considerations to avoid retrieving stale values when setting frontend variables in code.
Inspect a frontend variable
To see the current value for a frontend variable, go to the State Inspector panel and expand the variable dropdown.
![See a variable's value in the State Inspector panel See a variable's value in the State Inspector panel](/assets/images/inspect_variable_value-3eddf72083becb2cf3ed478f2198af03.png)
In the same State Inspector panel, you can also click the more options menu (...
) next to the variable, then click Expand State to open an isolated view of only the selected variable's state. Click ← Show full state inspector
to go back to viewing the state of all resources.
![Expand state for a frontend variable Expand state for a frontend variable](/assets/images/expand_state_button-b6b90844c3491457c78ca4d2cd61e2dc.png)
![Isolated state for a variable Isolated state for a variable](/assets/images/expanded_state-7dccc46c6243b80849bd4b619914264c.png)
Note, you can open the same isolated view of a frontend variable's state from the Navigation panel with View state.
![](/assets/images/nav_view_state-464051229bad75473926cf5e3b1e1195.png)
Reset a frontend variable
Reset from state inspector
To reset a frontend variable to its default value, click the more options menu (...
) next to the variable in the State Inspector panel, then click Reset to default.
![Reset a frontend variable to its default value from the State Inspector Reset a frontend variable to its default value from the State Inspector](/assets/images/state_variables_reset_to_default-0ad44ec4a64c573792dcf2862a99b79e.png)
Reset with event handler
Reset frontend variables in response to events using the form-based Reset Frontend Variable to Default action type in an event handler.
In addition, you can reset frontend variables from code using the predefined variable.resetToDefault()
function in frontend Run JS actions.
Reference a frontend variable
You can reference frontend variables in components, frontend code, and backend APIs using <VAR_NAME>.value
.
When referencing variables in non-language steps (i.e. not JavaScript and not Python) as well as non JS form fields, be sure to surround variables in {{}}
bindings.
Some examples include:
Frontend component
![Reference frontend variable in a Text component Reference frontend variable in a Text component](/assets/images/reference_var_component-723a978831e993eb99e60e98d4dedf4c.png)
Backend SQL step
![Reference frontend variable in a SQL step Reference frontend variable in a SQL step](/assets/images/reference_var_sql-6dc33623d00ee385d112f7b84c38936a.png)
Backend condition block
![Reference frontend variable in a Condition block Reference frontend variable in a Condition block](/assets/images/reference_var_js_field-cb39fbce3282977eec64f228c2d20e98.png)
Backend Python step
![Reference frontend variable in a Python step Reference frontend variable in a Python step](/assets/images/reference_var_python-d71ca46d39b1a4e17d55bd7580ccf5e8.png)