Overview

In this section, we’ll walk you through the development environment so you can easily find what you are looking for.

The App Builder consists of a left toolbar, canvas, top bar, right configuration bar, and an interactions panel at bottom.

Left Tool Panel

The left panel contains three tool tabs: Navigator, Element, Data Node and several advanced tool tabs Data Store, Theme, Media Files, App Configuration, Plugin Store.

1. Navigator tab: Under the Navigation tab, you’ll see a list of all pages in your app, where you can switch between pages or add new page. Below page list, there is also an Element tree for current page. From the hierarchy, you can select elements by clicking on them and rearrange elements by dragging and dropping.
2. Elements tab: Under Elements tab, you’ll be able to create new pages, elements, and data nodes by dragging and dropping from the panel to the canvas.
3. Data tab: The Data tab will list all of your data nodes. There are three kinds of Data Node: Table, Query, and others.

4. Data Store: Data Store is where you store and manage variable data. You can view, declare, and manage data using in this app.

5. Theme tab: Theme lets you choose and change color themes for your app. You'll find "color" and "color on" for each option, which represents the main color and text color on top, respectively. For example, with the below theme, a button will have a default blue color with white text on top.
6. Media Files: Where you view access media files in Resources

7. App Configuration: App Configuration provide app level settings.

8. Plugin Store: Plugin Store

Canvas

The canvas is your window into the structure of your app. In the canvas you will design your app’s interface.

Topbar

The toolbar is where you’ll find App User Management, Version Control, Preview, and Publish options. You’ll also be able to rename your app by clicking it.

Interactions panel

The Interactions panel is where you will define your Interactions. When an element is selected, you'll be able to add actions to its supported events.

Right Configuration Panel

The right panel is for the configuration for the current selected page or element, including properties, CSS styles, etc.