Page Designer

The Page Designer is AuraBoot's visual page builder. It lets you create list pages, forms, detail views, and dashboards by dragging and dropping blocks onto a canvas -- no JSON editing required. Every change in the designer produces standard DSL JSON that can be exported, version-controlled, and deployed.

Place in the Designer System

Page Designer is the primary designer for transactional application screens. Use it for CRUD pages, filters, toolbars, form sections, and detail layouts. Use the other designers for specialized outputs:

Opening the Designer

Navigate to Meta > Pages in the sidebar, then click New Page or edit an existing page. The designer opens in a full-screen workspace with three panels:

Block Types

Drag any of these blocks onto your canvas:

Building a List Page

1. Create a new page and set the Page Type to list
2. Select the Model (e.g., crm_lead)
3. In the Columns panel, drag fields from the model to define visible columns
4. Set column widths and sort order
5. Add Toolbar Actions (e.g., a "New Lead" button linked to the create command)
6. Optionally add Tabs for status-based filtering (e.g., All / New / Qualified / Lost)
7. Configure Search Fields to enable keyword search across specific columns

Building a Form Page

1. Set Page Type to form and select your model
2. Drag Form Section blocks onto the canvas
3. Drag fields from the model into each section
4. Configure section titles, column count (1-4), and field ordering
5. Set field-level overrides: required, readonly, placeholder text
6. The form automatically wires to the model's create/update commands

Building a Dashboard

1. Set Page Type to dashboard
2. Drag Stat Card blocks for key metrics (total leads, conversion rate, revenue)
3. Each stat card binds to a Data Source -- a named query that returns aggregated data
4. Add Chart blocks and configure the chart type, data source, and axis mappings
5. Use Tab Group blocks to organize charts by category

Configuring Data Sources

Charts and stat cards pull data from Data Sources -- named SQL queries registered in the DSL:

{
  "code": "crm_leads_by_status",
  "name": "Leads by Status",
  "query": "SELECT status, COUNT(*) as count FROM mt_crm_lead GROUP BY status",
  "parameters": []
}

In the designer, select a chart block, then choose the data source from the dropdown. Map the query result columns to the chart axes.

Preview and Publish

• Preview -- Click the preview button to see the page as end users will see it, with real data from the database
• Save -- Saves the page schema as a draft. It is visible in the designer but not yet live
• Publish -- Makes the page available at its configured route. Updates take effect immediately

Export as DSL JSON

Every page created in the designer can be exported to JSON for inclusion in a plugin:

1. Open the page in the designer
2. Click Export in the toolbar
3. Save the JSON file to your plugin's pages/ directory

This enables a workflow where you design pages visually, export them, commit to Git, and deploy via the plugin system.

Next Steps

• Designer Overview — Compare all OSS designers
• Pages and Layouts — Understand page schema structure
• Plugin Development — Package pages into plugins
• Models and Fields — Define the data your pages display