Skip to main content

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:

viewTypeWhat it rendersEditor
cidSection / Block / Line / Cell tabular layoutThe CID tree editor below
cgdFree-form layout-item tree (Border, Grid, Stack, …)See CGD Editor
single-tableSingle-source table with column list, filter, sort, row accentThe single-table editor below
multi-session-tableTable that spans multiple sessions of an eventA 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 label and format string
  • Override unit, align, width, precision on the cell

You can add / remove / reorder at every level via the toolbar buttons in each card. Drag-and-drop reordering is queued.

Title commit behaviour

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:

FieldNotes
SourceRunSheet / Lap / Setup / BoardCard
ColumnsOrdered list of column definitions (parameter, label, width, format, sortable, frozen, align, visible)
Filter expressionOptional Dart math expression — rows where it evaluates to false are hidden
Sort defaultColumn name + direction
Row accent expressionOptional 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 to IconData by iconForName.
  • 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