Patient Chart Microfrontends
Relevant source files
The following files were used as context for generating this wiki page:
- openmrs-esm-patient-chart-main/README.md
- readmes/FINAL_SUMMARY.md
- readmes/ARCHITECTURE_OVERVIEW.md
- openmrs-esm-patient-chart-main/packages/esm-patient-orders-app/README.md
- openmrs-esm-patient-chart-main/packages/esm-patient-chart-app/src/patient-summary/patient-summary.component.tsx
- openmrs-esm-patient-chart-main/packages/esm-patient-medical-documentation-app/src/discharge-summary/discharge-summary-form.workspace.tsx
- readmes/IMPLEMENTATION_SUMMARY.md
Patient Chart Microfrontends comprise a collection of modular frontend applications built for the OpenMRS SPA. These modules function as widgets within a centralized patient dashboard, enabling clinicians to manage specific clinical domains such as allergies, vitals, medications, and medical documentation. The architecture leverages a monorepo structure and microfrontend (MFE) patterns to ensure that individual components can be developed, tested, and deployed independently while maintaining a unified user experience.
Sources: openmrs-esm-patient-chart-main/README.md:1-24, readmes/ARCHITECTURE_OVERVIEW.md
Core Architecture and Layout
The patient chart is organized into several distinct functional areas. The Navigation Menu on the left facilitates switching between different dashboards, while the Patient Header displays critical patient identity via the patient banner. The Chart Review area serves as the primary workspace for active dashboards, which are themselves collections of individual microfrontend widgets. Complex data entry and clinical documentation are handled within the Workspace, which adapts to a sidebar on desktops or a full-screen view on mobile devices.
Sources: openmrs-esm-patient-chart-main/README.md:104-120
System Integration Flow
The following diagram illustrates how the frontend microfrontends interact with the OpenMRS backend and supplementary AI services for advanced features like voice-to-vitals recording.
The microfrontends utilize both REST and FHIR APIs to communicate with the OpenMRS backend. Some advanced modules, such as the Vitals App, also interface with a specialized FastAPI AI backend for processing external data like audio transcriptions.
Sources: readmes/IMPLEMENTATION_SUMMARY.md, openmrs-esm-patient-chart-main/packages/esm-patient-chart-app/src/patient-summary/patient-summary.component.tsx:14-43
Key Microfrontend Modules
The repository contains approximately 20 packages. Below are the primary clinical microfrontends:
| Microfrontend | Purpose | Key Features |
|---|---|---|
| Vitals and Biometrics | Clinical observation capture | Voice recording, auto-population, unit conversion (F to C, lbs to kg). |
| Medical Documentation | Detailed clinical charting | 15+ tabs including Chief Complaint, Discharge Summary, and Daily Notes. |
| Orders | Prescription and lab management | Order Basket, Lab results entry, printable reports. |
| Patient Summary | AI-driven patient overview | Generates summaries using FHIR data (Conditions, Allergies, Observations). |
| Common Lib | Cross-cutting concerns | Shared utilities, components, and hooks used across all MFEs. |
Sources: openmrs-esm-patient-chart-main/README.md:9-24, readmes/FINAL_SUMMARY.md, openmrs-esm-patient-chart-main/packages/esm-patient-orders-app/README.md:1-20, openmrs-esm-patient-medical-documentation-app/README.md:15-30
Vitals Recording Workflow
The Vitals microfrontend features a specialized voice-to-vitals recording system that automates the documentation of patient vital signs.
This flow utilizes the useVitalsRecorder hook to manage the Web Audio API lifecycle and the vitals-data.mapper to translate AI-extracted JSON into the form schema.
Sources: readmes/FINAL_SUMMARY.md, readmes/IMPLEMENTATION_SUMMARY.md
Clinical Documentation and Workspaces
The Medical Documentation App provides a comprehensive suite of charting tools. A primary component is the DischargeSummaryFormWorkspace, which integrates multiple data sources to create a final patient report.
Data Aggregation and Summary Generation
The PatientSummary component demonstrates how microfrontends aggregate data from multiple OpenMRS endpoints:
- REST API: Used for basic patient info and encounter lists.
- FHIR R4 API: Used for structured clinical data including
Condition,AllergyIntolerance, andObservation(vitals).
Discharge Summary Features
The Discharge Summary workspace includes advanced capabilities:
- Auto-fill: Extracts data from previous encounters (Chief Complaint, History, Daily Notes).
- AI Summary: Sends prompt-engineered data to a FastAPI backend for professional medical narrative generation.
- PDF Export: Uses
jsPDFto generate formatted discharge certificates directly in the browser.
Configuration and Customization
Microfrontends are configured via a centralized schema. For example, the Orders app allows organizations to define specific encounter types and concept sets.
| Configuration Option | Type | Description |
|---|---|---|
orderEncounterType | UUID | Defines the encounter type for all orders (Default: 39da3525...). |
orderTypes | Array | Configures specific order categories (Medications, Labs, Procedures). |
showPrintButton | Boolean | Toggles visibility of print functionality in order tables. |
showReferenceNumberField | Boolean | Controls requirements for accession/reference numbers in forms. |
Sources: openmrs-esm-patient-chart-main/packages/esm-patient-orders-app/README.md:25-65
Summary
The Patient Chart Microfrontends provide a modular and extensible framework for OpenMRS 3.0. By separating clinical domains into independent apps like Vitals, Orders, and Medical Documentation, the system supports complex workflows including AI-assisted data entry and multi-api data aggregation. This architecture ensures high maintainability and allows for rapid feature deployment within the OpenMRS ecosystem.
Sources: openmrs-esm-patient-chart-main/README.md, readmes/FINAL_SUMMARY.md