Linking to an O3 Package

Owned by Eudson Bambo
Last updated: Apr 19, 2024
2 min read

Presently, OpenMRS 3.x (O3) ships the React Form Engine.

This version leverages React and Carbon design system to get its look and feel to match that of O3.

If you wish to modify the Form Engine and test it within O3 (or any other O3-based frontends), follow the steps outlined below:

Prerequisites

You need to have yarn installed on your system. You can check for whether yarn is installed by running:

yarn -v

If this doesn't return a version number, you likely don't have it installed. To install it on your system, run:

npm install -g yarn

Additionally, the openmrs-esm-patient-chart repository expects you to have Node.js v16.x.x or higher installed on your system.

Steps

  • Fork and clone the React Form Engine repository.

  • cd into your clone.

  • pwd to get the path of the React Form Engine , which you will use later. You should see something like

    /Users/johndoe/code/openmrs-form-engine-lib

  • The engine is a library and not an O3 MF module. It can be consumed by bundling it within an ESM or custom frontend app that incorporates it within a UI workflow.

  • You can make changes to the library and test them on forms in the O3 patient chart.

  • Open your local openmrs-esm-patient-chart clone. Install dependencies using:

  • We'll then link the openmrs-form-engine-lib from the previous step inside of packages/esm-form-engine-app. To do so, run:

If you're using Windows, you might need to wrap your path in double quotes.

It is very important that this step works correctly to establish the link between the formengine library and the frontend.

Open the package.json file in the esm-patient-chart-app and confirm that in the resolutions section, you have something like

  • Next, cd into the openmrs-esm-patient-chart root directory and spin up your local copy of the formengine by running:

  • Next, log into your 3.x frontend (could be UgandaEMR Plus, KenyaEMR 3.x, or a community server like dev3) in your browser.

  • Congratulations! You should now be running the local version of the React form engine in your application.

  • To test, search for a patient and open their chart. Find the forms widget and launch a clinical form in the workspace.

  • Any changes made to the form engine app should propagate into the form displayed in the workspace.