App state manager

The app state variables - are special variables that you can use in your UI Bakery project. They could be used  in action steps and other places where you can link data to UI elements.

You can manage variables in the special pop up. To open it go to the tab Data  and click on the button “App State Variables” at the top left corner:

To add a new variable click the button “Add new”:

For each variable you need to set 3 parameters:

  1. Name
  2. Type
  3. Initial value


Name of the variable. Make sure that every name is unique so that you always select proper variable.


There are following types of variables:

  1. String - for texts
  2. Number
  3. Boolean- true/false statements
  4. Object - and array of elements or a complex object with several parameters. This type of variable supports the JavaScript syntax.

Initial value

In the field “Initial value“ you can enter the default value of the variable. If you won’t enter anything it would be ““, 0, False or NULL depending on the type of variable.

When everything is done save you changes with the button Save:

Variable overview

Maybe you’ve noticed additional field: “Variable overview“. In this field you can see the current value of the selected variable. If you just created the variable it will be equal to the field “Initial value“. If you

  1. Go to the Preview mode
  2. Launch an action that changes that variable
  3. Return to the “App state variables” pop-up

You will see the changed value of the variable

You can’t edit this field.

Variables management

If you need to create a slightly different version of an already existing variable worry not! We have a duplicate function. Just select a variable that you want to duplicate and click on the “Duplicate“ icon:

And if you want to delete a variable that you no longer need, just click on the “Delete icon“:

Variables usage

You can use variables in the fields that are marked with a special icon:

Click on the icon and you will see all available variables:

There are two types of variables:

  1. Created by you in the App state variables. In the dropdown they are in the App section
  2. The variables that we create automatically. You won't see them in  App state variables:
  3. UI section: variables for UI objects in the current project
  4. Event section: the results of the previous steps (if applicable)
  5. Active page section: variables for the URL and Query parameters of the active page

Some of the variables has parameters. You can access them same as in JavaScript: “variable”.”parameter”

Need some help?

Didn't find something here? Drop us a line at