Minimal React renderer for HL7® FHIR® Questionnaires
import { Renderer, type Questionnaire, type QuestionnaireResponse } from "aidbox-forms-renderer";
import { useState } from "react";
const questionnaire: Questionnaire = {
resourceType: "Questionnaire",
item: [
{ linkId: "first", text: "First name", type: "string", required: true },
{ linkId: "consent", text: "Consent to treatment", type: "boolean" },
],
};
export function IntakeForm() {
const [response, setResponse] = useState<QuestionnaireResponse | null>(null);
return (
<Renderer
questionnaire={questionnaire}
initialResponse={response ?? undefined}
onChange={setResponse}
onSubmit={setResponse}
/>
);
}Useful scripts: npm run dev (playground), npm run build (type-check + bundle), npm test, npm run lint.
See COVERAGE.md for the detailed SDC feature checklist.
Each milestone lists the core features and extensions required to reach full compliance with the HL7 FHIR Structured Data Capture (SDC) specification.
Focus: Establish baseline FHIR Questionnaire support and base rendering logic.
- Core Questionnaire Resource
- Support
Questionnaire.itemelements (text, type, linkId, required, repeats) - Implement display of
prefix,text,item.type - Apply constraints:
minLength,maxLength,minValue,maxValue,maxOccurs - Enable
readOnly,initialbehavior - Support FHIR
enableWhenconditions and nested groups - Render
item.controlanditem.control.displayCategoryextensions (basic)
- Support
- *Questionnaire Navigation & Layout*
- Implement group hierarchy rendering
- Respect
hiddenanddisplayCategorycontrols - Add label localization and prefix rendering
- Input Controls
- Map FHIR types → UI components (
string,boolean,integer,choice,date,quantity, etc.) - Render choice options (
answerOption,answerValueSet) - Support open-choice types
- Map FHIR types → UI components (
- Basic Validation
- Validate required questions
- Validate numeric and string bounds
- Validate answer cardinality (
repeats,maxOccurs)
Focus: Interactive logic, calculations, adaptive elements, and modular assembly.
- Advanced Form Rendering
- Implement
sdc-questionnaire-itemControlfull support - Handle
appearanceextension rendering hints - Support
rendering-style,rendering-xhtml, andmarkdownitems
- Implement
- Form Behavior & Calculation
- Implement calculated expressions via
calculatedExpression - Dynamic enablement:
enableWhenExpression - Validation expressions:
constraint,constraintExpression - Item visibility & computed display expressions
- Value propagation (
derivedFrom,answerExpression)
- Implement calculated expressions via
- Adaptive & Modular Forms
- Implement
assemble-expectationand sub-questionnaire resolution - Support adaptive
next-questionoperations (sdc-questionnaireresponse-adapt) - Dynamic loading of next sections via adaptive operation (
Questionnaire/$next-question) - Support inclusion of external subforms and library dependencies
- Implement
- User Interaction Layer
- Autosave progress to
QuestionnaireResponse - Support for resuming saved sessions
- Dynamic updates to visible fields based on answers
- Autosave progress to
Focus: Form prefill, structured output mapping, and integration services.
- Form Population
- Implement population via:
-
initialExpression -
itemPopulationContext -
candidateExpression
-
- Support FHIR
$populateoperation (StructureMap-based) - Integrate population service from external data sources (Patient, Observation, etc.)
- Implement population via:
- Form Data Extraction
- Implement FHIR
$extractoperation - Map responses → resources using
structureMap - Handle
extractextensions:sdc-questionnaire-extract,itemExtractionContext
- Implement FHIR
- Export and Serialization
- Generate valid
QuestionnaireResponse - Support export in JSON and XML
- Validate
QuestionnaireResponseagainst sourceQuestionnaire
- Generate valid
- Polish & QA
- Test all
must-supportextensions from SDC profiles - Ensure conformance with:
-
sdc-questionnaire-render -
sdc-questionnaire-adapt -
sdc-questionnaire-extract
-
- Accessibility and internationalization compliance
- Test all