View examples
Operations overview
Independent data works populate a metrics card and resource list in a main column, with a small informational sidebar.
Independent data works populate a metrics card and resource list in a main column, with a small informational sidebar.
Build this example
- Read get_context and list_views. Choose an unused view name; if adapting the name, update every work’s trigger.view and all work bindings together. Inspect existing works before deploying.
- Deploy each manifest and self-contained JavaScript source below with deploy_function. No terminal, imports, dependencies, or bundler is needed. Record each returned deployment ID.
- Test unpublished data works with their sample input and a fresh idempotency key. Only run sample actions when requested; they write synthetic records. Do not pass placeholder IDs or stale revisions.
- Replace each source/action version in the view definition, including modal bindings, with the matching deployment ID. Call validate_view with the deployment object; fix any issues, then call deploy_view.
- Open the returned manageUrl in Shopify to inspect the draft. Test empty states, form errors and refresh behaviour. Publish only when requested, using the returned version and current publishedVersion. A published page consumes one slot; its modals do not.
Metrics
Work manifest
{
"name": "starter.starter-overview.metrics",
"title": "Metrics",
"feature": "starter_starter_overview",
"environment": "preview",
"trigger": {
"type": "view",
"view": "starter-overview",
"role": "data"
},
"permissions": {
"shopify": false
},
"inputSchema": {
"type": "object",
"properties": {
"filters": {
"type": "object"
},
"search": {
"type": "string"
},
"sort": {
"type": [
"object",
"null"
]
},
"after": {
"type": [
"string",
"null"
]
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 25
}
},
"required": [],
"additionalProperties": false
}
}Self-contained JavaScript source
export default async () => ({requests: 18, open: 7, completed: 11});Sample invocation input
{
"filters": {},
"search": "",
"sort": null,
"after": null,
"limit": 25
}Recent
Work manifest
{
"name": "starter.starter-overview.recent",
"title": "Recent",
"feature": "starter_starter_overview",
"environment": "preview",
"trigger": {
"type": "view",
"view": "starter-overview",
"role": "data"
},
"permissions": {
"shopify": false
},
"inputSchema": {
"type": "object",
"properties": {
"filters": {
"type": "object"
},
"search": {
"type": "string"
},
"sort": {
"type": [
"object",
"null"
]
},
"after": {
"type": [
"string",
"null"
]
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 25
}
},
"required": [],
"additionalProperties": false
}
}Self-contained JavaScript source
export default async () => ({
"items": [
{
"id": "sample-1",
"title": "Team hoodies",
"subtitle": "40 pieces \u00b7 New"
},
{
"id": "sample-2",
"title": "Event shirts",
"subtitle": "100 pieces \u00b7 Reviewing"
},
{
"id": "sample-3",
"title": "Custom hats",
"subtitle": "25 pieces \u00b7 New"
}
],
"nextCursor": null
});Sample invocation input
{
"filters": {},
"search": "",
"sort": null,
"after": null,
"limit": 25
}View definition
validate_view / deploy_view arguments
{
"baseVersion": null,
"definition": {
"apiVersion": 3,
"name": "starter-overview",
"title": "Operations overview",
"sources": [
{
"id": "totals",
"work": "starter.starter-overview.metrics",
"version": "00000000-0000-4000-8000-000000000001"
},
{
"id": "recent",
"work": "starter.starter-overview.recent",
"version": "00000000-0000-4000-8000-000000000002"
}
],
"actions": [],
"layout": {
"type": "details",
"main": [
"metrics",
"recentCard"
],
"aside": [
"about"
],
"elements": {
"metrics": {
"type": "Metrics",
"props": {
"heading": "Sample activity",
"source": "totals",
"metrics": [
{
"field": "requests",
"label": "Requests"
},
{
"field": "open",
"label": "Open requests"
},
{
"field": "completed",
"label": "Completed"
}
]
}
},
"recentCard": {
"type": "Section",
"props": {
"heading": "Recent requests"
},
"children": [
"recentList"
]
},
"recentList": {
"type": "ResourceList",
"props": {
"source": "recent",
"titleField": "title",
"subtitleField": "subtitle"
}
},
"about": {
"type": "Section",
"props": {
"heading": "About this overview"
},
"children": [
"note"
]
},
"note": {
"type": "Text",
"props": {
"text": "Synthetic sample data. Each part of this page is loaded by its own data work. Replace the sample results with data for your build."
}
}
}
}
}
}