App & page triggers

UI Bakery allows you to set specific triggers for the whole application and individual pages as well. In this article, we'll describe all the available triggers and how you can configure them, with some use case examples.

App & page triggers are located in the right side panel in the Builder, when the app page is in focus.

The following triggers are available:

• Page triggers

  • On Page Load

• App triggers

  • On App Load

  • On Page Load

  • On App Data

Once you assign actions to these triggers, they'll be executed for the entire app or for a specific page. If you select the Delay actions and show loader checkbox for specific triggers, they will be executed first, if not - the actions assigned to all triggers will be executed in parallel.

Page triggers

On Page Load

This trigger is available on both page and app levels. The difference is that on the page level it triggers an event only for the specific individual page you configure it for.

Some of the most common use cases here may be the following:

• Fetching page-specific data (for example, loading records for a detail view)

• Redirecting if not authenticated

App triggers

On App Load

This trigger fires an event when the application is initialized. It can be useful when you want the system to first make all the necessary requests to the database or API before rendering the application. For example, you may have different user roles available, and you first need to learn the role before loading the data specific to that role. Or you may need to fetch configuration data and feature flags first, as well as apply themes and localizations. Here, you can check the app localization and theme configuration examples that you can use in your application👇

Internationalization (i18n) & Localization: Translating UI Bakery AppsChanging theme from the app

On Page Load

On the app level, this trigger fires an event not for a specific page but for each page in this application. For example, you want to track page views for all the pages in your app - you can assign this tracking action for the On Page Load trigger. It will gather this information each time every page in the app is loaded. This is more convenient than assigning the action to the trigger on the page level.

On App Data

This trigger fires a specific event when the Data value of your component changes. For example, you have embedded another app inside your application and you want the users to be informed of any changes to its Data. You can show an alert for them in this case by assigning your action to this app trigger. This way, every time any changes are made to the Data value of the embedded app component, users will see a notification.