Get an overview

Build your first app

Discover AI features

Imagine building your internal app as your idea flows?

Meet UI Bakery 🍩 - a platform for creating internal software with two ways to build apps:

• Low-code experience (drag-and-drop + AI) - Connect your data, assemble your UI with drag-and-drop, use our and features to help you quickly build what you need with AI, and deploy the result app to your users.

• AI-only experience - Generate fully functional apps from plain-text or visual prompts, customize the React code directly or ask AI for changes, and deploy the app instantly and securely.

Explore the best approaches to working with components in UI Bakery.

So far in our flow we haven't been using the Form component, but in this article we will explore how you can link a Form with a Table and share data and state between them. One of the most common scenarios here may be when you want to display a selected row of a table inside a form. So how can you do that?

Start by dragging and dropping the Form component into the working area, if you haven't added it yet. Then, you need to reference your table component and use the data of the selected row property inside the Data field of the Form component. Simply start typing double curly braces to access the selection of variables.

Now, when selecting a row in the table, the data from this row will be displayed separately in the form.

UI Bakery allows transforming the data that comes from a database or an API by writing JavaScript code. You can do this by adding another action step inside your action and adding JavaScript code that will do what you need. Below, we'll show you how to do that based on the use case of adding a Full name property as a concatenation of the First and Last name properties.

To transform your data with JS:

1. Go to your action (for example, Load Users) and add another action step of the JavaScript Code type.

2. Next, write your code in the JavaScript field. In our case, we added the following code:

1. Click Execute action.

Your new property will be added to the result of the Load Users action as well as to the list of table columns. All components connected to this action will now also receive a new data set.

Now, you can add another column to the table that will display the Full name of the user. You can also change the order of the columns and hide the ones that display First and Last name separately.

That's it! Now let's proceed to the and find out how you can change your component data.

If you want to learn more about data mapping and transforming, have a look at this article 👇

Next step is to learn how you can modify the data in the Form and push it back to the data source.

To send a form:

1. Select your Form and navigate to the Triggers section.

2. Select On Submit in the first dropdown menu, and next click Create action in the Select action menu.

1. For the new action, select your data source and the appropriate step, for example, Update row.

2. Choose the table, if needed, and specify the field and values that you want to update.

1. If you're not using an HTTP request, you need to configure the following:

• In the Filters section, configure the identifier that will be used for record matching. You can refer to it as:

formName is the name of your Form component, fieldName is the name of the field.

• In the Configure Row section, add {{ui.formName.value.fieldName}} to the value of the field you want to update.

To save time configuring each field separately, you can switch to JS mode in the Configure Row section and send the form value object as:

1. Now, click on the plus sign under the update action step and select Execute Action from the list. This will trigger another action after the first one (update action) is completed.

2. In the Action to execute dropdown, select the action that loads your data.

1. Modify any values in the form and click Submit. If everything is configured correctly, it will change the form value, and the table will be updated with new values as well.

Drag’n’drop responsive UI

Build interfaces of any complexity utilizing our components, without the need to learn CSS and JS frameworks.

Code and no-code business logic

Effortlessly CRUD your data, add conditions, iterate through it, and debug with UI Bakery Actions.

Deploy with a single click

Invite your users and instantly ship mission-critical updates to them.

Want to know more about low-code building with UI Bakery? Go ahead and check out this overview video👇

Components are the building blocks of the application interface. There are a number of prebuilt components available in UI Bakery. You can also build custom components using React, jQuery, ViewJS, or JavaScript.

Check out the articles in this section to learn more 👇

Once you've bound your data to a component, it doesn't mean you can't change it - say replace a list of Users with a list of Orders. You just have to follow the same flow as you did before when you were running your Load Users action.

Just to remind you, first you need to create a new action to fetch your data and select a new table you want to load, for example Load Table > orders. After you execute the action, simply bind the new data from the action to the Data field of the respective component.

As simple as that! The component will be regenerated based on the data structure of the new action data.

Debugging is a vital part of the software development process. In UI bakery, debugging information can be accessed using an additional panel inside of your action. Here you can see the payload that has been sent to the UI bakery data source. Besides that, you can access additional debugging information in the Logs tab. It displays the history of action executions and its different lifecycle states. This can be useful if your action has several steps and uses the result or error mapper.

To give you an example of how it works, let's set an incorrect value for the filter we've configured in the previous step and see what happens when we try to execute the action. Now we get error messages both in the toasts and in the Logs tab. To fix it, we simply need to modify the value and set a correct one. When we try running the action now, it works as expected and the data is displayed correctly.

Building an app with UI Bakery is easy and pretty straightforward. You can start building your internal app following the basic flow and make any other improvements to it later on.

Ready to dive in? Go ahead then:

Now that you've built your UI, it's time you connected a data source. First-time users will have to do it following the instruction below. Next time though, since data sources are reusable across all your applications, you will simply have to select a previously connected data source in the list of Data sources and start using it right away.

To connect a new data source:

1. Go to the Data Sources tab in the left side panel and click Connect.

UI Bakery also allows you to use custom JS code throughout the application. Check out some examples below of utilizing JavaScript in UI Bakery 👇

After you sign up for UI Bakery, you can start building your application. As an admin of your workspace, you can invite team members and other users to it, create apps together, share access, and manage roles and permissions. All the apps created within your workspace are available to all users based on their permission level.

To start building a new app, click the + button in the Apps section of the workspace menu and select App. You can choose an icon and color for your application. Another option is to create a new app from via + > From template. You can select a template from the list of available ones or select a blank template to start from scratch. You can also check our for even more templates!

The app you created will immediately open in the Edit mode.

From the app creation menu here, you can also import an app from a ZIP archive or a linked GitHub repository. It gives you the flexibility to save and move your data without having to recreate apps across different workspaces.

We have a separate article on exporting/importing apps if you feel like exploring it further

