App State variables
Set temporary state values
State variables function as temporary storage while users interact with your app. They reset to their initial values upon a page refresh or when the app is closed. State variables persist solely within a single page.
For persistent storage that remains intact upon page reloads, consider exploring the Local Storage documentation.
State variables come in two scopes: app and page. App scope variables maintain their values across different pages, while page scope variables retain their values only within the specific page.
A state variable can possess the following attributes:
- Name - the unique identifier;
- Type -string|number|boolean|object|arrray;
- Initial value - the starting value of the variable.
To create a
state variable, follow these steps:- 1.On the App Structure pane, click the + icon near the State tab.
- 2.Give your variable a name, select scope, type, and assign its initial value.
- 3.Click Save.
Now this variable is available in your UI Bakery app. You can read and write to this variable.
Upon creating a state variable, it becomes accessible within the app.
You can assign a value to the variable using the "Save to State" action or directly through JavaScript code blocks.
Within the app, all variables can be accessed using the
{{state.<variableName>}} scope:
To store a value within an action, follow these steps using the Save to State action step:
- 1.Choose Save to State.
- 2.Select the variable you wish to modify.
- 3.Define a new value, which can either be hardcoded or derived from an available variable, such as
{{data}}to reference the result of a previous action step, or{{ui.component.value}}to access a component's state.
The Save to State step neither returns the stored value nor changes the
{{data}} variable of the next action step.Additionally, you can save state values in any JavaScript code block:
state.varName = 'newValue';
// or using setValue method
state.setValue('varName', 'newValue');
read with the
state.getValue method:const value = state.getValue('varName');
reset a variable to the initial value:
state.resetValue('varName');
or reset all variables:
// reset all variables, page and app state
state.resetValues();
// reset all page variables
state.resetValues('page');
// reset all app (global) variables
state.resetValues('app');
Let's check how to use a state variable on an example. Say you have a text component and would like to reset its' value after a comment is left. Here's how to do that:
- 1.Create a state variable of a string type.
- 2.Assign the state variable to the text Value field:
3. Create a Save to State action, that will save the new comment and assign it to the On Change trigger of the text component:
4. Next, add another Save to State action, that will reset the comment:
5. Finally, drag a button onto the working area and assign the reset action on its On Click trigger:
Last modified 4mo ago