Build a responsive dashboard around a document-owned JSON data source, resilient sample and empty states, readable cards, and CORS-aware live refresh.
Where: Designer → Add page → Live dashboard.
Key ideas
- The data contract lives in the document: A JSON block stores url, refreshMs, and sample. The dashboard can render immediately from sample data and keeps a useful fallback when the endpoint is empty or fails.
- Live data depends on browser access: Preview permits scripts and fetch, so a CORS-enabled API or published sheet can work. Designer does not make a private endpoint public or inject missing credentials.
- Dashboard is responsive and interactive: It uses Desktop, Tablet, and Mobile widths and can add hosted interactive elements, motion, filters, and controls while remaining a normal selectable document.
Steps
- Add a Live dashboard page and define the decisions it should support, not only the metrics available.
- Set the JSON data source url, refreshMs, and representative sample rows. Keep the sample safe to share.
- Build a hierarchy of cards/charts/tables with one clear question per region and real empty, loading, stale, and error states.
- Fetch the endpoint only when a URL is configured; on failure, show status and render the sample or a useful empty state.
- Add filters or interactive elements deliberately and keep their selected/empty/error behavior visible.
- Check Desktop, Tablet, and Mobile for wrapping, table overflow, chart labels, and touch targets.
- Preview with the real endpoint, a failed endpoint, no rows, and slow loading.
- Share compiled HTML for live use; export a still only when the recipient explicitly needs a snapshot.
Data-source block
- url — endpoint or published sheet address
- refreshMs — requested refresh interval; scaffold default is 60000ms
- sample — fallback data used before a successful request or when no URL is set
- The endpoint must permit browser access through CORS and any authentication it requires.
Recommended states
- Loading with an honest status
- Populated cards and charts
- No-data empty state
- Request failure with fallback/last-known context
- Stale or last-refreshed timestamp where freshness matters
Tips
- Design sample data to exercise long labels, zeros, negative changes, and missing values.
- Keep one number, one label, and one trend per summary card; move explanation into the surrounding hierarchy.
Limitations and important notes
- Designer is not a backend proxy, secret vault, or data warehouse.
- A live dashboard is not offered as PDF because a still discards its live purpose.
- Public sharing can expose any data already embedded in the document or fetched without authentication.
Troubleshooting
The preview is blank when the API fails.
Add sample data and render an explicit error/empty state rather than gating the whole page on a successful fetch.
The endpoint works in a server tool but not Preview.
Check CORS, browser authentication, mixed-content rules, and whether the URL is publicly reachable from the viewer’s browser.