Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

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:

    yarn

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

    cd packages/esm-form-engine-app
yarn link ...
 
# where ... is the path to your `openmrs-form-engine-lib` directory from the previous step. It could look like: /Users/johndoe/code/openmrs-form-engine-lib.

(info) 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

"resolutions": {
  "@openmrs/openmrs-form-engine-lib": "portal:/Users/johndoe/code/openmrs-form-engine-lib"
}

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

       yarn start --sources packages/esm-form-engine-app  --port 8090 --importmap https://dev3.openmrs.org/openmrs/spa/importmap.json

  • 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.

  • No labels