Docs

Interface Overview

What this screen is for

The App Builder screen is one workspace with four fixed areas. Learning where each lives — and which header button does what — is what makes the rest of App Builder read quickly.

Before you start

To do this You need
Open App Builder the App Builder access permission

Opening it

Build › App Builder in the sidebar, then the App Designer tab.

The App Builder interface is divided into several key areas, each serving a specific purpose in the application design workflow.

📸 Screenshot Placeholder: The App Builder workspace with an application open. Mark: (1) the App Header with name, status badge and version, (2) the tab bar, (3) the Component Palette, (4) the Flow Canvas, (5) the save and publish buttons.

Main Layout

┌────────────────────────────────────────────────────────────────────────┐
│                           App Header Bar                               │
│  [App Name Input] [Status Badge] [Version]      |      Action Buttons  │
├────────────────────────────────────────────────────────────────────────┤
│  Tab Bar: [App Designer] [Setup Wizard] [Applications]                 │
└────────────────────────────────────────────────────────────────────────┤
│                    │                     [Auto-Organize][Instructions] │
│  Component         │                                                   │
│   Palette          │                                                   │
│                    │                                                   │
│  - Search          │                   Flow Canvas                     │
│  - Custom          │                                                   │
│  - Tabs            │                                                   │
│  - Component Grid  │                                                   │
└────────────────────┴───────────────────────────────────────────────────┘

Interface Components

Component Location Purpose
App Header Top bar Application name, status, version, and action buttons
Tab Bar Above canvas Switch between App Designer, Setup Wizard, and Applications
Component Palette Left sidebar Library of draggable component templates
Flow Canvas Center area Visual workspace for designing application architecture
Config Modal Center popup Configure properties of the selected component

App Header Bar

Element Description
App Name Input Text field for application name
Status Badge Shows “Draft” (orange) or “Published” (green)
Version Display Current version (e.g., v1.0.0)
Save Button Quick save for existing drafts
Refresh Button Clear canvas for new application
Save Draft Button Save application as draft
Publish Button Publish application for team access

Button States: Disabled (grayed out) when the action is unavailable, loading (spinner) when in progress, enabled when ready.

Scenario

Working out why the Publish button will not press.

  1. Read the status badge first. Draft and Published behave differently, and the badge is the fastest way to know which you are looking at.
  2. Check the App Name Input. An unnamed application cannot be published, and the button gives no reason.
  3. Look at the button state itself. Greyed means unavailable, a spinner means a save is still running — waiting is the fix for the second, not clicking again.
  4. If it is still disabled, switch to the Applications tab and confirm you are editing what you think you are. Editing a published application behaves differently from editing a draft.

When it doesn’t work

Symptom Cause How to check Fix
A header button is greyed out The action is unavailable in the current state The status badge and app name Fill in what is missing; publishing needs a name
A button shows a spinner A save or publish is in progress — Wait; clicking again does nothing
The canvas is empty after a refresh Refresh clears the canvas for a new application The status badge Reload the draft from Applications

Next