Board Layouts and Details Polish

Board Layouts and Details Polish

Board Layouts and Details Polish

Use Board list layouts with drag-and-drop Status/Select updates, plus Details polish components: Metric Card, Select badges, Media Gallery, Status Timeline, and Unique ID Chip.

Scope This is the overview for the Board + Details layout pack released with the 20 Jul 2026 Release. Each capability also has its own how-to guide (linked below). Existing List / Grid / Calendar screens are unchanged until you opt into Board or add the new components.

---

What’s included

Capability	Where it lives	One-line outcome	Deep dive
Board view	List → Appearance → Board	Kanban columns from grouping	Board List View
Board drag and drop	Board + Status/Select grouping	Drag card → updates Notion	Same guide
Metric Card	Details (view comp)	Large number / formula / rollup	Metric Card
Select badges	List tags + Details chips	Notion Select colors	Select Option Badges
Media Gallery	Details (view comp)	Files thumbnails + lightbox	Media Gallery
Status Timeline	Details (view comp)	Horizontal Status lifecycle	Status Timeline
Unique ID Chip	Details (view comp)	Monospace Unique ID (e.g. RST1)	Unique ID Chip

Board columns from Status.
Drag to update Notion.
Details show metrics, media, timeline, and IDs clearly.

Builder Board with Status columns

Details with Metric Card, badges, gallery, timeline, and Unique ID

---

Before you start

• A Notion database with Status and/or Select, plus optional number/files/unique_id fields

• List + Details screens for that database

• Ability to Reload Data and Publish

Suggested order

1. Board + grouping 2) Board drag 3) Details comps (Metric → Timeline → Gallery → Unique ID → badges check) 4) Publish once.

---

Path A — Ship a Board list

A1. Set view type to Board

1. Open the List screen.

2. Set View type to Board.

3. Enable Grouping on Status or Select.

4. Confirm columns in preview.

Board ready in builder

A2. Turn on drag writes

1. Ensure multi-row update / field editability allows writing the grouping field.

2. Drag a card between columns in preview.

3. Publish and drag again in the live app; confirm Notion.

Board drag in builder

Published Board

Full steps: Board List View.

---

Path B — Polish Details

Add any combination of:

1. Metric Card → number / formula / rollup (guide)

2. Status Timeline → Status field (guide)

3. Media Gallery → files field (guide)

4. Unique ID Chip → unique_id field (guide)

5. Confirm Select badges / Status chips use Notion colors (guide)

Details components layout

---

End-to-end checklist

Board

• View type = Board

• Grouping = Status or Select

• Columns match Notion options after Reload Data

• Drag updates Notion (when intended)

• Tap opens Details

Details polish

• Metric Card shows the KPI you expect

• Status Timeline highlights the active status

• Media Gallery shows thumbs for records with files

• Unique ID Chip matches Notion (e.g. RST1)

• Select / Priority badges use Notion colors

Ship

• Published after changes

• Hard-refresh live app if an old build was cached

---

What did not change

Area	Behavior
List / Grid / Calendar	Unchanged until you switch view type
Reference-list comps	Stay List/Grid (no Board)
Automation Work Queue	Unchanged
File upload	Still Create/Update file/image comps — Media Gallery is view-only

---

Troubleshooting (quick)

Symptom	Fix
Board has no columns	Enable grouping on Status/Select; Reload Data
Drag does not save	Allow writable Status/Select + multi-row update; see Board guide
Details comps empty	Bind correct field types; ensure sample record has values
Colors wrong	Reload Data after Notion option color changes

---

Screenshot index (for GitBook upload)

File	Use
assets/wave-c-layouts-guide/01-builder-ready.png	Builder before/with List context
assets/wave-c-layouts-guide/02-builder-board.png	Board columns in builder
assets/wave-c-layouts-guide/03-builder-board-dnd.png	Board drag in builder
assets/wave-c-layouts-guide/04-enduser-board.png	Published Board
assets/wave-c-layouts-guide/05-enduser-board-dnd.png	Published Board after drag
assets/wave-c-layouts-guide/06-details-comps.png	Details comps layout
assets/wave-c-layouts-guide/07-details-wave-c-pass.png	Details polish pass

Optional walkthrough video (e2e capture): assets/wave-c-layouts-e2e/wave-c-layouts.mp4

---

Related reading

• Board List View

• Metric Card

• Select Option Badges

• Media Gallery

• Status Timeline

• Unique ID Chip

• Status and People Field Fidelity

• 20 Jul 2026 Release

Annotated builder screenshots

Annotated builder screenshot: View Type

Annotated builder screenshot: Details Logic

Annotated builder screenshot: Details Allow Editing

Complete Builder Options Reference

Related screens:

• List Appearance / View Type — List (View Items)

• Details field layout — Details (View One Item)

View Type / Board polish

What it does: Switches list presentation and card density. How to use it: Pair Board with clear Title/Tag mappings and a Details screen for drill-in. Why / recommended default: Board for workflow status; Details for the full record.