Designer

Visual editor for metadata-driven dashboards on route #/cities/dashboard.

Scope

• Board composition via drag-and-drop of nodes and UI blocks.
• Layout and styling driven by boardcontent and table/column metadata.
• Property panel editing without hardcoding in runtime components.

Designer Palette

• Datasource: metadata data source (route, filters, sort, paging).
• DataRepeater: list/card view connected to a datasource.
• Dynamic Template: dynamic template rendering with metadata-driven inputs.
• Action/Button: user actions attached to records and callbacks.
• Container/Layout: structural blocks for columns, rows, and wrappers.

Main Features

• Drag-and-drop nodes onto the canvas with persistence in boardcontent.
• Contextual property panel with inputs consistent with the selected components.
• Binding between nodes (datasource -> repeater/template) with minimal validation.
• Integrated runtime preview and layout realignment.
• Pending changes management with guard before exit.

Element context menu

Right-click on a canvas element, a breadcrumb item at the bottom or a node in the hierarchy tree shows a context menu with three items:

• Edit properties (pi-cog) — selects the element as the "current tool" and shows its property panel on the right; equivalent to clicking in the tree. Useful to edit properties of nested elements without hunting for them in the hierarchy.
• Rename (breadcrumb only) — opens a dialog to rename the displayName.
• Remove — deletes the element from the board.

Recommended Operational Flow

• Open the target dashboard route.
• Insert/connect nodes from the palette.
• Configure essential inputs (e.g., route, action, datasource).
• Save and validate the result at runtime.

Operational Notes

• For specific dashboard fixes, prefer boardcontent patches instead of global changes.
• Avoid duplicate properties between inputs and inconsistent inline styles.
• Always verify that datasources have a populated inputs.route.