๐ New to our project? Be sure to review the OpenMRS 3 Frontend Developer Documentation. You may find the Map of the Project especially helpful. ๐งโ๐ซ
The openmrs-esm-patient-chart
is a frontend module for the OpenMRS SPA. It contains various microfrontends that constitute widgets in a patient dashboard. These widgets include:
- Allergies
- Appointments
- Attachments
- Biometrics
- Conditions
- Forms
- Immunizations
- Medications
- Notes
- Patient banner
- Patient chart
- Programs
- Test results
- Vitals
In addition to these widgets, two other microfrontends exist that encapsulate cross-cutting concerns. These are:
Check out the developer documentation here.
This monorepo uses yarn and lerna.
To start a dev server for a specific microfrontend, run:
yarn start --sources 'packages/esm-patient-<insert-package-name>-app'
This command uses the openmrs tooling to fire up a dev server running esm-patient-chart
as well as the specified microfrontend.
To start a dev server running all the packages, run:
yarn start-all
Note that this is very resource-intensive.
There are two approaches for working on multiple microfrontends simultaneously.
You could run yarn start
with as many sources
arguments as you require. For example, to run the biometrics and vitals microfrontends simultaneously, you'd use:
yarn start --sources 'packages/esm-patient-biometrics-app' --sources 'packages/esm-patient-vitals-app'
Alternatively, you could run yarn serve
from within the individual packages and then use import map overrides.
If you notice that your local version of the application is not working or that there's a mismatch between what you see locally versus what's in dev3, you likely have outdated versions of core libraries. To update core libraries, run the following commands:
# Upgrade core libraries
yarn up openmrs @openmrs/esm-framework
# Reset version specifiers to `next`. Don't commit actual version numbers.
git checkout package.json
# Run `yarn` to recreate the lockfile
yarn
The patient chart consists of the following parts:
- Navigation menu
- Breadcrumbs menu
- Patient header
- Chart review / Dashboards
- Workspace
- Side menu
The navigation menu lives on the left side of the screen and provides links to dashboards in the patient chart.
The breadcrumbs menu gets shown at the top of the page under the navigation bar. It shows the user their current location relative to the information architecture and helps them quickly navigate to a parent level or previous step.
The patient header contains the patient banner. Uninvasive notifications also appear in this area following actions such as form submissions.
The chart review area is the main part of the screen. It displays whatever dashboard is active.
A dashboard is a collection of widgets.
The workspace is where data entry takes place. On mobile devices it covers the screen; on desktop it appears in a sidebar.
The side menu provides access to features that do not have their own pages, such as the notifications menu.
Please see the Implementer Documentation for information about configuring modules.
See Creating a Distribution for information about adding microfrontends to a distribution.