View data components
Canonical family page for every view component. Replaces the one-sentence stubs. Inputs are on Add/Update data components. Comments stay on Comments.
What this is / when to use it
Section titled “What this is / when to use it”Use a view component when the user should read a value or a layout block. Use an input when they should change it.
Before you start
Section titled “Before you start”The screen is Details, Content, a list row, or the read-only part of an update screen. The property exists if the block is data-backed.
Build it
Section titled “Build it”- Add component → pick the type in the table.
- Bind the property when required.
- Set visibility.
- Preview empty and filled states.
Every control
Section titled “Every control”| Type | Enum | Property | Type-specific controls | When to use |
|---|---|---|---|---|
| Details | DETAILS |
Record | Layout of the details header | The built-in details chrome |
| View data | VIEW_DATA |
Any displayable | Label, empty text | Generic read-only value |
| Metric card | METRIC_CARD |
Number / rollup / formula | Label, comparison, format | KPI on details or content |
| Media gallery | MEDIA_GALLERY |
Files | Image vs video, captions | Multiple files as a gallery |
| Status timeline | STATUS_TIMELINE |
Status / select + dates | Sort | History of status changes |
| Unique ID chip | UNIQUE_ID_CHIP |
unique_id (stored as text) |
Copy-to-clipboard | Show the Notion unique id |
| Show image | SHOW_IMAGE |
Files / URL | Style, fill, orientation | One image |
| Show video | SHOW_VIDEO |
Files / URL | Poster | One video |
| Show toggle | SHOW_TOGGLE |
Checkbox | On/off labels | Read-only checkbox |
| Show URL | SHOW_URL |
URL | Open in new tab | Clickable link |
| View file | VIEW_FILE |
Files | Download | Non-image files |
| Contact | CONTACT |
Email / phone | email / phoneNumber subcomponents |
Tap to mail or dial |
| Heading | HEADING |
— | Overlay vs normal | Section title |
| Label | LABEL |
— | Size | Helper text |
| Divider | DIVIDER |
— | — | Visual break |
| Section | SECTION |
— | Title, stepper membership | Group fields (forms) |
| HTML block | HTML_BLOCK |
— | HTML | Custom markup on content/details |
| Show page content | SHOW_PAGE_CONTENT |
Page | TOC, guest vs signed-in | Notion page body |
| Show user | SHOW_USER |
People / user (as text) | — | Display who is on the row |
| View location | VIEW_LOCATION |
Location | Map type | Map pin |
| View address | VIEW_ADDRESS |
Address | — | Formatted address |
| View signature | VIEW_SIGNATURE |
Signature | — | Signed image |
How-tos for Metric card, Media gallery, Status timeline, and Unique ID chip remain short jobs that link to this table.
What users see
Section titled “What users see”They see the current value, or the empty state you configured. They cannot change the Notion property from a view component. Buttons and comments are separate types.
Limits and plans
Section titled “Limits and plans”unique_idis mapped to text. The chip is display + copy, not an editor.- People / created_by / last_edited_by are mapped to text. Show user displays that string; it is not a live Notion people picker.
- Files are mapped to URL internally. Preview still works when the file is a Notion file.
- Formula and rollup display as text (or number when the metric card can parse them). They never write back.
- HTML block is not a replacement for a Content screen. Prefer Content for landing pages.
- Show page content freshness follows Reload and sync.
Example
Section titled “Example”A client details screen: Heading “Delivery”, Unique ID chip, Status timeline, Media gallery of files, Show page content for the brief, Contact for the PM.
Fix problems
Section titled “Fix problems”| Symptom | Likely cause | What to do |
|---|---|---|
| Metric card is blank | Property is not numeric | Bind a number, or a rollup that returns a number. |
| Unique ID chip empty | Database has no unique_id, or not synced | Add the property in Notion. Sync. |
| Page content stale | Blocks not re-fetched | Reload page content. See sync manual. |
| People shows a raw id | Mapped as text | That is expected. Use a User input if you need a picker. |
Related
Section titled “Related”Inputs: Add/Update data components. Page body: Show Page Content. Content screens: Content.