Create pages in the Visual Builder

The Visual Builder assembles an app from pages, sections, and widgets. Start with a clear page purpose, then bind each data-driven widget to a tested workflow.

Open the selected app#

Go to Web Apps → Web Apps and open the app in the builder. Create or select a page inside that app. Use a stable page route and a descriptive navigation label.

Lay out the page#

1. Add the page header and a short description of the task.
2. Choose a layout that works for the main content.
3. Add the required widgets, such as a table, form, or chart.
4. Configure labels, columns, actions, and sizing.
5. Preview the page at desktop and narrow widths.

Keep primary actions close to the data they affect. Use a confirmation dialog for destructive actions and show the user which record is selected.

Connect data#

Configure an input API action for the widget or section and select the path to the relevant response data. A table expects a collection; a form view expects one record. Match the API's real output rather than its display name.

Test the widget with multiple records, an empty result, and an API error. Add loading and empty-state wording that explains what the user can do next.

Apply branding consistently#

Use the app's branding and theme settings for shared colors, identity, and appearance. Keep text contrast, focus visibility, and button labels readable across the whole app instead of styling each widget independently.

Global keys can share app values across pages. Keep page-specific state local when possible so one page's filters do not unexpectedly affect another.

Preview the full journey#

Open the page from the app's navigation, refresh its direct URL, and test it with the intended user role. Verify access on the API as well as the visible page.

See widget choices, events and data, and publication.