Intro

Lets take a look at most important elements of data management in the UI Bakery.

Trigger - something that a user or the app should do to launch an action. For example: On mouse click, on select, on load.

Action - an event that receive/send/modify data in your app. It could be used in various cases. For more details see the section undefined

App state variable - a special variable that could store data and be used across different features in UI Bakery. For more details see

To connect data to UI elements you need to follow 3 steps:

1. Create an app state variable (if needed)
2. Create an action that need to happen
3. Select a UI element > go to Data settings.
4. Select a trigger event > set an action from the step 2

After that whenever the trigger happens, the system will execute the set action.

Let’s create an action that navigates use to another page by the click on the button Navigate:

1. For this event we won't need a variable so we can skip this step
2. We need to go to the Data tab and create a new action > Type: Navigation > Page path: %URL of the target page% or selection from the pages of the current UI Bakery project. For this example let’s take the Home page

3. Now we can go to the Builder tab and add a new button > go to the Data settings:

4. The button element has only one trigger: On click. That is just what we need. We can select an action from the step 2 for this trigger:

5. To view the result of our work we need to launch the Preview mode and click on the button from the step 3. This action will navigate us to the page that is set in the Navigation action from the step 2

‍

This example is very simple and data connection is capable on more advanced actions. Among them: loading data from and to server with HTTP request or manipulation with data for dynamic changes of UI elements. You can find more detailed description in the sections below.