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.

Creating a state 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.

Working with a state 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.

Read variable value

Within the app, all variables can be accessed using the {{state.<variableName>}} scope:

Save to State action

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.

Save and reset variable value with code

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');

Use case: resetting a text field after sending the data

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: