-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
OHRI-2070 docs for reusable components (#22)
* OHRI-2070 docs for reusable components * adds component reference section * moves media after rebase * updates PR template
- Loading branch information
Showing
63 changed files
with
227 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| ## Summary | ||
| <!-- Please describe what problems your PR addresses. --> | ||
|
|
||
| ## Screenshots / Video Recording | ||
| <!-- Required if you are making UI changes. --> | ||
|
|
||
| ## Related Issue | ||
| <!-- Paste the link to the Jira ticket here if one exists. --> | ||
| <!-- https://issues.openmrs.org/browse/O3- --> | ||
|
|
||
| ## Other | ||
| <!-- Anything not covered above --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| # Components | ||
|
|
||
| There may be situations where you might want to separate commonly-used form logic into separate reusable bits. | ||
| In such cases, you can structure that logic as a component form. Components can therefore be thought of as reusable forms that carry domain-specific information. | ||
| Imagine a situation where you're creating many forms for use in a Point of Care setting. You might find that multiple forms might need to | ||
| have sections for collecting pre-clinic Review information. This pre-clinic Review information could include details such as: | ||
|
|
||
| - Current HIV status | ||
| - Whether a visit was scheduled or not | ||
| - Reasons for a visit | ||
| - Current visit type | ||
| - Patient's insurance information | ||
|
|
||
| Now imagine having to define all of these sections and their accompanying questions in each of your forms. Components are the perfect | ||
| tool for such situations. | ||
|
|
||
| ## Creating Components | ||
|
|
||
| To create a component, follow the same procedure of [creating a form](https://ohri-docs.globalhealthapp.net/docs/create-new-form) with the exception being at the point of saving. | ||
| 1. It is advisable to prefix the name of the component with `component_`. For example, if you're creating a component for pre-clinic review, | ||
| you could name it `component_pre-clinic-review`. | ||
| 2. From the dropdown of encounters, you MUST select the encounter type `Component` as shown below: | ||
|
|
||
|  | ||
|
|
||
| After saving, the component will be available in the list of forms and you can filter forms if you only want to view saved components. | ||
|
|
||
|  | ||
|
|
||
| The resulting component json will be as shown below; | ||
|
|
||
| ```json copy | ||
| { | ||
| "name": "component_pre-clinic-review", | ||
| "uuid": "xxxx", | ||
| "processor": "EncounterFormProcessor", | ||
| "pages": [ | ||
| { | ||
| "label": "Pre-clinic Review", | ||
| "sections": [ | ||
| { | ||
| "label": "Pre-clinic Review", | ||
| "questions": [ | ||
| { | ||
| "label": "Current HIV status", | ||
| "id": "currentHivStatus", | ||
| "type": "obs", | ||
| "questionOptions": { | ||
| "rendering": "select", | ||
| "concept": "9e4d6436-4040-46a3-a0ae-6dbc0acfe593", | ||
| "answers": [ | ||
| { | ||
| "concept": "a896f3a6-1350-11df-a1f1-0026b9348838", | ||
| "label": "HIV positive" | ||
| }, | ||
| { | ||
| "concept": "a896d2cc-1350-11df-a1f1-0026b9348838", | ||
| "label": "HIV negative" | ||
| }, | ||
| { | ||
| "concept": "a899b50a-1350-11df-a1f1-0026b9348838", | ||
| "label": "Unknown" | ||
| } | ||
| ] | ||
| }, | ||
| "validators": [] | ||
| }, | ||
| { | ||
| "label": "Was the visit scheduled?", | ||
| "id": "wasVisitScheduled", | ||
| "type": "obs", | ||
| "questionOptions": { | ||
| "rendering": "select", | ||
| "concept": "a89c4220-1350-11df-a1f1-0026b9348838", | ||
| "answers": [ | ||
| { | ||
| "concept": "a899b35e-1350-11df-a1f1-0026b9348838", | ||
| "label": "Yes" | ||
| }, | ||
| { | ||
| "concept": "a899b42e-1350-11df-a1f1-0026b9348838", | ||
| "label": "No" | ||
| } | ||
| ] | ||
| }, | ||
| "validators": [] | ||
| }, | ||
| .... | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| ## Referencing Components | ||
|
|
||
| You can reference components that have already been saved in the system by adding it the `referencedForms` key to your json form. | ||
|
|
||
| ```json copy | ||
| "referencedForms": [ | ||
| { | ||
| "formName": "component_preclinic-review", | ||
| "alias": "pcr" | ||
| }, | ||
| { | ||
| "formName": "component_art", | ||
| "alias": "art" | ||
| } | ||
| ] | ||
| ``` | ||
|
|
||
| ### Available visual options | ||
|
|
||
| - `form` : The alias of the referenced component form as defined in the `referencedForms` key | ||
| - `page` : The page label of the referenced component form | ||
| - `section` : The section label of the referenced component form to be displayed | ||
| - `excludeQuestions` : An array of question id(s) to be excluded from the referenced section of component form | ||
|
|
||
|
|
||
| ### Example | ||
| Below is the complete json form with 2 components referenced; | ||
|
|
||
| ```json copy | ||
| { | ||
| "name": "ART Enrollment Form", | ||
| "uuid": "xxxx", | ||
| "encounterType": "xxxx", | ||
| "processor": "EncounterFormProcessor", | ||
| "referencedForms": [ | ||
| { | ||
| "formName": "component_preclinic-review", | ||
| "alias": "pcr" | ||
| }, | ||
| { | ||
| "formName": "component_art", | ||
| "alias": "art" | ||
| } | ||
| ], | ||
| "pages": [ | ||
| { | ||
| "label": "Pre-Clinic Review", | ||
| "sections": [ | ||
| { | ||
| "reference": { | ||
| "form": "pcr", | ||
| "page": "Pre-clinic Review", | ||
| "section": "Pre-clinic Review" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "ART History", | ||
| "sections": [ | ||
| { | ||
| "reference": { | ||
| "form": "art", | ||
| "page": "ART ", | ||
| "section": "ART History", | ||
| "excludeQuestions": ["currentArtRegimen"] | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.