Explore the interface
Last updated
Was this helpful?
Last updated
Was this helpful?
The left side panel of the workspace dashboard shows all your applications and modules, as well as recently opened ones. From there, you can quickly navigate between apps, modules, and application pages. You can hide the menu bar or expand it.
To open application settings, click on the three dots next to the app's name. From this menu, you can also edit (open in the Builder), duplicate, or delete an app. The Edit app option here allows you to quickly open a new project in the Edit mode - not just the one selected right now - as well as open it in a new tab. This way you can easily switch between contexts without disrupting your current workflow.
In the upper right corner of the dashboard, you can switch between - dev, staging or prod. The here allows you to invite users to your app and manage their access. And the Edit app button will take you to the Builder where you can edit the currently selected application.
Depending on whether you selected a specific template or started from scratch, your working area can be either blank or already include some UI elements.
Let's have a look at the Builder interface
Header.
The header contains:
UI Bakery icon - access App settings, Release history, or go back to the list of Apps
Connect Git (available in the Enterprise plan)
Undo/Redo buttons
Screen adaptive controls
Time stamp of the last saved changes
Preview app link - click to see how your app looks without leaving the Builder
Release button
Share button - invite users to your app, manage their access, and make the app public
Left side panel.
It includes the following elements:
a. Components - displays a list of all UI components that you can drag and drop to the working area
b. App structure - shows the current page elements structure
c. App state - shows existing state variables (with the option to manage them), components, actions, and other state variables
d. Pages - contains a list of your app pages, and allows you to create or update any page
e. Theme - custom theme builder
f. Data sources - a place where you can connect your databases and APIs
g. Additional info - links to our docs, community, booking a demo, and more
The left side panel is also resizable - you can adjust its size to suit your workflow and build more comfortably.
The working area. It's the part of the interface where you can assemble your application page from UI components.
Right side panel. It shows various settings and triggers of a UI component, if selected, or page settings.
Footer.
The footer contains:
h. Actions - all app actions
i. Logs - the current app logs
j. Git - to activate Git
k. Custom code - to connect custom scripts, libraries, and styles
l. Settings - to set up some additional app interface settings
m. Search - to search for components, actions, data sources, settings
n. AI Assistant - to access our AI-based chatbot that can quickly help you with technical questions and code generation