Action is a piece of business logic implemented in your application. You can use it to load the data from a data source, send the data back, make API calls, navigate to app pages, generate PDF documents, and process any type of data with SQL or JavaScript.

Check out the articles in this section to learn more 👇

Learn how to adjust the style and appearance of your components.

You’ve successfully connected your data source and now you can start loading data from it to display it or send it to your API or database. One of the most common operations you would do here is loading a list of objects. In order to do this, you have to create and execute a Load Table action.

To run a Load Table action:

1. Click Create Action in the Actions tab.

You might want to hide the UI Bakery loader from your application, for example when embedding it in a third-party solution. Here's how you can do this:

1. Open your app's settings and click on the Embed URL link. It will open in a separate tab.

2. Here, add the ?uib_skip_init_loader parameter to the page URL.

3. Click

Learn about operations with files and their management in UI Bakery app.

Multi-factor authentication (MFA) enhances security for your workspace. UI Bakery uses the TOTP (Time-Based One-Time Passwords) 2FA algorithm.

Admins can enable MFA in the Workspace settings. Once it is enabled for your workspace, each user will be prompted to set up MFA at their next login. New users will be required to set up MFA during the registration process.

To configure MFA, users need to scan the QR code using their authenticator app, such as Google Authenticator or Microsoft Authenticator, and enter the code generated by the app. Users will be prompted to enter the code at every login until they choose to remember the device.

Resetting MFA

Now that your app is ready, you can move to the final stage in the flow - that is deploying your app and providing end user access for your team. Additionally, you can also share your app, that is otherwise private by default. You'll get a sharable link to the specific environment you select and you can share it with your workspace members. Let's see how that works!

Deploying an app

Deploying your app is really simple - you just need to click the Release button in the upper right corner of the screen. Here, you can choose the environment(s) you want to deploy to. You can deploy to both staging and production environments or start with staging for testing purposes and deploy to production after successful testing. You can also set a specific version of the release, give it a name and add a description of the changes.

Also, if you deselect both the environments, you can create a Draft release. Read more about draft releases in .

Sharing an app

As we've already mentioned before, all your applications are private by default. The access to your apps is managed based on . For deployed apps, you can click on the link icon next to the environment to share the link to the app with other workspace members.

Public app

If necessary, you can also make your application public. There are two ways how you can do that:

• Simply open the app's settings and turn on the Public toggle.

• Click the Share button directly from the Builder or from the workspace dashboard. It opens a popup where you need to switch to the Public tab and toggle on the Public setting.

Inviting users

Before inviting users to your app, make sure you first understand the , & available in UI Bakery. You can manage them all in the Users & Permissions section under your workspace name.

When you're ready to invite users, in the same section here, under the Users tab, click the Invite users to workspace button. Specify user email(s) and assign any role(s) you want.

Inviting users via Share

As an Admin of your workspace, you can also invite users to your app and manage their access via the Share button - directly from the Builder or from the workspace dashboard. It opens a popup where you need to enter user emails, assign them roles, and click Invite users.

From there, you can also manage user access and share workspace and embed URLs.

Component methods provide you with more flexibility when working with components. Using these methods, you can programmatically open and close components, set new or reset current values, and more. Component methods are available under {{ui.componentName.methodName()}} , and they can accept parameters and return values. You can see a list of component methods via the App state tab in the left side panel.

In this section, we'll explore two cases of using component methods.

Opening and closing a modal programmatically

When working with a Modal component, you may want it to open via custom interaction - on Button/Table row click (using component triggers) or from a custom JavaScript snippet.

For this purpose, you simply need to add a Modal component to your working area and create a JavaScript Code action with the following code:

Resetting a form after submission

Now, let's review the case how you can reset a Form after creating a record and submitting your changes.

To reset a form:

1. Add a Form to the working area.

2. Navigate to its Triggers section and select Create action for the On Submit trigger.

3. For the first step, select the Create Row action type.

4. Next, add another step to it of the

Done! Now, after submitting the form, it will return to its default condition.

You may have cases when you need your components to take up all the available width and height of the page regardless of the user's screen size, for example, to avoid getting a scroll bar. In such cases, you can use our Expand content to fit feature. Let's explore it in more details.

Scenario 1 (single component on the page)

Let's say you have added a Table to your page and you want it to occupy all the available space. You simply need to select the Expand content to fit checkbox in page settings in the right side panel.

Scenario 2 (several components on the page)

Now, let's say you've also added a Button to the page, for example, and now you want both Table and Button to occupy all available space. If you try selecting the Expand content to fit checkbox now, you'll notice that it's disabled.

This is because the feature is designed to ensure that a single child component can stretch to fully occupy its parent container’s available space.

In such cases, you need to add a Card component to the page and put your components inside the Card.

To use components inside the Card:

1. First, select the Expand content to fit checkbox in page settings in the right side panel.

2. Next, drag and drop a Card component into your working area.

3. Now, select the Expand content to fit checkbox for the Card as well.

4. Then, drop a Table component to the Card body - it should occupy all available space.

That's it! Now you get a page that looks excellent on every screen size and is not limited to single component only.

Expand content to fit & Height = Auto combination

Let's say you've added a Frame Drawer component and put a Table inside it - you want the table to occupy all available space and have vertical scroll applied within its body. For this purpose, you may try setting the Table's Height setting to Auto. ❗However, this combination will result in a conflict and vertical scroll in the table won't work. You'll just have to leave the Height setting at Fixed to avoid this issue.

UI Bakery deployment process is pretty straightforward - you just need to click the Release button, specify the settings and deploy the app. Here, we'll explore how you can manage your app releases, namely creating draft releases and restoring a specific release version, if needed.

Creating a draft release

While building your app, you can create draft releases. Draft releases allow you to create versions on the Dev environment before introducing some major changes to your application, such as switching data sources or introducing new UI.

The draft release flow is just like the regular deployment flow - simply clear both the Staging and Prod checkboxes. You will notice the Publish release button changing to Draft release.

