Professional · Product Engineering / Data Visualization
Report Designer
A document-style reporting workspace that lets material-testing operators and engineers design reusable, data-driven reports instead of relying on fixed templates.
- Status
- Integrated shared product component
- Source
- Private package
- Period
- 2026 — present
- Role
- Designer and developer of the shared package
01Interactive exhibit
A reusable layout: rich text, a results table, a chart and data placeholders mapped to test fields.
{{report.title}}
{{test.id}}
| Specimen | Max load (kN) | Strength (MPa) |
|---|---|---|
| {{row.id}} | {{row.load}} | {{row.strength}} |
| Mean | =ROUND(AVERAGE(C2:C4), 1) | |
| Assessment | IF(…) |
Specimens were tested according to the selected method.
02
Context & challenge
Each testing workflow generates different measurements, result fields and reporting requirements. A fixed PDF layout cannot handle every machine, standard and customer preference without code changes.
Reporting needed to become configurable while staying connected to application data.
03
Approach
Treat report design as a standalone product component with a defined host adapter, rather than replicating report editors in every machine application. The canvas combines rich text, tables, charts, images and page-layout controls with structured machine-test data.
04
My role
I developed the reusable designer and packaged it for npm-based integration across UTEST's operator applications.
05
What was delivered
Document editing
Multi-page editing with common paper sizes, rulers, alignment guides and undo/redo; rich text, tables, images, shapes, charts, headers and footers.
Tables & expressions
Merged/split cells, formatting, sorting and layout, plus 30+ spreadsheet-style functions and conditional expressions.
Data binding
Placeholders mapped to test fields and machine-specific titles; comparison and multi-test reports with multiple imported tests.
Import, export & storage
PDF and Excel export, selected Word/Excel import, saved templates, synchronisation, schema migration and local IndexedDB storage. Localised in English, Turkish and Spanish.
06
Engineering decisions
A product component, not a per-app feature
One designer with a host integration contract connects multiple machine apps with different test data structures, keeping behaviour consistent and reducing duplicated work.
07
Status & outcome
Integrated into all four UTEST operator applications as a shared, npm-distributed package.
08
Attribution & publication notes
- The interactive exhibit below is a simplified recreation that demonstrates the template → data-binding → export idea. It is not the proprietary editor and uses synthetic data.
Next project
Cere — AI Character Experiences