Links

Building blocks

Data source is a connection, set up to a database from a server, on top of which you build your internal tool. It can be a database, an API, or a third-party service (MySQL, Google Sheets, Airtable). You need to connect a data source to configure authentication to it to ensure a secure connection between the UI Bakery backend and your data.
If you use an API as a data source, you can add an Access Token header or param, configure oAuth2 authentication or the Basic Auth settings.
UI Bakery doesn’t store your data. We only keep the encrypted credentials to access a data source.
Action is a piece of business logic implemented in your application. You can use it to load the data from Data sources, send the data back, make API calls, navigate to app pages, generate PDF documents, and process any type of data with SQL or JavaScript.
Action results are available as variables {{actions.actionName.data}} that can be assigned to specific properties of components, or referenced in the other actions.
Action steps are small tasks of various types, such as executing an SQL query, running custom code, making an HTTP request, evaluating a condition, or navigating to a different page. By combining multiple action steps, developers can construct functional workflows, consolidate requests to various data sources, validate input data, or reload data based on specified conditions.
Action steps that have been given a name can also be referenced as {{steps.name.data}} within the parent action.
Component is a UI element that can display your data and accept input from your users. You can work with various components: table, form, detail, chart, PDF Viewer, and others. Drag-and-drop any component you need to the working area to add it to an application page.
You can use most of the components as variables such as {{ui.componentName.value}} or {{ui.componentName.selectedRow.data}}. They can be referenced within the application in actions or the properties of other components.
Triggers are events that enable handling user interactions within the application. Examples of triggers include "On form submit" and "On table row select." Actions can be linked to triggers and utilized to process data, send it to a database, and perform other operations.
Variables act as a connecting element, allowing you to use data from actions in components and vice-versa. Actions, action steps, and components all provide various variables that can be accessed using curly braces {{ }}. Additionally, developers can create their own custom global or local variables, assign values using the Save to State action step, and use these variables in other actions and components.
Bring the list of variables in any code or text field in UI Bakery by typing two curly braces {{.