UI Projection Block
Embed a UI projection wireframe showing model-projected screens with form fields bound to entity properties. Readers can see the planned user interface alongside the data model it consumes.
UI projection blocks embed model-projected wireframes directly into your documentation pages. Each wireframe shows a screen layout with form fields, tables, and controls that are bound to entity properties from a projection. This gives readers a clear view of how the underlying data model surfaces in the user interface, maintaining full traceability from model through projection to screen.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Projection Path | Yes | Path to the projection containing the UI view definition |
| Title | No | Optional title displayed above the wireframe |
| Page | No | Which page of the UI view to display (defaults to the first page) |
Wireframe Elements
| Element | Description |
|---|---|
| Form Fields | Text inputs, dropdowns, toggles, and date pickers bound to entity properties |
| Data Tables | Tabular displays of entity collections with sortable columns |
| Sections | Grouped areas of the screen with headers and layout controls |
| Navigation | Multi-page wireframes with page tabs for different screens or workflows |
| Annotations | Data binding labels showing the source entity and property for each field |
Model Binding
Every field in a UI projection wireframe is bound to a property from the parent projection's target entities. This binding is visible in the viewer and provides end-to-end traceability.
UI Projection vs Diagram Block
| Capability | UI Projection Block | Diagram Block |
|---|---|---|
| Content | Screen wireframes with form fields | Architecture shapes and connectors |
| Data Binding | Fields bound to entity properties | No data binding |
| Multi-page | Page tabs for different screens | Single canvas |
| Best For | UI specification and design handoff | System architecture documentation |