Draft releases are also available in the and can be restored as well.

Restoring a release version

You can access the Release history to view the history of all your app releases. It includes both Stage and Prod releases, as well as Draft releases. From there, you can restore any release if you need to revert back to the previous production version.

To restore a release version:

1. Click on the Dashboard icon in the upper left corner and select Release history.

2. In the window that opens, click Restore next to the version you want to roll back to.

3. Next, confirm your changes.

That's it! The Restore operation will be also added to the Release history.

In UI Bakery, you can switch between a desktop and mobile layout for your applications:

• Desktop: 100% of the available page space

• Mobile: 400 px

The desktop layout is applied by default. To switch to the mobile layout, you need to change the adaptive control in the header to the mobile option.

Configuring component visibility for different layouts

Components can be configured to be visible only on a specific layout. For example, you may not want to include a large table on mobile view.

In such cases, you need to select the component, navigate to the Responsive setting, and select the layout you want the component to be visible on.

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.

Learn how to structure your app for better user experience.

JavaScript files help organize custom functions and variables. They're perfect for storing reusable helpers and utilities within components and actions.

You can create a JS file from the Actions panel - simply select this option after clicking on the plus sign.

All top-level variables and functions defined in a JS file are accessible in Components and Actions.

Scope

JavaScript files are scoped based on their creation context:

• App-level files - can be utilized across any component or action within the app

• Page-level files - restricted to their specific page

When multiple functions with the same name are defined in a scope, then the most recent definition will take precedence.

Cross usage

Functions and variables defined in one JS file can also be used in others.

Global and custom libraries

JavaScript files can also contain custom libraries in the custom code section as well as default libraries like moment and lodash.

Debugging

You can troubleshoot any issues you have with a JS file by inserting a console log statement and running the function within an action or component, for example:

The logs will appear in the Logs panel, prefixed with the file name where the code resides.

Now that you've fetched the required data from the data source, you need to bind the data from your executed action to the Data field of the respective component.

In our case, we simply selected the Load Users action in the Data field of our Table component.

If you need to undo the changes, you can revert component structure to its previous state by clicking Undo in the toast that appears at the top or clicking the Revert button next to component structure.

The JS mode is still available for the Data field of Table, Chart, List View, and Grid View so you can switch to it if you prefer. In this mode, you can bind your actions to components manually, like before, and also manually regenerate component structure using the Generate structure button next to the Columns section.

ℹ️ The Generate structure button works in the following way:

When you click it, UI Bakery takes the first object from the data property and, based on the name and format of the data, suggests what type of column or input (for a Form) should be generated. This way, if the Table structure has already been generated and you want to change only the data itself, you have two options: either use the Generate structure button or manually add columns to the table. If you have a large number of columns, this button action will generate only about 20 columns and show only around 8. If you need more, you will have to add them manually.

UI Bakery gives you the ability to configure specific menu items, for Menu components, which users can access based on their roles. Below, is an example that you can modify according to the roles in your organization. Once you're ready, switch to JS mode in the Items property of the Menu component and specify the following code:

const userHasAccess = {{user.role}} === 'admin'; // Replace with your actual access condition
const menuItems = [
  {
    title: 'Dashboard',
    route: '/dashboard',
    disabled: false  // This item is always enabled
  },
  {
    title: 'Admin Panel',
    route: '/admin',
    disabled: !userHasAccess  // This item is disabled if the user is not an admin
  }
  // ... other menu items
];

return menuItems;

In this article, we'll explore ways of parsing and sending XML in UI Bakery. Review the sections below to learn how to do that.

Parsing an XML string to a JS Object

1. Navigate to the Custom code tab and specify the following script:

1. Create an HTTP Request action selecting the GET method and specifying the necessary URL.

2. Next, turn on the Transform result toggle to open the mapper field and specify the following code:

1. Click Execute action.

Sending an XML string from UI Bakery

1. Navigate to the Custom code tab and specify the following scripts:

1. Now, create a new action consisting of two steps:

   1. For the first step, add a JavaScript Code action that will generate an XML from JSON:

   2. For the second step, add an HTTP Request action that will send the request: — Select POST method and specify the URL — For Headers - specify Content-Type application/xml

When you have two Forms in your working area, one for adding data and the other for updating it, finding space for more components may be challenging. For this purpose, to save some space, you may use a single Form for both data operations. Here's how you can do that.

To use a single Form:

1. Drag a Form component to your working area.

2. Next, to populate the data of a table's selected row, specify the {{selectedRow.data}} variable in the form's Data field.

3. Create a new action of the Condition type and specify the following code in the code field:

3. Next, add an if condition:

• specify for it a Create Row action

• specify the Form value object as {{ui.form.value}} in the Configure Row section.

4. Add an else condition:

• specify for it an Update Row action

• configure the identifier in the Filters section as id = {{ui.form.value.id}}

• specify the Form value object as {{ui.form.value}} in the Configure Row section.

5. Next, navigate to the Finish step of the action and assign your load data action to the On Success trigger to update the data in the table.

6. Finally, assign the create/update action you've created before to the On Submit trigger of the Form.

There may be a case when you want the app to keep sending the same request until the result is ready. For example, you may want the API to keep returning 202 status code until the data is ready, and then return a 200 with all the data.

Below is the approach we suggest to implement this kind of logic:

1. Create a new action of the HTTP Request type (called here apiCall):

   1. Specify the method and URL.

   2. Select the Transform result toggle and in the Modify the result field add return {{res}};. This will return the status of the API request as, by default, the HTTP step returns the body of the response.

1. Create another action of the JavaScript Code type (called here callApiWithRetries) and specify the following code:

Here, the action is called programmatically with actions.apiCall.trigger(), which allows you to easier control retry logic. But you can also make this retry action generic and execute it providing actionName via params. To do so, you simply need to change the code to actions[params.actionName].trigger():

In this section, you'll explore everything connected with your workspace, account, seats & roles, editing app interface, release management, and more. Go ahead and check it out 👇

