Skip to content
Tablewalk

Composing a record page

A record page reads as composed when it follows one skeleton: a head that says what the record is, its figures, its children as tabs, and an aside of what is secondary. Compass’s opportunity page is the worked example.

A Compass opportunity: its name with the stage beside it, the account, amount and close date under it, a stage strip, four figures, tabs of related lists, and an aside with the account card, the next task and the deal’s fields.

  • Always, start with header({ status, facts }): the state beside the name and 3–4 facts under it (the parent, a figure, a date) — compass/pages/opportunity.ts:11.
  • When the record has figures, use a summary of 3–4 rollups, not metric cards — opportunity.ts:12.
  • When its state is an ordered pipeline of 3–6 steps, give the summary a workflow; leave side exits (lost, cancelled) to tones — opportunity.ts:13.
  • When it has two or more child lists, draw them as tabs with listTabs: true, each of at most 4 columns, the status last — opportunity.ts:43.
  • When people add children from the record, give the list a create whose fill carries the record’s own references — opportunity.ts:28.
  • When the siblings matter, a related list about the parent with excludeSelf (“other deals on this account”) — opportunity.ts:31.
  • When it has a parent, put a card of the reference and two of its fields first in the aside — opportunity.ts:35.
  • When one child row is “the current one” (the next task, the active lease), use current() in the aside — opportunity.ts:36.
  • Always, beside the lists, a properties rail of the remaining fields, then history() where the record keeps one — opportunity.ts:41, depot/pages/orders.ts:40.
  • When a list is usually empty, set empty: false: left out rather than drawn empty — compass/pages/account.ts:35.

The aside is a third of the record, 256px to 320px: nothing in it wider than two columns. Beside it, four figures and tabs of four short columns fit in the top menu’s shell (shell: { placement: 'top' }, the scaffold’s); beside the side menu, at a desk, three figures and four short columns do, so keep the summary to three or draw the menu on top — tablewalk check --design says which. Title the rail by what it holds, the record’s noun, never “Details”. The sections themselves are in Record pages; a person’s page is Composing an overview page.