Tour the App Builder
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.
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.
- 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.
The canvas is your window into the structure of your app. In the canvas you will design your app’s interface.
The right panel is for the configuration for the current selected page or element, including properties, CSS styles, etc.