Record detail
One record, opened from a list: purchase order PO-2041. The field layout
follows CollectionForm / VForm: a two-column grid of half- and full-width
fields with divider group headers. Around it sit the pieces that make a detail
screen work: line items, files, the approval chain, a summary and the activity
history. Scroll inside each frame to see the whole page.
What generates this
buildpad add collection-form gives you CollectionForm, which renders the
field grid from your schema. The rest of this screen (header, line items,
approval chain, context column) is a composition of the parts listed under
Built from.
Editing, pending approval
PO-2041 as Daniel submitted it, waiting on Priya’s budget-owner review (step 2 of the Stepper). A default Request changes button and the ember Approve button sit next to an overflow Menu; its Delete order item opens the confirmation Modal. Edit quantities or prices and the line amounts and totals update.
Northwind Ops
/
PO-2041
PO-2041
Created by Daniel Osei on 24 Oct 2026 · Updated today, 09:42
Order total
$12,840.00
Budget used
86%
of $15,000 cap
Owner
Daniel Osei
Details
Who you're buying from and where it goes.
Line items
4 lines · prices in USD, excl. tax
Attachments
3 files · quotes and specs
Atlas-quote-Q4-2026.pdf
248 KB · Daniel Osei · 24 Oct
Carton-spec-sheet.xlsx
62 KB · Daniel Osei · 24 Oct
Tape-artwork-v3.png
1.4 MB · Amelia Hart · 26 Oct
Drop files here or browse · PDF, XLSX or images up to 25 MB
Approval
Step 1 of 2 approvals · waiting on Finance.
Activity
Daniel Osei submitted for approval
Routed to Priya Raman · Budget owner
1 hour ago
Daniel Osei added 2 line items
Tape and void-fill paper
Today, 09:30
Amelia Hart commented
26 Oct
Daniel Osei attached a file
Atlas-quote-Q4-2026.pdf
24 Oct
Daniel Osei created the order
24 Oct
Related
New record
The create route that buildpad add content-routes generates: a blank CollectionForm with required asterisks and placeholders, one empty line item, an empty attachments drop area, an empty activity card and a sticky footer with Cancel, Save draft and the ember Create order.
Northwind Ops
/
New purchase order
Details
Who you're buying from and where it goes.
Over $10,000 needs two approvers
Line items
1 line · prices in USD, excl. tax
Attachments
Optional · quotes and specs
Drop files here or browse · PDF, XLSX or images up to 25 MB
Approval
Orders over $10,000 need two approvers.
Activity
No activity yet
Comments, edits and approvals appear here once the order is saved.
Fields marked * are required
Loading
The first paint while the record loads. Skeleton blocks take the shape of the header, the summary strip, the form grid and the activity column, so nothing jumps when the data arrives.
Northwind Ops
/
PO-2041
Approved, read-only
After approval the order is locked. A green Alert explains why. Fields become label–value pairs in the same half / full grid, the line items become a plain table, and every approval step is complete.
Northwind Ops
/
PO-2041
PO-2041
Created by Daniel Osei on 24 Oct 2026 · Updated today, 11:48
Order total
$12,840.00
Budget used
86%
of $15,000 cap
Owner
Daniel Osei
Details
Locked after approval.
- Supplier
- Atlas Packaging
- Category
- Packaging
- Due date
- 04 Nov 2026
- Budget (incl. tax)
- $15,000.00
- Ship to
- Singapore DC · Tuas
- Cost centre
- OPS-410 · Fulfilment
- Notes for the supplier
- Deliver to dock 3 between 08:00 and 14:00. Pallets no taller than 1.6 m.
Line items
4 lines · prices in USD, excl. tax
Approval
Completed today · 2 h 6 min end to end
Attachments
3 files · quotes and specs
Atlas-quote-Q4-2026.pdf
248 KB · Daniel Osei · 24 Oct
Carton-spec-sheet.xlsx
62 KB · Daniel Osei · 24 Oct
Tape-artwork-v3.png
1.4 MB · Amelia Hart · 26 Oct
Activity
Amelia Hart gave final sign-off
Today, 11:48
Priya Raman approved as budget owner
Today, 11:20
Daniel Osei submitted for approval
PO-2041 · Atlas Packaging
Today, 09:42
Daniel Osei created the order
24 Oct
Unsaved changes and validation
Edits that fail validation. A red Alert lists each problem with a link to its field. Invalid fields show their error and a red left rule. Edited fields show an ember rule, as in VForm.css. Approve is disabled until the form is valid. The sticky save bar keeps Discard and the ink Save changes in view.
Northwind Ops
/
PO-2041
PO-2041
Created by Daniel Osei on 24 Oct 2026 · Updated today, 09:42
- Supplier is required
- Due date can't be in the past
- Line 3 quantity must be at least 1
Details
Who you're buying from and where it goes.
Supplier is required
Can't be before today (28 Oct)
Line items
4 lines · prices in USD, excl. tax
Saving keeps it in review.
Built from
- App shell with
active="/orders"andtitle="PO-2041"in the header breadcrumb. - Page headers:
Breadcrumbs, aTitle order={2}, a status Badge fromORDER_STATUSand a meta line with anAvatar. - Forms:
Select,TextInput,NumberInput(prefix="$",thousandSeparator) andTextareain the VForm grid. The grid is[start] 1fr [half] 1fr [full], andDivider label="Delivery"is a group header. - Table in a
Card.Section, with inlineNumberInput hideControlscells and a<dl>for the totals. - Stepper with
orientation="vertical"for the approval chain, and Timeline with avatar bullets for activity. - Banners: the green and red
Alerts. Sticky footers: the save bar and the create footer. - Skeleton for the loading state.
- Overlays: the overflow
Menu, the deleteModalandTooltips on the file actions.
Two fields are stand-ins here. Due date is a TextInput with a
calendar icon and the drop area is a dashed box (--ds-gray-300 on
--ds-gray-50). In your app, CollectionForm renders date fields with the
datetime interface (the @mantine/dates pickers on
Inputs) and file fields with the
upload interface, a @mantine/dropzone drag-and-drop zone. The edited and invalid rules come from VForm.css:
--ds-primary for edited fields and --ds-danger for invalid ones.