UI Bakery variables

UI Bakery variables serve as the glue that binds both Action data to UI components/Actions and Component values to Actions/other Components. UI Bakery variables are always wrapped with {{ }} to distinguish them from JavaScript variables.

You can use component values, action results, state variables, page parameters, etc. as variables.

Variables can be used inside Component and Action properties. For non-text component properties, you can switch to the JS mode to use variables.

To start searching for a variable, you just need to type {{ in the code or text field, and a variables selector will appear.

Use Option ⌥ + Esc (Mac) or Ctrl + Space (Windows/Linux) as shortcuts to open the variables selector.