Comment on page
Explore the interface
Find out about menu and builder interface
As you open UI Bakery, you see a list of all your applications on the left menu and the last application that you have opened. From the left menu, you can quickly navigate between your applications and application pages. The menu can be either hidden or expanded.
You can hide the left menu completely from your end users. To do that, navigate the Workspace settings and check the tickbox Hide workspace menu for end-users:
The end-user's dashboard will look as below, the profile settings will be accessible by clicking on the user's email:
The team members with an admin or an editor role will still see the menu to work with the applications.
If your users need access to more than one application, you will need to configure a custom menu for navigation.
To open an application's settings, duplicate or delete an app, click on a three-dot button near an app's name.
In the upper right corner of the page, you can switch between the environments to see what the app looks like. To start editing the app click the Edit app button.
Depending on the chosen template, your working area can be either blank or already include some UI elements.
The UI Bakery app is live in edit mode. That means that you can edit your app and test it right away. By clicking, you can execute triggers and load data.
The header contains an App state modal button, Undo and Redo buttons, screen adaptive controls, the time of the last saved changes, a Deployment/ Release button, and a Finish editing button.
Changes made in the UI Bakery app are automatically saved.
Here are the main parts of the builder interface:
The left sidebar includes the menu with the following elements:
- App Structure shows the current page elements structure, such as state variables (with the option to manage the variables), components, action, and other state variables.
- Components include the list of all the UI components that you can drag and drop to the working area.
- Pages contain the list of your app pages and allow you to create or update any page.
- Data sources – a place where you can connect your databases and APIs.
- Theme editor - custom theme builder.
The left sidebar also has a Pin button allowing you to pin the sidebar or unpin it. When unpinned, it will hide automatically once you click on the working area.
The working area is a part of the interface where you can assemble your application page from the UI components.
The right sidebar displays various settings and triggers of the currently selected UI component.
The bottom area contains four panels - An actions panel with all the application actions, a logs panel - with current app logs, a Git panel - to activate Git, and a custom code panel that allows connecting custom scripts and libraries as well as styles.
Last modified 1mo ago