Another common scenario is creating a filter for your table for easier navigation through the records. Check out the instruction below to find out how you can do that👇

To add a filter:

1. Locate the Text input component in the Components tab and drop it to the working area.

2. Give your component a meaningful name and specify any other parameters you need in the right hand panel.

3. Here, also navigate to the Triggers section and for the On Change trigger select your loadUsers action.

4. Next, go to this action and add a filter to return the values corresponding to the user email. In our case, we configured the following filter: email like {{ui.input.value}}

Done! If you now start typing user email in the input form, the table will return any corresponding records that exist.

When you require a component not available in our Components list, you can develop it by utilizing the unrestricted custom component. With it, you can embed any HTML or JavaScript code without any constraints directly into any UI Bakery page.

We've previously touched upon configuring component visibility using the Show condition setting . Check it out if you need a reminder and come back to learn about the two main configurations of this setting:

While building your app, you can use multiple components in UI Bakery, and the best thing is that you can link them to share data and state between them. In this article, we'll explore two of the most common scenarios of linking components.

There are three types of seats available in UI Bakery: Developer, End-user & Shared permission groups. Developers and End-users be assigned individual roles and permissions, giving you granular control over access to apps, data sources, and pages.

• A team member on a Developer seat can develop, deploy and edit apps, as well as manage users (depending on the role assigned).

• A team member on an End-user seat can use the applications assigned to his role, but NOT edit or develop them.

UI Bakery provides you with the flexibility of specifying permissions you want to grant to different user roles. Below you'll find more details about all permissions and settings available.

Access to applications

Logs provide you with information on how actions are executed. Once you run an action, you can check out the Logs tab at the bottom to access this data.

Here, you can switch views depending on the log levels you need or just manually select specific levels:

• Default logs level - Log, Info, Warn, Error

• Full logs level - default plus Verbose

This navigation use case focuses on how you can pass and read query params from the URL. Let's say you have a Table component and on row select you want users to be transferred to the Details page of a specific record. This can be achieved using the Navigation action step.

Check out the instruction below👇

