Report page template
patterns specs/patterns/report-page.kmd
The parameterized-report scaffold: a filter/parameter panel, a Run action, and a tabular and/or graphical result the user reads or exports (CSV/PDF/print). Defines the run lifecycle (empty → running → result → error), how parameters are captured and shown on the output, and the export/print contract. More document than console — distinct from a live dashboard. Reuses the data-table and chart components. Modeled after the gov.br transactional `relatorios` template.
Quando este padrão se aplica
Triggers primários
- Build a parameterized, exportable report scaffold
Todos os triggers
- Design a report with filters and an exportable result
- Add run parameters and CSV/PDF export to a tabular output
- Build a parameterized analytics report page
Corpo da especificação
Template — Report page
Status: v0.1.0 — Draft. Promoted from the KDS × gov.br Design System gap analysis (
tools/design-gen/docs/govbr-ds-gap-analysis.md, GVB-18). Source: gov.br Padrão Digital transactionalrelatoriostemplate.
R1 — When to use (vs dashboard / data-table)
- Report (this): the user picks parameters, runs, and reads/exports a result — a document-like, reproducible output. The parameters are first-class and recorded on the output.
- Dashboard (
specs/patterns/dashboard-page.kmd): an always-on overview that refreshes to current state — no explicit "run". - Admin data table (
specs/patterns/admin-data-table.kmd): the live working list — a report may render as a table but is a snapshot to read/export, not a workbench.
R2 — Parameter panel
- A clear parameter/filter panel captures the report inputs (date
range, entity, grouping, format) with sensible defaults and required
marking (
specs/patterns/form-validation.kmdfor validation). - Parameters are explicit — the report does not run until the user chooses to (R3), so an expensive query is intentional. Offer saved/last parameter sets where useful.
R3 — Run lifecycle
The output area has four explicit states:
- Empty / pre-run — a prompt to set parameters and Run (an
specs/patterns/empty-state.kmdmessage, not a blank). - Running — a progress/skeleton state; long-running reports remain cancellable and never freeze the page.
- Result — the rendered output (R4) with the parameters echoed on it (so an exported/printed copy is self-describing) and a generated-at timestamp.
- Error — a scoped, retryable message; parameters are preserved so the user can adjust and re-run.
R4 — Output: tabular and/or graphical
- Tabular results reuse the data-table (sort, sticky header, horizontal
scroll within the container per
specs/patterns/content-overflow.kmd) — but read-optimized (no row-edit chrome). - Graphical results follow the dashboard chart rules (labeled axes/units, never color-alone, accessible values behind the chart).
- Large results paginate or scroll within a bounded region; totals/ subtotals are clearly distinguished from rows.
R5 — Export & print
- Offer export in the formats the data warrants: CSV for data, PDF/print for the formatted document. Export reflects the current parameters and includes the parameter echo + timestamp (R3).
- The print layout is a real print stylesheet (page breaks, no app chrome, readable mono/figures), not a screenshot of the console.
- Export actions are clearly labeled and announce completion; a large export runs without freezing the UI.
R6 — Accessibility & i18n
- Real
<h1>, landmarked panel/output regions, logical tab order from parameters → Run → result. - Numbers/dates/currencies format per locale; the parameter echo and timestamp are localized (the timestamp carries its timezone).
- All chrome (parameter labels, Run/Export, state copy) is translatable
per
specs/i18n/contract.kmd; exported column headers are localized.
Não-escopo
- The always-on overview (
specs/patterns/dashboard-page.kmd). - The live editing list (
specs/patterns/crud-page.kmd,specs/patterns/admin-data-table.kmd). - Scheduled/emailed report delivery (an ops/automation concern).
- The reporting query engine / data pipeline.
Referências
specs/patterns/admin-data-table.kmdspecs/patterns/dashboard-page.kmdspecs/patterns/content-overflow.kmdspecs/patterns/empty-state.kmdspecs/i18n/contract.kmd