Topbar

Topbar is present at the top of the app-builder, and is used to configure the app settings.

<div style={{textAlign: 'center'}}> </div>

App name

The App name can be modified by selecting the application name located on the left side of the topbar.

Upon the creation of a new app, it is automatically assigned a unique app name.

<div style={{textAlign: 'center'}}> </div>

Desktop or Mobile layout

Switch the canvas mode in Mobile or Desktop layout from the topbar.

Showing component on mobile layout

Click on the component handle to open component config inspector on the right sidebar. Scroll down to the Layout section and toggle on the Mobile Layout option. The width of the components will be adjusted to fit the Mobile Layout.

Adding a new component to mobile layout

Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Drag and drop a new component to the canvas. This component will not be visible on the desktop layout unless Show on desktop is enabled from the component config inspector.

:::info Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer. :::

<div style={{textAlign: 'center'}}> </div>

Changes saved indicator

Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.

<div style={{textAlign: 'center'}}> </div>

Developer Details

This will show a profile picture of the developer who is currently working on the application. Hovering over the profile picture will show the name of the developer. If there is no profile picture, then the first letter of the first name and last name will be displayed.

<div style={{textAlign: 'center'}}> </div>

Version Manager

Add or remove versions of an application from the Version Manager. Click on the edit icon next to version name to rename the version.

When many developers are working on an app, Versioning allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.

:::tip Versioning is also helpful when working with multiple environments like development, staging and production. :::

<div style={{textAlign: 'center'}}> </div>

Undo or Redo

Undo or Redo any action performed on the canvas.

You can also use Keyboard Shortcuts to perform such actions.

<div style={{textAlign: 'center'}}> </div>

Share

Share your applications with a unique URL generated automatically or edit the URL slug to personalize it.

• When Make the application public is off and URL is shared then the users will have to login to ToolJet to use the application. Toggle on the option then anyone on the internet will be able to access the application without logging in to ToolJet.
• ToolJet generates the Embedded link which can be used to embed application on the webpages.

:::tip Learn more about Sharing your tooljet applications. :::

<div style={{textAlign: 'center'}}> </div>

Preview

Clicking on Preview button will open up the currently opened version of the app in the new tab. This is really handy when the app developer wants to immediately check the app preview in production.

<div style={{textAlign: 'center'}}> </div>

Release

Release the app to publish the current version of the app and push the changes into the production.

:::caution ToolJet will block editing of the Released version of an app and will display a prompt to create a new version to make the changes. This is to prevent accidentally pushing an unfinished app to the live version. :::

<div style={{textAlign: 'center'}}> </div>