1. First, navigate to the Pages tab in the left side panel and create a new page (we'll name it Customer since it will display customer details).

2. Select your Table component and navigate to the Triggers

Let's say you have a Table with a Select/Tag column, and you want the items that have already been selected and are displayed in the table to not show in the dropdown. It may be useful, for example, when you don't want users to select one item multiple times.

In this case, you can use the Tag mapper setting for this field type. Here's an example how you can configure it in your app:

1. Create an action that will return your table data - select the JavaScript Code type and specify your data in the code, for example:

For every invited seat in UI Bakery, there are three roles available out of the box:

• Admin – can invite and manage other users, change workspace settings, develop and deploy apps.

• Editor – can view and develop apps.

• User - can use the applications in the End-user mode, and can be a member of a shared permission group.

The Table component allows you to view and interact with your data. Since your data may contain a large number of records, you may want to add a search bar to filter the data by a certain column/columns. Let's find out how you can do that.

Data source environments play a pivotal role in managing and segregating data flows in applications. They provide a structured way to differentiate between different stages of application deployment.

In UI Bakery, there are three distinct environments for data sources:

1. Default: This is the primary environment used in scenarios where neither Staging nor Prod is enabled. It serves as a fallback, ensuring that there's always an environment in action even if no specific environment is set.

2. Staging: This is a testing environment, often mirroring the production but used for testing purposes. It provides a sandbox to validate data source configurations, ensuring they function as expected before moving to production.

One of the most common functionalities you may need in your app is the ability for users to quickly copy text or other content to their device’s clipboard, making it easy to paste the content elsewhere. In UI Bakery, you can do this via a JavaScript Code action step.

Let's say you have a Button that returns a link - on click you want this link copied to the clipboard. Follow the steps below to implement this👇

1. Create a new action of the JavaScript Code type and specify the following code:

It will notify users whether the action was successful or not.

Let's say you have a website or application embedded in the UI Bakery Iframe component and you need to communicate with it - send or receive data. You can easily do this using the JavaScript postMessage function.

Follow the instruction below for details:

1. Give your Iframe component a unique name to send the data. This name will be added as a component class allowing you to query it with JavaScript.

2. Create a JavaScript Code action and specify the following code to query the Iframe and send messages to it:

In UI Bakery, multiple application environments are available:

• Dev - default environment where you build your app, write code, add components, run actions, etc. It's not accessible to end-users and therefore nothing you do here affects what users currently see. It's where you can also do some preliminary testing to make sure everything works locally before moving on to the next environment.

• Staging - similar to the production environment. Here, you can do the last checks and polish things up. It's the environment used for the testing process during which you can find and fix any issues that come up.

Learn about custom code operations in UI Bakery to add more customization to your applications.

To continuously enhance functionality and improve user experience, new versions of UI Bakery may include app model migrations. These migrations modify the app model stored in your Git repositories. Therefore, a manual app model migration is necessary to ensure smooth development process and to prevent developers from encountering merge conflicts.

Take a quick look at the Git controls in UI Bakery 👇

1. Branches selector - switch between branches

2. Sync branches - sync the list of branches with the Git repository

3. Pull - pull the latest changes from the selected branch

The {{user.email}} variable can be used in cases when you need to load data that belongs to a particular user or manage component visibility based on specific user roles. Check out the sections below to review these cases.

Loading data belonging to the current user

Let's say you want users to have access only to the data specific to them (for example, about their orders) based on their email. This is how you can do that👇

The next step is to start building your UI. For this purpose, you can use a variety of components available in the Components tab of the left side panel. Simply drag the component you need and drop it to the working area. One of the most common cases is using the Table component together with the Form.

When you select a component, you can access its properties displayed in the right side panel. Here, you can change any properties you want, for example, adjust table height, hide, delete or change the order of table columns, and so much more. You can also specify the settings for each specific column, as shown in the screen below.

Now, if you're ready to proceed, move on to the then. If you'd prefer not to for now, check out the section below 👇

Learn how to handle additional data operations in UI Bakery app.

Within any action, you have the ability to include multiple Action steps. These steps encompass predefined logic and can take various forms, such as SQL queries, custom JavaScript code, HTTP requests, conditions, navigation, etc. By combining these steps together you can construct functional workflows that enable you to merge requests from different data sources, validate input data or trigger data reloads based on specific conditions. This flexibility allows you to create powerful and adaptable processes to meet your specific needs.

Creating actions

You can create actions from the Actions panel at the bottom of the screen. First, you need to choose between a global or page-specific action, and then click the plus sign next to the corresponding section.

From there, based on the data source selected, you'll get the list of all available action types to choose from. It's also possible to create complex actions:

• Multi-step actions - all steps are executed sequentially in the defined order. By default, if one step fails, the entire action will also fail. However, you can change this behavior by enabling the Allow next step execution when this step has failed setting. Once enabled, the next step will still be executed even if the current step fails. The {{data}} variable that would have been passed to the next step will be empty (null), and an error message indicating the nature of the failure will be stored in the {{error}} variable.

• Condition step - allows you to define different paths of execution based on specific conditions or validate the input before executing a request. Conditions are written in plain JavaScript.

Once you've created an action, you can assign it to a component's Data field. You can learn more about binding your data to UI .

You can also configure specific settings for the action execution flow, such as toasts, confirmation dialogs, and execution delays. For more details, refer to .

Action step variables

In any action step, you can access app variables like {{ui.component.value}} or {{app.env}}. Moreover, there are several built-in variables available for every action step:

• {{data}} - the result of the previous step

• {{error}} - the error response of the previous step

• {{params}} - incoming action parameters passed in by components, Execute/Loop Action steps, or when calling the action from the code

While {{data}} and {{error}} are specific to each step, {{params}} can be accessed in all steps.

Triggering actions

There are two ways to trigger actions - automatic and manual:

• Automatic

  • Initial trigger, run on first use in components - when an action is referenced in the app for the first time, it will be triggered. For example, a table can use {{action.name.data}} to load data from the action, in this case, the action is triggered when the table is rendered for the first time.

  • Reactive trigger, run on components' changes - when the component values used in the first action step change. For example, if the action uses {{ui.input.value}}

These triggers can be turned on/off in the Setup step of the action.

Actions that load data are auto-callable. It means that if you've assigned an action to the Data property of the component, you don't need to trigger the action manually. It will be called automatically when the component is displayed on page load. But you can deselect the Initial trigger setting, if needed, and manually trigger an action via user interaction (for example, clicking a button) or via code.

• Manual

  • Component trigger - when an action is connected to a built-in component trigger. For example, the button component has an On Click trigger. You can assign actions to component triggers and use them in such cases as, for example, submitting a form, performing a search, or reloading a table with button click.

  • Execute action, Loop action - action can be triggered by another action. For example, you can create a loop action that will execute another action multiple times.

Referencing the result of a specific action step

You can also reference the result of a specific action step by its name using the syntax {{steps.stepName.data}}. It may come in handy when you want to utilize the outcome of multiple steps in a single step.

Here is an example of using the result of two steps - mapping user orders to the user object:

Reusing actions

Actions can be called from other actions using the Execute action step. It's useful when you want to reload data after having created a new item. By default, the result of a step that goes before the Execute action step will appear as a {{data}} variable in the first step of the action being called. The result of the action being called using the Execute action step will appear in the next step that comes right after it.

Additionally, you can also trigger another action for On Success and On Error results in the Finish step of the action. For example, if the action is executed successfully you can reload its data with updated values, and if not, you can display an error notification.

If you have a global action that you'd like to reuse across multiple applications, you can extract it to the .

Connecting your data source is an essential step in building your application. UI Bakery allows connecting to a database or any API:

• databases (MySQL, PostgreSQL, etc.);

• external APIs (Google Sheets, Firebase, etc.);

• internal APIs

Data sources in UI Bakery are global, meaning that once set up each data source can be used across different applications. If needed, you can manage data sources' for different user roles.

UI Bakery data sources

You can find the full list of all data sources available here 👇

Connecting a data source

Check out and follow the step-by-step instruction to connect a new data source.

Managing data source access

By default, Admins and Editors of your workspace have all the permissions needed to manage data sources - they can add new data sources, edit and remove existing ones. Workspace members with a User role have a Read-only permission to all data sources. However, you can still manage access to data sources for Users with a custom role.

To manage user access to data sources:

1. On the Data sources page, click Manage access settings.

2. On the page that opens, click the pencil icon next to the role you want to edit.

3. Navigate to the Data sources tab and select the data sources which you want to grant access to - Use and/or Edit them.

Enabling anonymous access

By default, access to data sources is restricted and managed via roles and permissions. If you have a public app, you can enable anonymous access to your data source, but you should be cautious since it will allow any user to query your data.

You can enable/disable anonymous access in the Data source settings.

Refer to to learn more details on how to safely manage anonymous access.

Whitelisting IP addresses

To be able to connect to your data source in the cloud version, you need to whitelist our IP addresses:

This process may differ depending on the database. Below you can find whitelisting instructions to a couple of databases:

• (with .conf files)

Selecting data source outbound region

By default, when UI Bakery proxies data from your database to the end user, it passes through UI Bakery servers located in central US. This may cause performance degradation if both the user and the final data source are located in other regions.

To enhance performance and reduce data load time, you need to set the Outbound region that is closer to both the data source and the user in the Data source settings. It will ensure data flowing directly from the source to the user interface.

Under your workspace name, you can access you account and workspace settings, check audit logs, get the latest updates, and more.

Profile settings

Here, you can change your personal details and email, reset the password, as well as cancel your subscription.

Password reset

Admins of the workspace can help with users' password reset. Here, two options are available:

• Sending a new password reset email

• Generating a direct password reset link

To reset specific users' password, head to the Users & Permissions page, click on the three dots next to the user, and select the required option.

Workspace settings

Here, you can change your workspace name and URL, and configure specific settings for your end users, such as:

• Hide and

Hiding the menu for end users

You can hide the left side menu completely for your end users. To do so, select the Hide workspace menu for end-users checkbox in your Workspace settings.

This is what the end user's dashboard will look like:

Users will still be able to access profile settings by clicking on their email. For team members with Admin or Editor roles, the menu will be displayed as usual.

Hiding the header for end users

You can hide the header completely for your end users. To do so, select the Hide workspace header for end-users checkbox in your Workspace settings.

This is what the end user's dashboard will look like:

For team members with Admin or Editor roles, the header will be displayed as usual.

Disabling command palette for end users

Users can access the command palette (Cmd + K/Ctrl + K) for easier app navigation and search but you can also disable this setting, if needed. To do so, select the Disable command palette for end-users checkbox in your Workspace settings.

Once disabled, users will no longer be able to access the palette.

Sometimes the data returned by a data source or an API is structured not in a proper way for UI Bakery to use it inside components. You may need to reformat your data or enrich it with other properties. You may also need to make some live data calculations before you display it. All this can be achieved with UI Bakery Actions.

Accessing a nested object property

When retrieving a list of items, a lot of APIs may return an object that has a structure similar to this:

The actual list here is placed under the nested records or another key. If we need to display this list in a Table component, we need to transform it before passing it to the Table.

Transforming HTTP responses

To transform HTTP responses, we recommend creating a separate code action step. In our example here, we want to transform the following object response into an array response:

We simply need to add a JS code action step to our action and specify the following code:

Action steps are executed sequentially, which means that any step has access to the result of the previous step execution. The{{data}} variable keeps the result and the{{error}} variable keeps the caught error that may occur during the step execution.

As a result, the action will return an array of items that can be easily connected to a Table or other components.

Transforming list object properties

In case you need to transform, rename, or access nested object keys, you can use a JavaScript map function.

For example, your API returns a list of items that have a nested object:

But you need a particular property, not the whole entity, so you need it to look like this:

To transform a list of objects like this, use a separate code action step with the following JavaScript function:

You can also use a shorter version. It'll keep the original object but will also copy over the user properties to the first level of the object:

In the same way, you can do calculations, rename properties or add additional fields to the response.

Loading a single object of the list

When an API returns a list of objects but you need only one object from this list, you can transform it using JavaScript syntax for accessing array objects by object index:

In this case, only the first item of the list will be returned. This is helpful when you are working with an SQL query step and you need to receive only one item.

Receiving the header of the HTTP response

If you need to get the header from the HTTP response, switch the Transform result toggle and specify the {{res}} variable in the Modify the result field. Then, run the action.

Converting JSON into a JavaScript object

If the returned item holds a string/JSON representation of your data, you will need to parse it to a JavaScript object (using a JSON.parse function) before passing it to UI Bakery components:

ℹ️ Please note, that JSON.parse will fail against some empty values as well as non-valid JSON strings, so the safe statement will look like this:

If you are not completely sure whether the server returns a valid JSON string, you can extend it to this version:

The Custom App feature lets you build functional end-to-end applications, either with the help of our AI assistant or by writing the code yourself. Unlike Custom Components 2.0, which don’t support databases and require you to create actions manually, the Custom App feature offers full functionality - including code editing, hosted database access, and automatic action generation.

Overview

You can access the list of all your custom applications, as well as create new ones, from the Apps section of the workspace menu. Here, click the + button and select Custom App.

Building an app

Generating & code editing

You can type in what you want to create in the chatbox or attach an image of a similar UI as a visual aid. The AI will start working and you'll be able to see all the steps taken while generating an app based on your prompt.

Once generated, you'll be able to inspect the code structure in the Code tab in the header. Here, you can also tweak the code to better suit your needs and manage the whole file and folder structure. Right click to create new files, folders, rename, and delete existing ones.

During app building, the AI can also read and analyze logs to address any issues that occur.

Connecting data

You can choose between creating & connecting a hosted database or connecting your own data source to access the data you need.

Click on the Connect Data tab in the top left corner to see the list of all available data sources, both hosted and user. Here, you can also see which data source is active now, switch to a different data source, or .

Database management

In the Database Editor tab on the left, you can manage your current database as well as all other hosted databases, all in one place.

• You can create and delete databases.

• You can switch between different databases using the dropdown in the header.

• You can see a list of all tables with their data.

• You can add new tables and rows, duplicate, edit and delete existing ones.

Using tokens

Tokens for the Custom App feature work in the same way as for Custom components 2.0. You can find more details here👇

Publishing an app

Once you're ready to release your app, click the Release button in the upper right corner of the screen. Select your version, add a description if you want, and choose the environments you want to deploy to, just like with regular apps you build yourself.

You can also share the app with specific users or make it public from the Share button popup.

Use case examples

Now, let's review two examples of custom apps you can generate in UI Bakery - utilizing both a hosted and user databases. Watch our interactive demos below and learn how you can build similar apps yourself.

App with hosted database

App with user-managed database

You can connect Postgres, MySQL, MSSQL, MongoDB, and other databases that are hosted under a private network via SSH tunnels.

Follow the instruction below to configure SSH tunneling in UI Bakery:

1. Start by navigating to the data source connection window - choose your data source and select the Enable SSH tunnel checkbox.

1. Now, you need to configure your bastion host to allow UI Bakery to establish an SSH tunnel:

   1. Create a UI Bakery user (UI Bakery will connect to your bastion as this user):

   2. Next, create the required authorized_keys file and configure its permissions:

1. Once connected, return to UI Bakery and specify your bastion host and port number under the Enable SSH tunnel checkbox.

1. Next, specify the Bastion user you created in Step 2 (a).

1. Finally, scroll up to the Connection settings section and specify all the required fields.

ℹ️ Please note that in the Host field you either need to specify:

• localhost (if the bastion and database are on the same virtual machine) or

• your private network IP address (if bastion and database are on different virtual machines with mutual access and the 3306 port is open)

1. Click Test connection to check whether the data source can be connected, and then click Connect Datasource.

If you need to connect your local database but you don’t want to use the on-premise version, you can go for the option of connecting via ngrok.

❗We highly recommend the ngrok approach for testing purposes only, as ngrok is a third-party proxy that provides only a temporary connection (40-120 minutes depending on your plan), and re-connection is required.

To connect your local database via ngrok:

1. Create an account at if you do not have one.

2. .

3. Unzip the archive (initial instruction can be found ).

4. Open your Terminal (MacOS/Linux) or command line (Windows) and navigate to the Downloads folder (or the folder where the ngrok archive has been saved). Use the following command:

ngrok config add-authtoken 2qO7FgeP0PKr4eigzL2tdAJsxt8_3tBf8bHFrUiNZgdCEDvrc

1. If successful, you’ll get the following message: Authtoken saved to configuration file: /Users/user_name/.ngrok2/ngrok.yml

2. Now, you can proceed with exposing your local app server or database. Use one of these commands :

The output will list a forwarding URL, which will point to your local server - find the Forwarding line and copy the host and the port.

1. Next, navigate to UI Bakery > Connect datasource.

2. Select your data source and specify the copied host and port together with the other database details.

3. Click Test connection to check whether the connection can be established.

4. And finally, click Connect Datasource.

Scope

UI Bakery actions can be page-specific or global:

• Page-specific actions are executed only on a certain page.

You can easily convert a page-specific action into a global one or the other way around, just by dragging the action to the corresponding folder.

You can also assign a page-specific action to another page, by simply moving it to the global state first and then transferring it to the necessary page.

• Global actions are available across the whole app.

When using a global action, the value it holds will be retained across page navigations by default. This means that if you load some configuration settings using a global action, the settings will be accessible on all pages of the app using {{actions.actionName.data}}.

Folders

Folders offer a handy way of structuring your actions and are especially useful when you have a lot of actions in your application. You can drag actions to different folders as well as remove them. You can also add folders inside other folders - make a nested structure.

Usages

From the Actions panel, under the Usages tab on the right side, you can check where each action is used. Here, you can see whether an action is used in any components, other actions, or references. If you click on a specific component or action, you will be taken to its settings, and you'll be able to make any adjustments if needed.

Hotkeys

During development, all actions can be run using the Ctrl + Enter/Cmd + Enter hotkey.

✔️You can quickly navigate to a certain action using Cmd/Ctrl + click. Simply point to the action name and use the hotkey - it will take you to the selected action. In the same way, you can navigate to components.

✔️For action steps that have a code editor, such as JavaScript Code and SQL Query, the following hotkeys are supported:

• Ctrl + F/Cmd + F - find in code;

• Ctrl + G/Cmd + G - next find result;

• Shift + Ctrl + F/Cmd + Option + F - find and replace;

Each action has a Setup step and a Finish step that contain additional settings you can configure. In this article, we'll explore these steps and their settings in more details.

Setup step settings

Trigger

This section contains automatic action triggers you can turn on/off. You can find more information about them on .

Execution

• Delay action execution for (ms) - you can specify the delay before your actions are executed (in ms) to prevent them from running too often.

• Preserve action value - if selected, global actions will retain their values, meaning that these values are saved and remain unchanged during page navigations; and the action is not executed again. This feature is particularly useful when you want to store global values that can be reused throughout the user's session. Nonetheless, you have the option to deselect this setting if you prefer the action to refresh its value when you next open the page.

Dialogs

Turn on the Show a confirmation alert before execution toggle and specify your message to configure a confirmation dialog for your users. It may be especially useful when you want to prevent users from executing specific actions by mistake.

Finish step settings

Chain actions

Refer to for more information on configuring chain actions.

Toasts

You can configure Success or Error toasts for your actions. The Error toast is on by default.

For each toast, you can modify the message displayed, specify its duration or select the Hide notification only when clicked checkbox.

You can also use the action result in the toasts, for example:

• Notify about a successful item addition:

New customer created {{actions.yourAction.data.id}}

• Show an error for a failed action:

Action failed with an error {{actions.yourAction.error}}

Customizing error messages

You might want to create customized error messages that will give your users more clarity about the error. In order to do that, you can use the throw new Error code and customize the message text.

Let's say you want to throw an error that doesn't allow editing a row in the table on a certain condition. Here's how you can do that:

1. Create a new action of the JavaScript Code type.

2. Specify the following code:

1. For the Finish step, navigate to the Error toast, and refer to the error message as {{actions.yourAction.error.message}}.

Now, anytime the condition is met and the action fails, the user will see a customized error message.

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

• App triggers

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👇

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.

A module is a powerful tool that enables the creation of fully fledged applications that can be later reused across other applications within your workspace. It serves as a time-saving solution for complex blocks of logic that need to be reused in multiple applications.

A module is created as a separate application, and it can seamlessly communicate with a parent application, sending and receiving events.

Creating a module

You can create a module from the Workspace dashboard - scroll down to the Library section, click the + button and select Module.

A new window will open where you should give your module a meaningful name that will be used further in development, and confirm the creation. The newly created module will be added to the Library which contains all your modules as well as custom components.

From the Library, you can access the module's settings to modify the name or activate Public mode. Public mode makes the module available to unauthorised users, which is necessary if the module is used in a public app.

Working with a module

The Builder interface for modules differs from the one used for applications. Unlike applications, modules don’t have pages or render settings. Instead of the body, modules have a moduleContainer component which acts as the host for module content. The module container's width is customizable. You can set a default width for all modules, which can then be adjusted individually for each instance.

You can drag components into the module container, define custom logic for your actions, and integrate third-party libraries as needed. Once you are done developing a module, you can to Staging and/or Production, publish a , as well as from the Release history.

Using a module inside an app

Once you've developed and released your module, you can use it inside any of your applications. To add a module to an app, follow these steps:

1. Open the app you need and navigate to the Library subtab (of the Components tab) in the left side panel.

2. Select the module you want to use and drag it into the working area.

1. Click the Edit module button in the right side panel to make changes to the module. You will be redirected to a new page where you can make the necessary changes, release them, and get back to the application.

2. Click the Reload button in the right side panel to refresh the changes in the module.

Communicating with an app

In this section, we'll review two ways of communicating with an app via a module - sending data from the app to the module and vice versa.

Sending data from an app to a module

You can send the data to a module by calling the {{ui.module.setData({userId:1})}} method. Alternatively, you can also set the module data in its Data field.

Then, in the module, you can also subscribe to the On Data trigger with the last received value accessible in the {{module.data}} variable.

Sending data from a module to an app

To send the data from a module to an app, you can call the {{module.triggerEvent({data:'from module'})}} method from any module's code step.

Then, in the app, you can subscribe to the module's On Event trigger, with the last received value accessible in the {{ui.module.value}} variable.

With UI Bakery, you can export any of your applications as separate ZIP files and then move them to another UI Bakery account, if needed. This gives you more flexibility with your product and allows you to save and move your data without having to recreate apps across different workspaces. Let's dive into how you can do that.

Exporting an application

Exporting an app is easy - click on the three dots next to the app's name to access its settings and select the Export option.

That's it! The app will be downloaded as a ZIP archive, and you can use it to move your app to a different workspace.

Importing an application

Before proceeding to importing an app, check out if you're planning on importing your app into another instance.

Importing app from archive

1. In the target workspace's menu, in the Apps section, click the + button and select Import archive.

2. Upload a ZIP archive of the app exported from UI Bakery.

3. Next, click Import app.

The application will be imported to your workspace and you can access it right away.

Importing a linked GitHub repository

If you want to browse through more templates than are available on the , you can also check our and use a template from it on your instance.

To import a repo from UI Bakery:

1. Fork your own copy of the repository.

1. Download the copy as a ZIP archive.

2. In the target workspace's menu, in the Apps section, click + > Import archive.

3. Upload the ZIP archive of the repo.

4. Click Import app. The app will open in the Edit mode.

That's it! Tailor the app to your specific requirements using UI Bakery's visual interface and deploy your application with ease.

To import your own repo:

1. In the target workspace's menu, in the Apps section, click the + button and select Import from Git.

2. Enter the SSH URL for your Git repository.

3. Copy and add the SSH key that will appear to your Git repository.

4. Next, click Import app

Done! The app will open in the Edit mode and it will be connected to Git.

Sometimes, while importing an app, you may get the following error:

It means that your UI Bakery version and app version differ causing a mismatch. To avoid issues like this, you should your UI Bakery instance.

In UI Bakery, you can implement custom hotkeys for your application if necessary. You can do this using UI Bakery actions and the hotkeys-js library. Check it out👇

1. Start by connecting the hotkeys-js library - navigate to the Custom code tab and add the following script tag:

1. Next, set up a global action to define the hotkeys:

   1. Click on the app area or select your current page in the Pages tab to access the Settings of the current page (right side panel).

   2. For the On App Load/On Page Load trigger, click Create action.

   3. Add a JavaScript Code action and define your hotkeys and action calls in the code, for example:

1. Now, test the hotkey - run the action, focus the app area, and press the E keyboard key. This should open the browser alert.

You can also refer to for additional information on defining hotkeys.

You can also further extend the code above and define a hotkey-action pairing assuming that you've already configured the actions that you'd like to trigger with the hotkeys, for example:

After defining and setting everything up, you need to reload the app to test the final setup. The hotkeys action will be executed upon app/page load, defining the hotkeys to activate the app's actions.

You can access all available components in the Components tab of the left side panel. To add any component to your app page, simply drag it from the sidebar and drop into your working area. You can also change the component's size by dragging the resize handlers.

When you select a component, you can configure its properties via the right side panel. Here, you can change component structure, adjust settings and styles. You can also remove the component altogether by clicking on the Bin icon.

Component triggers

Each component has its own triggers that can launch specific events - actions that you assign to them. You can find the Triggers section in the right side panel along with other component properties. There, you need to select the trigger you need from the dropdown and assign an action to it.

Complex components (Table, Form, Detail) support various column/field types, such as:

Sometimes, you may have to handle the result of another action or execute some actions in bulk using JavaScript. In such cases, you can use the await actions.action.trigger() syntax, which returns and allows you to reuse the result of other actions.

Let’s check a couple of cases where action.trigger may come in handy.

Basic setup

As we've already mentioned before in , you can use await actions.actionName.trigger() anywhere in your app actions code:

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 come in two scopes:

• App - maintain their values across different pages

In this article, we'll explore ways of uploading files in UI Bakery using the following methods:

As your team grows and more teammates start using your applications on a daily basis, it's important to keep track of changes made or errors received to help you troubleshoot. That's when audit logs come in handy.

✔️Custom Code action

The simplest way to mock data is to create an action of the JavaScript Code type, that will return the needed JSON object. For instance, if your API/DB table lists cars, you can do it in the following way:

The action can be then referenced in different UI Bakery fields using standard {{actions.newAction.data}} approach.

If you would also like to emulate the latency when requesting your data source, you can use Promises and setTimeout to return your data. For instance, your JS action can have the following code:

UI Bakery allows you to control user access to specific table rows for security purposes. This can be achieved by implementing role-based access in the table.

Let's consider a scenario with the products table:

Theme editor allows you to create customized themes across your applications that correspond to your company's corporate brandbook. Theme editor is available for workspace Admins and Editors.

You can use pre-built UI Bakery themes (Light/Light 2.0) or create your own and use it in your applications.