Explore the interface

Workspace dashboard

The left side menu of the workspace dashboard shows all your applications, as well as recently opened ones. From there, you can quickly navigate between applications and application pages. You can hide the menu bar or expand it.

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

This is what the end users' dashboard will look like:

They 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.

If your users need access to more than one application, you will need to configure a custom menu for navigation.

Hiding the header for end users

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

This is what the end users' dashboard will look like:

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

You should implement log out functionality on your own with the**{{user.logout()}}** method.

Accessing application settings

To open application settings, click on the three dots next to the app's name. From this menu, you can also duplicate, delete or export an app.

When you export an app, it's downloaded as a ZIP file, and you can use it to move your app to a different workspace. You can do this using the Import option in the Create new menu.

Switching between environments

In the upper right corner of the page, you can switch between environments - dev, staging or prod - to see what the app looks like. To start editing the app, click the Edit app button.

Builder

Depending on the template selected, your working area can be either blank or include some UI elements. Let's have a look at the Builder interface:

UI Bakery app is live in Edit mode. That means that you can edit your app and test it right away.

Header.

The header contains:

App state modal button
Undo/Redo buttons
Screen adaptive controls
Time stamp of the last saved changes
Deployment/Release button
Finish editing button

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

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 the currently selected UI component.
Footer.