Custom Views Editor
The Custom Views Editor lets you build new screens at custom paths without writing Flutter. See CID and Views and the dedicated CGD Editor for the concepts.
Find the editor at Admin → Custom Views. Route:
/admin/custom-views.
Four view types
When you create a new custom view, you pick one of:
viewType | What it renders | Editor |
|---|---|---|
cid | Section / Block / Line / Cell tabular layout | The CID tree editor below |
cgd | Free-form layout-item tree (Border, Grid, Stack, …) | See CGD Editor |
single-table | Single-source table with column list, filter, sort, row accent | The single-table editor below |
multi-session-table | Table that spans multiple sessions of an event | A leaner editor for the same column model |
The CID editor
A nested tree editor with one node type per level:
- Section — title + style overrides (background, padding, column count). Sections group related Blocks vertically.
- Block — title + style overrides; a Block holds one or more Lines.
- Line — horizontal row container.
- Cell — the actual data binding (label, value, format, unit).
Each Cell can:
- Bind directly to a parameter via
parameter(autocompleted against the selected Definition's parameter list) - Compute via
expression(a math expression) - Display a static
labelandformatstring - Override
unit,align,width,precisionon the cell
You can add / remove / reorder at every level via the toolbar buttons in each card. Drag-and-drop reordering is queued.
Section / Block / Line title fields commit on Enter, not on every keystroke. Hit Enter (or move focus away) before Save to capture a rename. Cell label / format / unit fields update live.
The CGD editor
Selecting cgd opens a separate designer that walks a recursive
tree of layout items (Border, Grid, Stack, Tab, Tab-item,
Scroll, Expander, ItemsControl, ListView) interleaved with
cells (the same cellSpec used by CID). See the dedicated
CGD Editor page for the layout-item catalogue and
property reference.
The single-table editor
For single-table views, the editor has:
| Field | Notes |
|---|---|
| Source | RunSheet / Lap / Setup / BoardCard |
| Columns | Ordered list of column definitions (parameter, label, width, format, sortable, frozen, align, visible) |
| Filter expression | Optional Dart math expression — rows where it evaluates to false are hidden |
| Sort default | Column name + direction |
| Row accent expression | Optional expression — when true, the row is tinted |
The filter and accent expressions run in a permissive scope:
top-level row fields are visible, with a parameters.X fallback.
Joined related rows (e.g. Session.BestLapTimeMs) are not yet
visible — see the What's coming section below.
Path and shell integration
Every view has:
path— must match^/custom/[A-Za-z0-9_\-/]+$. The view mounts at that route.icon— Material icon name (e.g.bar_chart_outlined); mapped toIconDatabyiconForName.section— ribbon section (championship/event/analysis/admin).enabled— when true, the shell synthesises a feature spec so the view appears in the ribbon and sidebar.
Saving and live updates
Hitting Save PATCHes the view. The shell's buildRouter
watches allCustomViewsProvider and re-runs — your new or
updated view appears in the ribbon/sidebar within seconds, no
restart needed.
What you can do today
- Full author / edit / delete for all four view types
- The seeded Pit Window Calculator (CID) and All Laps (multi-session-table) views work as worked examples
- The CGD designer renders Border / Grid / Stack / Tab / Scroll / Expander / ItemsControl / ListView with property panes for the common keys
- Live router re-registration on save
What's coming
- Multi-session-table editor has the spec but the editor UI reuses the single-table form — joined-source pickers are queued
- Joined-scope expressions for filters / accents
- CID block layout previews (today it's a tree editor only — a live preview pane would help)
- Drag-and-drop for cell / block reordering (today it's buttons)
- Cell expression autocomplete against the bound Definition's parameter list — present in the form but rough around the edges