First Class Modules
Connected work
Find records you can read, explore their visible connections, and open their native pages to work on them.
module.connected-workUse Connected work when a task crosses several modules and you need to follow the records that connect it. This is a read-only discovery view; create, edit, remove, and relationship management stay on the native record pages.
The bundled renderer key is module.connected-work. First-class means BuildWithHQ supplies a native, typed, secured runtime experience inside normal app provisioning and the signed-in user's existing permissions.
What it does
Find records you can read, explore their visible connections, and open their native pages to work on them.
Key capabilities
- Search by saved record title with Search records, then use Load more records for additional results.
- Choose a result to see its visible related work. Explore follows a connected record without copying it.
- Open native record and Open record use persisted page associations. When several destinations are available, choose the page you want; no destination is guessed.
- A display-limit notice means the shown connections are bounded, not the complete relationship count. Explore a connected record to continue.
- If loading fails, Try again repeats the requested search or connection lookup under your current access.
Common uses
- Follow a meeting to its related work order or file.
- Find the native page for a record discovered through another module.
- Review visible relationships before opening the owning record.
How it connects
Connected work reads the existing secured record search and Record Graph. It links to the original records and their persisted native pages; it does not create a second record store or a new mutation route.
Where applicable, its records use the universal RecordId conventions so they can participate in secured relationships, activity history, favorites, dynamic fields, notifications, Inbox attention, and global search without copying the source record.
Security and data boundary
Every search and connection read uses the verified user, tenant organization, and SaaS app. Personal ownership, DataRole, location, private-record, and action rules remain enforced by the secured services. A visible relationship or page link never grants access to its target.
- The authenticated service derives the SaaS app, tenant account, user, DataRole, and location scope; browser identifiers are never authorization proof.
- The page editor composes React components with validated data bindings. Those bindings call typed runtime APIs, whose application services execute reviewed stored procedures.
- List, search, detail, relation, activity, favorite, and write operations reapply their required server-side permissions.
Add it to an app
- Add the validated
module.connected-workblock to an active, entitled published page. - Reuse that page in the UserType menus that need it; each menu may use its own label for the same page.
- Verify native page associations for the records your users need. Test no destination, one destination, and several destinations without inventing a page key.
- Test empty results, loading, retry, additional search results, bounded connections, and denied records as representative users.
Build a professional Connected work dashboard
These six registry-backed presentation blocks let a designer turn the secured Connected work API into a complete admin page without writing a chart, grid, status badge, empty state, or timeline from scratch. The normal operational API begins at /api/modules/record-graph; a dashboard-wide count or trend should come from a separate purpose-built presentation binding so the browser never downloads a broad record population to calculate one number.
The ZIP contains this feature's fictional design composition at pages/first-class/connected-work-sample.json, its executable authenticated page at pages/first-class/connected-work-live.json, and the catalog-driven FirstClassPresentationGallery.tsx. Use the sample only for visual design. The live page calls the real native API and reviewed stored procedures under the signed-in user's scope.
| Payload kind | Runtime block | Useful Connected work projection |
|---|---|---|
metric-set | core.metric-strip | Visible relations, connected records, types, and recent links |
entity-list | core.entity-list | Highly connected records inside the current scope |
progress-list | core.progress-list | Distribution by relation type or owning module |
series-chart | core.series-chart | Relationship creation and removal |
data-grid | core.presentation-grid | One bounded edge page with both endpoints authorized |
timeline | core.timeline | Create, update, remove, source loss, and graph traversal events |
Copy/paste design preview: all six blocks
This complete static page document renders immediately in Puck/Monaco and is useful while styling a template. Its names, counts, dates, and IDs are fictional design fixtures; static preview values are not live tenant facts.
Copy the complete six-block page JSON
{
"blocks": [
{
"_id": "connected-work-metrics",
"_type": "core.metric-strip",
"props": {
"title": "Connected work",
"asOfUtc": "2026-09-04T18:00:00Z",
"items": [
{
"key": "relations",
"label": "Visible relations",
"value": 3218,
"format": "number",
"tone": "neutral"
},
{
"key": "records",
"label": "Connected records",
"value": 1407,
"format": "number",
"tone": "primary"
},
{
"key": "types",
"label": "Relation types",
"value": 18,
"format": "number",
"tone": "success"
},
{
"key": "new",
"label": "Added this week",
"value": 96,
"format": "number",
"tone": "warning"
}
]
},
"children": []
},
{
"_id": "connected-work-recent",
"_type": "core.entity-list",
"props": {
"title": "Highly connected records",
"hasMore": true,
"items": [
{
"id": "connected-work-sample-1",
"recordId": "connected-work-record-1",
"primary": "Acme Field Services",
"secondary": "Contact - 34 visible relations",
"status": {
"key": "connected",
"label": "Connected",
"tone": "success"
},
"trailing": "34 links"
},
{
"id": "connected-work-sample-2",
"recordId": "connected-work-record-2",
"primary": "Acme Field Services - Follow-up",
"secondary": "Contact - 34 visible relations - Updated two hours ago by the assigned owner",
"status": {
"key": "in-review",
"label": "In review",
"tone": "primary"
},
"trailing": "Today"
},
{
"id": "connected-work-sample-3",
"recordId": "connected-work-record-3",
"primary": "Acme Field Services - West region",
"secondary": "Contact - 34 visible relations - Related to three visible records at the Reno location",
"status": {
"key": "on-track",
"label": "On track",
"tone": "success"
},
"trailing": "3 related"
},
{
"id": "connected-work-sample-4",
"recordId": "connected-work-record-4",
"primary": "Acme Field Services - Customer response",
"secondary": "Contact - 34 visible relations - Waiting for an external response before work can continue",
"status": {
"key": "scheduled",
"label": "Scheduled",
"tone": "warning"
},
"trailing": "Tomorrow"
},
{
"id": "connected-work-sample-5",
"recordId": "connected-work-record-5",
"primary": "Acme Field Services - Regional operations review with a deliberately long title",
"secondary": "Contact - 34 visible relations - This deliberately longer supporting line verifies wrapping, truncation, responsive spacing, and dense dashboard behavior.",
"status": {
"key": "needs-attention",
"label": "Needs attention",
"tone": "danger"
},
"trailing": "Review",
"tertiary": "Long-content fixture: verify keyboard focus, wrapping, narrow columns, and mobile overflow before publishing."
},
{
"id": "connected-work-sample-6",
"recordId": "connected-work-record-6",
"primary": "Acme Field Services - Completed preview",
"secondary": "Contact - 34 visible relations - Closed after review with its related evidence retained",
"status": {
"key": "complete",
"label": "Complete",
"tone": "success"
},
"trailing": "Closed"
}
]
},
"children": []
},
{
"_id": "connected-work-bystatus",
"_type": "core.progress-list",
"props": {
"title": "Relations by type",
"items": [
{
"key": "customer",
"label": "Customer of",
"value": 1210,
"maximum": 3218,
"displayValue": "1210",
"tone": "primary",
"status": {
"key": "customer",
"label": "Customer of",
"tone": "primary"
}
},
{
"key": "attached",
"label": "Attached to",
"value": 1084,
"maximum": 3218,
"displayValue": "1084",
"tone": "success",
"status": {
"key": "attached",
"label": "Attached to",
"tone": "success"
}
},
{
"key": "depends",
"label": "Depends on",
"value": 924,
"maximum": 3218,
"displayValue": "924",
"tone": "warning",
"status": {
"key": "depends",
"label": "Depends on",
"tone": "warning"
}
}
]
},
"children": []
},
{
"_id": "connected-work-trend",
"_type": "core.series-chart",
"props": {
"title": "Relationship activity",
"variant": "bar",
"defaultPeriodKey": "d7",
"periods": [
{
"key": "d7",
"label": "7 days",
"labels": [
"Fri",
"Sat",
"Sun",
"Mon",
"Tue",
"Wed",
"Thu"
],
"series": [
{
"key": "primary",
"label": "Created",
"tone": "primary",
"values": [
8,
5,
4,
12,
15,
11,
17
]
},
{
"key": "secondary",
"label": "Removed",
"tone": "success",
"values": [
6,
4,
3,
9,
12,
10,
14
]
}
]
}
]
},
"children": []
},
{
"_id": "connected-work-table",
"_type": "core.presentation-grid",
"props": {
"title": "Visible relationships",
"columns": [
{
"key": "from",
"label": "From",
"type": "text",
"align": "left"
},
{
"key": "relation",
"label": "Relationship",
"type": "text",
"align": "left"
},
{
"key": "to",
"label": "To",
"type": "text",
"align": "left"
},
{
"key": "status",
"label": "Status",
"type": "status",
"align": "left"
},
{
"key": "created",
"label": "Created",
"type": "date",
"align": "left"
}
],
"rows": [
{
"id": "connected-work-row-1",
"recordId": "connected-work-record-1",
"cells": {
"from": "Acme Field Services",
"relation": "Customer of",
"to": "WO-1048",
"status": {
"key": "active",
"label": "Active",
"tone": "success"
},
"created": "2026-09-04T11:11:00Z"
}
},
{
"id": "connected-work-row-2",
"recordId": "connected-work-record-2",
"cells": {
"from": "Acme Field Services - Follow-up",
"relation": "Customer of",
"to": "WO-1048",
"status": {
"key": "in-review",
"label": "In review",
"tone": "primary"
},
"created": "2026-09-04T15:42:00Z"
}
},
{
"id": "connected-work-row-3",
"recordId": "connected-work-record-3",
"cells": {
"from": "Acme Field Services - West region",
"relation": "Customer of",
"to": "WO-1048",
"status": {
"key": "on-track",
"label": "On track",
"tone": "success"
},
"created": "2026-09-04T12:18:00Z"
}
},
{
"id": "connected-work-row-4",
"recordId": "connected-work-record-4",
"cells": {
"from": "Acme Field Services - Customer response",
"relation": "Customer of",
"to": "WO-1048",
"status": {
"key": "scheduled",
"label": "Scheduled",
"tone": "warning"
},
"created": "2026-09-03T21:07:00Z"
}
},
{
"id": "connected-work-row-5",
"recordId": "connected-work-record-5",
"cells": {
"from": "Acme Field Services - Regional operations review with a deliberately long title",
"relation": "Customer of - This deliberately longer supporting line verifies wrapping, truncation, responsive spacing, and dense dashboard behavior.",
"to": "WO-1048",
"status": {
"key": "needs-attention",
"label": "Needs attention",
"tone": "danger"
},
"created": "2026-09-03T16:31:00Z"
}
},
{
"id": "connected-work-row-6",
"recordId": "connected-work-record-6",
"cells": {
"from": "Acme Field Services - Completed preview",
"relation": "Customer of",
"to": "WO-1048",
"status": {
"key": "complete",
"label": "Complete",
"tone": "success"
},
"created": "2026-09-02T19:14:00Z"
}
}
],
"page": {
"pageNumber": 1,
"pageSize": 6,
"totalRecords": 3218,
"totalIsExact": true,
"hasMore": true
}
},
"children": []
},
{
"_id": "connected-work-timeline",
"_type": "core.timeline",
"props": {
"title": "Relationship activity",
"hasMore": true,
"items": [
{
"id": "connected-work-event-1",
"recordId": "connected-work-record-1",
"occurredUtc": "2026-09-04T17:58:00Z",
"title": "Relationship created",
"description": "Acme Field Services was related to WO-1048.",
"actor": "Sam Rivera",
"tone": "success"
},
{
"id": "connected-work-event-2",
"recordId": "connected-work-record-2",
"occurredUtc": "2026-09-04T15:42:00Z",
"title": "Relationship created - Follow-up",
"description": "Acme Field Services was related to WO-1048. Updated two hours ago by the assigned owner.",
"actor": "Avery Patel",
"tone": "primary"
},
{
"id": "connected-work-event-3",
"recordId": "connected-work-record-3",
"occurredUtc": "2026-09-04T12:18:00Z",
"title": "Relationship created - West region",
"description": "Acme Field Services was related to WO-1048. Related to three visible records at the Reno location.",
"actor": "Sam Rivera",
"tone": "success"
},
{
"id": "connected-work-event-4",
"recordId": "connected-work-record-4",
"occurredUtc": "2026-09-03T21:07:00Z",
"title": "Relationship created - Customer response",
"description": "Acme Field Services was related to WO-1048. Waiting for an external response before work can continue.",
"actor": "Maya Chen",
"tone": "warning"
},
{
"id": "connected-work-event-5",
"recordId": "connected-work-record-5",
"occurredUtc": "2026-09-03T16:31:00Z",
"title": "Relationship created - Regional operations review with a deliberately long title",
"description": "Acme Field Services was related to WO-1048. This deliberately longer supporting line verifies wrapping, truncation, responsive spacing, and dense dashboard behavior.",
"actor": "Automation",
"tone": "danger"
},
{
"id": "connected-work-event-6",
"recordId": "connected-work-record-6",
"occurredUtc": "2026-09-02T19:14:00Z",
"title": "Relationship created - Completed preview",
"description": "Acme Field Services was related to WO-1048. Closed after review with its related evidence retained.",
"actor": "Jordan Lee",
"tone": "success"
}
]
},
"children": []
}
]
}Copy/paste React composition
Copy InteractivePresentationComponents.tsx and its optional CSS from the Professional Foundation Developer Kit, then add this module-specific composition. It is semantic and unstyled by default; pass styled after importing interactive-presentation-components.css for the supplied polished foundation. Either version accepts only a bounded already-authorized document and fails closed through the shared strict parsers.
import {
EntityList,
MetricStrip,
PresentationGrid,
ProgressList,
SeriesChart,
Timeline,
} from "./InteractivePresentationComponents";
export interface ConnectedWorkPresentationData {
readonly metrics: unknown;
readonly recent: unknown;
readonly byStatus: unknown;
readonly trend: unknown;
readonly table: unknown;
readonly timeline: unknown;
}
export interface ConnectedWorkPresentationProps {
/** Pass only the already-authorized presentation document returned by the API. */
readonly data?: ConnectedWorkPresentationData | null;
readonly loading?: boolean;
readonly error?: boolean;
readonly styled?: boolean;
/** Record identity is navigation context; the detail API must authorize it again. */
readonly onOpenRecord?: (recordId: string) => void;
}
export function ConnectedWorkPresentation({
data,
loading = false,
error = false,
styled = false,
onOpenRecord,
}: ConnectedWorkPresentationProps) {
if (error) return <p role="alert">The Connected work presentation could not be loaded.</p>;
if (loading || !data) return <p role="status">Loading Connected work presentation...</p>;
return (
<main className={styled ? "bwhq-api-example" : undefined}>
<header>
<p>Connected work</p>
<h1>Connected work</h1>
<p>Fictional connected-record design data; the live page searches visible records and opens their native owners.</p>
</header>
<MetricStrip data={data.metrics} styled={styled} />
<div className={styled ? "bwhq-api-example__split" : undefined}>
<ProgressList data={data.byStatus} styled={styled} />
<EntityList data={data.recent} styled={styled} onOpenRecord={onOpenRecord} />
</div>
<SeriesChart data={data.trend} styled={styled} />
<PresentationGrid data={data.table} styled={styled} onOpenRecord={onOpenRecord} />
<Timeline data={data.timeline} styled={styled} onOpenRecord={onOpenRecord} />
</main>
);
}Copy the live, authenticated module page
This document has no placeholder key and needs no invented endpoint. Save it to a page and add that page to a User Type menu. The registered native component calls /api/modules/record-graph, uses the current tenant session, and preserves the module's real list, detail, create/update, pagination, empty, loading, and error behavior. Dynamic Records discovers the organization's real tenant-owned modules when no module key is configured.
Copy the executable live page
{
"blocks": [
{
"_id": "connected-work-live",
"_type": "module.connected-work",
"props": {},
"children": []
}
]
}The server derives SaaS app, organization, user, DataRoles, locations, module-specific membership/privacy, and any AI-read gate from verified identity. A returned identifier can select a detail target, but the detail or write endpoint authorizes it again. Page layout, status, tone, totals, action names, and identifiers never grant authority.
Use the native module for lifecycle actions. A short connection list is not an all-records report, and menu placement never substitutes for data permissions.
A renderer being bundled in the tenant application does not make its data visible in every app. The server returns only components and records authorized for the current app and signed-in user; unavailable or unauthorized blocks fail closed.
Capability review: 2026-09-14. For exact current technical availability, use the generated API Map and first-class module inventory.