Toolbar

The App Builder Toolbar is your central command center for creating, customizing, and deploying your applications. It is divided into an upper section for general information and a lower section containing all the core building tools.

Upper Toolbar: Information and Help

The top portion of the toolbar provides context about your current session and offers access to help resources.

• App and User Info: Displays the name of the app you are working on, your username, and your current Workspace.

• Help Menu: Click the HELP button to access a menu where you can:

  • Start onboarding tours

  • Find templates

  • Access documentation and videos

  • Get support

Lower Toolbar: Builder Tools and Actions

This section contains the primary tools you will use to build, design, and deploy your app.

Editing Modes

The three icons on the left switch between the editing environments:

• App Editing: The default view for building your app's user interface and logic.

• Theme Editing: Customize your app's visual theme, including designs and colors.

• Template Editing: Add and modify PDF templates used by your app.

Core Tools

• Version Tags (): Access the menu to create, import, edit, or switch to another version tag. Learn more in the Version Tags article.

• Navigation (): Open the navigation menu to select, configure, and reorder the pages in your app's menu. Learn more in the Navigation article.

• Text Box (): Create and place a text box in your app's UI. Learn more in the Text Box article.

• Icons (): Select from a large library of included icons to place in your app's UI. Learn more in the Icons article.

• Widgets (): Add interactive elements to your app, including input widgets, buttons, and display widgets.

Preview and Layout

• Language (): Switch the reference language for your app. Note: Please contact us to enable this feature.

• Device Previews (): Use the device icons to preview your UI on different screen sizes, from extra small to extra large. Learn more in the Devices and Screen Sizes article.

• Page Height (): Extend the height of the current page to add more vertical space for content. Learn more in the Devices and Screen Sizes article.

• Zoom Bar: Zoom in and out of the UI preview canvas.

Deployment and Status

• Version Info: Displays the currently deployed version. Click the down arrow to see the app's live status and to start or stop the application.

• Test Mode: Click the Test button to enter a mode where you can interact with the UI and visually inspect the backend logic as it runs.

• Deploy: Click the Deploy button to publish a new version of your app. Learn more in the Deployment article.

The upper part contains information about the current app you are working on, and information about your username and current workspace.

It also contains a help button which opens a menu to

• start onboarding tours

• find templates

• access documentation and videos

• get support.

The lower part of the toolbar actually contains functionality.

The first three icons let you switch between

• App Editing: Building the App (default view)

• Theme Editing: changing the theme of your apps, like design and colors

• Template Editing: Adding and modifying PDF template

Version tags

With the icon you can access the version tag menu to create, import, edit or swicht to antoerh tag. More details in the version tag article.

Navigation

The icon open the navigation menu. It lets you pick and configure a menu for your app and also change the order of your pages. More inforamtion in the navigation article.

Text box

The text box icon let you create a text box to be placed inside your apps ui. More information in the text box article.

Icons

The icons icon lets you pick icons from a large liste of included icons to be placed inside your apps UI. Find more information in the icons article.

Widgets

The next three icons are input, trigger and display widgets that you can pick from to use in your apps UI. Learn more about widgets with this link. Language The globe icon lets you switch the reference language for your app. Contact us for access to this feature. Devices With the five device icons, you can switch the UI preview to another device size (extra small to extra large). To learn more about devices and screen sizes, follow this link. Page height With arrow icon, you can extend the height for the currently selected page on the currently selected screenz size / device type. Use it to get additional space on a page. Follow this link for more information. Zoom bar The zoom bar lets you zoom in and out in the UI preview. Version info The version box give you information about the currently deployed version. With a click on the down arrow you can also see the apps status and stop / start the app. Test button To enable test mode, click the test button. You will be able to click into the UI and visually inspect the backend logic working. Deploy button With the deploy button, you can publish a new version of your app. Learn more in the deployment article.