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 the click 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-dots 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.
Builder interface
The UI Bakery app is live in edit mode. That means that you can edit your app and test it right away. By click, you can execute triggers and load data.
Header contains an App state modal button, an indicator of Actions execution, Undo and Redo buttons, Publish button, and Preview button that hides all the sidebars.
Left sidebar includes the menu with the following elements:
- App Structure showing the current page element structure.
- Components including the list of all the UI components that you can drag and drop to the working area.
- Pages containing the list of your app pages, and allowing you to create or update any page.
- Data sources – a place where you can connect your databases and APIs to your UI.
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.
Working area is a part of the interface where you can assemble your application page from UI components.
Right sidebar displays the settings of the currently selected UI component. It includes 2 tabs:
- Main settings & Structure
- Appearance & Style
Bottom area contains the Actions panel with all the application Actions. There, you can create and edit Actions, run them, debug the result, and check the action results and errors.
Last modified 1d ago