busy-office-ui
Menu

Pattern: parameterized report

Who uses it: whoever must answer a specific question with numbers — an accountant at close, a buyer checking open commitments. How often: on demand, and on a schedule someone else set. What "done" looks like: the result is on screen, printed, or exported, and the parameters that produced it are visible beside it. A report is run: you choose parameters, it executes, you read the result. Not for monitoring — a screen you leave open to watch the business is the reporting dashboard; this one answers one question, once, with stated inputs. Not a list screen either: list report finds documents to act on, a report produces figures to read.

The screen — parameters, then result

Open items · CC-4021 · period 2026-07

Open items for cost center CC-4021, period 2026-07
Document Vendor Due Amount
INV-10234Acme Supply Co.15 Aug 2026$4,208.00
INV-10235Globex Industrial28 Aug 2026$18,940.50
INV-10236Initech GmbH02 Sep 2026$730.25
INV-10238Stark Components11 Sep 2026$56,000.00
Total · 4 documents $79,878.75

Printed from busy-office ERP · page totals repeat on every page.

The parameters stay on screen beside the result and print into the header line — a printed figure whose inputs are unknown is not evidence. Try Ctrl P on this page: the form disappears (.bo-u-print-hidden), the run-line stays, and the print-only footnote appears.

Markup

<!-- 1. Parameters: an ordinary form, hidden in print. -->
<form class="bo-form-section bo-u-print-hidden">
  <div class="bo-form-row"> …fields… </div>
  <div class="bo-form-actions">
    <button class="bo-btn" type="button">Run report</button>
  </div>
</form>

<!-- 2. Result: wrapped in .bo-print-report so absolute links print
     their destination, and the run-line survives to paper. -->
<article class="bo-print-report">
  <header class="bo-u-avoid-break">
    <h3>Open items · CC-4021 · period 2026-07</h3>
    <p class="bo-byline bo-byline--compact">Run by J. Kim · 22 Aug 2026 08:31</p>
  </header>
  <table class="bo-data-table" data-density="compact"> …result… </table>
  <p class="bo-u-print-only">Printed from busy-office ERP</p>
</article>

Anatomy

  1. Parameter form — a plain form section carrying .bo-u-print-hidden: the inputs are how you got the figures, not part of them.
  2. Run action — one primary button in .bo-form-actions; running is an explicit act, never a keystroke-triggered refetch (a report is expensive by definition).
  3. Run line — a byline naming who ran it, when, and on what basis. This is the part that makes a printout evidence rather than a screenshot.
  4. Result — a data table in a .bo-print-report wrapper, with a <tfoot> total.
  5. Print extras — .bo-u-print-only for the paper footnote, .bo-u-avoid-break so the header never splits from its first rows, .bo-u-break-before if the report has sections that must each start a page.

Data contract

RequestReturns / on failure
POST /reports/open-itemsthe result fragment INCLUDING its run-line; parameters echoed back so the header cannot disagree with what ran. 422 → the form re-rendered with field errors, result region untouched
GET /reports/open-items?cc=…&period=…the same result, addressable — a report you cannot link to cannot be cited in an email; an agent re-runs it by URL
GET …&format=csv|xlsxthe export, same parameters, same figures; export is a format of the SAME request, never a second query that might disagree
long runs202 + a job id → the run appears in the notification surface when it finishes; the screen never spins indefinitely

The AI-manages / human-monitors split, stated: an agent runs reports by URL and consumes the export format; the human's channels are the run-line (who/when/basis), the on-screen parameters, and the printed artefact. The rule that keeps both honest: the parameters that produced a number travel with the number, on screen, in the export, and on paper.

States

StateWhat ships
Not yet runthe result region says so plainly ("Choose parameters and run") — never an empty table that looks like a zero result
Runningthe run button goes aria-busy; long runs return 202 and hand off to notifications rather than holding the screen
Empty result"No open items for CC-4021 in 2026-07" — the parameters restated, because an empty report is a finding and the reader must see what was asked
Too many rowsstate the cap and offer the export ("12,480 rows — showing the first 500; export for all"); never silently truncate
Parameter error422 re-renders the form with field messages; the PREVIOUS result stays on screen, clearly still labelled with its own run-line
Stale resultparameters edited but not re-run → the result keeps its original run-line; a figure never re-labels itself with inputs that did not produce it
No JSfully functional — this page has no JS dependency; it imports no @busy-office/ui/js behavior at all, and every field is a plain, native form control

Components used

complexity 2 of 4

↑↓ move Enter open Esc close