The problem
Aviation, marine, construction and property products each have different fields, rules and reports. Hardcoding a UI for every product meant the same kind of work was repeated for each new line.
The approach
DataDrivenRenderer takes a JSON template that describes the fields, layout and rules, and renders the complete form or report in React. Conditional logic, such as showing a field only when another answer matches, is expressed in the template with more than 15 operators.
- JSON template
- Evaluate conditions (15+ operators)
- Map to React components
- Form or report
Simplified rendering pipeline.
An illustrative template (not the production schema):
{
"field": "hazardousCargo",
"type": "boolean",
"label": "Carries hazardous cargo?"
},
{
"field": "hazardClass",
"type": "select",
"label": "Hazard class",
"visibleWhen": { "field": "hazardousCargo", "operator": "equals", "value": true }
}Keeping it fast and safe
- Rendering performance: large form trees use memoisation and selective rendering, so changing one field doesn't re-render the whole form.
- Correctness: Jest and React Testing Library tests cover schema and rule rendering, so a template change can't silently break another product.
Results
- Config, not codenew product lines ship as templates
- 15+condition operators supported
- Less effortper product on the frontend
This was client work under NDA. The code sample is illustrative, and no client data or screenshots are shown.