diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..af2b7e8 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,12 @@ +## Summary + + +## Screenshots / Video Recording + + +## Related Issue + + + +## Other + diff --git a/pages/docs/core-concepts/components.mdx b/pages/docs/core-concepts/components.mdx new file mode 100644 index 0000000..7625e70 --- /dev/null +++ b/pages/docs/core-concepts/components.mdx @@ -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: + +![Save Component](/images/save_component.png) + +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. + +![View Components](/images/view_components.png) + +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"] + } + } + ] + } + ] +} +``` diff --git a/pages/docs/core-concepts/pages.mdx b/pages/docs/core-concepts/pages.mdx index 5f3daa8..5162e45 100644 --- a/pages/docs/core-concepts/pages.mdx +++ b/pages/docs/core-concepts/pages.mdx @@ -152,8 +152,8 @@ A page is a collection of related sections. A typical page definition consists o Here's how this page definition gets rendered: -![Single-page form layout](/single-page-layout.png) +![Single-page form layout](/images/single-page-layout.png) In practice, your form will likely have more than one page. You can cycle through the pages by infinitely scrolling or selecting the desired page from the left sidebar. Here's how a form with multiple pages would look like: -![Multiple-page form layout](/multi-page-layout.png) +![Multiple-page form layout](/images/multi-page-layout.png) diff --git a/pages/docs/core-concepts/questions.mdx b/pages/docs/core-concepts/questions.mdx index 4080679..dc0462d 100644 --- a/pages/docs/core-concepts/questions.mdx +++ b/pages/docs/core-concepts/questions.mdx @@ -87,7 +87,7 @@ Here's a reference of the various properties you can specify in a question defin - `answers`: An array of answers scoped to a question. An answer definition consists of a concept UUID or mapping and label pair. If no label is specified, the "display" value of the concept is used. Below is an example of answers to a `Current HIV status` question: - ![Answers](/answers.png) + ![Answers](/images/answers.png) - `questionInfo`: A property that recieves a string containing additional information regarding the field. When hovered over, it displays a tooltip containing the information passed. @@ -97,7 +97,7 @@ Here's a reference of the various properties you can specify in a question defin } ``` - ![Tooltip](/tooltip.png) + ![Tooltip](/images/tooltip.png) - `isHidden`: A boolean value that determines field visibility. In most cases, this value is driven by hide expressions. diff --git a/pages/docs/create-new-form.mdx b/pages/docs/create-new-form.mdx index 48df1e3..9c1192a 100644 --- a/pages/docs/create-new-form.mdx +++ b/pages/docs/create-new-form.mdx @@ -14,7 +14,7 @@ The React Form Engine (RFE) form builder platform simplifies and partially autom ## What is the RFE form builder? -The RFE form builder is found at the following addresses: +The RFE form builder is found at the following addresses: - OHRI: https://ohri-dev.globalhealthapp.net/openmrs/spa/form-builder - Reference Application: https://dev3.openmrs.org/openmrs/spa/form-builder @@ -29,15 +29,15 @@ Requirements: - Make sure the Google Chrome browse is installed. Any other browser can also be used. -![Form builder URL in address bar](/form-builder-url.png) +![Form builder URL in address bar](/images/form-builder-url.png) In the address bar, enter the form builder URL: OHRI https://ohri-dev.globalhealthapp.net/openmrs/spa/login or RefApp https://dev3.openmrs.org/openmrs/spa/form-builder -![Form builder URL](/form-builder-url.png) +![Form builder URL](/images/form-builder-url.png) The main login form will open: -![Login page](/login-page.png) +![Login page](/images/login-page.png) After the login form is loaded, enter all the required details in the inputs: @@ -45,47 +45,47 @@ After the login form is loaded, enter all the required details in the inputs: - **Username**: Use the default i.e. `admin` - **Password**: Use the default i.e. `Admin123` -![Login credentials](/login-credentials.png) +![Login credentials](/images/login-credentials.png) With the correct details entered above, the platform will log you in. You will land on the dashboard illustrated below: -![Forms dashboard](/forms-dashboard.png) +![Forms dashboard](/images/forms-dashboard.png) Now, click on `Create New Form` in the top left corner to create a new Form schema. -![Create new form button](/create-new-form-button.png) +![Create new form button](/images/create-new-form-button.png) Clicking the button will land you in the interface shown below. Note the `preveiw` and the `Interactive Builder` tabs. -![Create new form](/create_new_form.png) +![Create new form](/images/create_new_form.png) Click on the `Interactive Builder` tab to open the builder page shown below: -![Interactive Builder](/interactive_builder.png) +![Interactive Builder](/images/interactive_builder.png) Click on the `Start building` text link. and a popup window asking for the form details will show as below: -![Form name](/form_name.png) +![Form name](/images/form_name.png) Click on the `add page` text link below to add a page to your form -![Add page](/add_page.png) +![Add page](/images/add_page.png) Add the page name in the pop up text box. -![Page](/page_name.png) +![Page](/images/page_name.png) Click on the `Save` button to successfully save the page and proceed. -![Save page](/save_page.png) +![Save page](/images/save_page.png) Next, click on the `Add section` text link to add a section to your form. -![Create section](/create_section.png) +![Create section](/images/create_section.png) Click `save` to save the section added to form. -![Save section](/save_section.png) +![Save section](/images/save_section.png) Click on `Add question` text link to add a question to your form. A question has several metadata which you must add on the popup form entry. These include: - `Label` @@ -96,15 +96,15 @@ Click on `Add question` text link to add a question to your form. A question has - `Mappings`: Auto generate from concept selected -![Question](/question.png) +![Question](/images/question.png) Click `Save` to save the question -![Save question](/save_question.png) +![Save question](/images/save_question.png) Click on `Preview Form` tab to view how the form will look like when rendered. -![Preview form](/preview_form.png) +![Preview form](/images/preview_form.png) Click on the `Save` to save your final form. A popup form entry will appear to allow you enter details that include: - `Form name` @@ -112,8 +112,8 @@ Click on the `Save` to save your final form. A popup form entry will appear to a - `Encounter Type` - `Description` -![Save form](/save_form.png) +![Save form](/images/save_form.png) Finally, the form is ready for adding to the backend for rendering. -![Preview form](/preview_form.png) +![Preview form](/images/preview_form.png) diff --git a/pages/docs/developer-guide/contributing-guide.mdx b/pages/docs/developer-guide/contributing-guide.mdx index 8940d27..e5ffa0c 100644 --- a/pages/docs/developer-guide/contributing-guide.mdx +++ b/pages/docs/developer-guide/contributing-guide.mdx @@ -8,5 +8,5 @@ import { Callout } from 'nextra-theme-docs' ## Dependencies -Requires [Node.js v14](https://nodejs.org/download/release/v14.21.3/) or higher. +Requires Node.js v18 or higher. diff --git a/pages/docs/field-types-reference.mdx b/pages/docs/field-types-reference.mdx index bc7aee8..9af6323 100644 --- a/pages/docs/field-types-reference.mdx +++ b/pages/docs/field-types-reference.mdx @@ -30,7 +30,7 @@ Renders a text input. Renders: -![Text field](/text.png) +![Text field](/images/text.png) ## number @@ -53,7 +53,7 @@ Renders a number input Renders: -![Number field](/number.png) +![Number field](/images/number.png) ## select @@ -99,7 +99,7 @@ Renders as a dropdown list Renders: -![Select field](/select.png) +![Select field](/images/select.png) ## date @@ -130,7 +130,7 @@ Renders as date input. When clicked, the input reveals a date picker with curren Renders: -![Date field](/date.png) +![Date field](/images/date.png) ## datetime @@ -157,7 +157,7 @@ Renders the date input with a time picker beside it. When clicked, the input wil Renders: -![Datetime field](/datetime-select.png) +![Datetime field](/images/datetime-select.png) ## checkbox @@ -195,7 +195,7 @@ Renders like a multi-choice select field. This kind of field lets you select mor Renders: -![Checkbox field](/checkbox.png) +![Checkbox field](/images/checkbox.png) ## textarea @@ -216,7 +216,7 @@ Renders a textarea input. By default, the textarea will be 4 rows tall. You can Renders: -![Textarea field](/textarea.png) +![Textarea field](/images/textarea.png) ## radio @@ -250,7 +250,7 @@ Renders a radio input. A radio input allows users to select an option from a lis Renders: -![Radio field](/radio.png) +![Radio field](/images/radio.png) ## toggle @@ -287,7 +287,7 @@ Renders a toggle input. This type of control is suitable for collecting boolean Renders: -![Toggle field](/toggle.png) +![Toggle field](/images/toggle.png) ## content-switcher @@ -321,7 +321,7 @@ This is a custom single select control from Carbon. Renders: -![Content switcher field](/content-switcher.png) +![Content switcher field](/images/content-switcher.png) ## fixed-value @@ -418,7 +418,7 @@ you need to link multiple questions together. Renders: -![Group field](/group.png) +![Group field](/images/group.png) ## repeating @@ -475,7 +475,7 @@ Renders a repeating group field. Renders: -![Repeating field](/repeating.png) +![Repeating field](/images/repeating.png) The required number of repeatable groups is inferred from the value obtained from the `limitExpression` property in the `repeatOptions` object. @@ -488,7 +488,7 @@ The required number of repeatable groups is inferred from the value obtained fro If the number of repeated groups in the form does not match the required number specified for the field, a validation error will be thrown. -![obsCountError](/obs-count-error.png) +![obsCountError](/images/obs-count-error.png) ## file @@ -508,11 +508,11 @@ Renders a file input control. This allows you to upload files such as images and Renders: -![Radio field](/file-upload.png) +![Radio field](/images/file-upload.png) -![Radio field](/file-uploader.png) +![Radio field](/images/file-uploader.png) -![Radio field](/camera-capture.png) +![Radio field](/images/camera-capture.png) ## ui-select-extended @@ -544,13 +544,13 @@ The currently inbuilt datasources are: Renders: -![UI Select Extended](/ui-select-extended.png) +![UI Select Extended](/images/ui-select-extended.png) Under datasource, you pass the datasource name and optionally you can pass a config parameter. For the case of location, in the config, we pass the tag. The ui-select-extended also has 2 flavours (`preloaded` and `searchable`) -`searchable` means we don't preload the data but instead call the api after the user starts to search. For `searchable`, you would add an extra parameter in the schema - +`searchable` means we don't preload the data but instead call the api after the user starts to search. For `searchable`, you would add an extra parameter in the schema - `` "isSearchable": "true" `` @@ -572,7 +572,7 @@ This will render a dropdown list that is hooked up to a Problem DataSource. This Renders: -![Radio field](/problemRender.gif) +![Radio field](/images/problemRender.gif) ## drug @@ -592,4 +592,4 @@ This Rendering type is used for capturing a drug as an observation. Behind the s renders: -![Radio field](/drugRender.gif) +![Radio field](/images/drugRender.gif) diff --git a/public/add_page.png b/public/images/add_page.png similarity index 100% rename from public/add_page.png rename to public/images/add_page.png diff --git a/public/answers.png b/public/images/answers.png similarity index 100% rename from public/answers.png rename to public/images/answers.png diff --git a/public/camera-capture.png b/public/images/camera-capture.png similarity index 100% rename from public/camera-capture.png rename to public/images/camera-capture.png diff --git a/public/checkbox.png b/public/images/checkbox.png similarity index 100% rename from public/checkbox.png rename to public/images/checkbox.png diff --git a/public/content-switcher.png b/public/images/content-switcher.png similarity index 100% rename from public/content-switcher.png rename to public/images/content-switcher.png diff --git a/public/copy-schema.png b/public/images/copy-schema.png similarity index 100% rename from public/copy-schema.png rename to public/images/copy-schema.png diff --git a/public/create-new-form-button.png b/public/images/create-new-form-button.png similarity index 100% rename from public/create-new-form-button.png rename to public/images/create-new-form-button.png diff --git a/public/create-new-form-button1.png b/public/images/create-new-form-button1.png similarity index 100% rename from public/create-new-form-button1.png rename to public/images/create-new-form-button1.png diff --git a/public/create-new-page.png b/public/images/create-new-page.png similarity index 100% rename from public/create-new-page.png rename to public/images/create-new-page.png diff --git a/public/create-new-question.png b/public/images/create-new-question.png similarity index 100% rename from public/create-new-question.png rename to public/images/create-new-question.png diff --git a/public/create-page-modal.png b/public/images/create-page-modal.png similarity index 100% rename from public/create-page-modal.png rename to public/images/create-page-modal.png diff --git a/public/create-section.png b/public/images/create-section.png similarity index 100% rename from public/create-section.png rename to public/images/create-section.png diff --git a/public/create_new_form.png b/public/images/create_new_form.png similarity index 100% rename from public/create_new_form.png rename to public/images/create_new_form.png diff --git a/public/create_section.png b/public/images/create_section.png similarity index 100% rename from public/create_section.png rename to public/images/create_section.png diff --git a/public/date.png b/public/images/date.png similarity index 100% rename from public/date.png rename to public/images/date.png diff --git a/public/datetime-select.png b/public/images/datetime-select.png similarity index 100% rename from public/datetime-select.png rename to public/images/datetime-select.png diff --git a/public/datetime.jpg b/public/images/datetime.jpg similarity index 100% rename from public/datetime.jpg rename to public/images/datetime.jpg diff --git a/public/drugRender.gif b/public/images/drugRender.gif similarity index 100% rename from public/drugRender.gif rename to public/images/drugRender.gif diff --git a/public/expand-sections.png b/public/images/expand-sections.png similarity index 100% rename from public/expand-sections.png rename to public/images/expand-sections.png diff --git a/public/file-upload.png b/public/images/file-upload.png similarity index 100% rename from public/file-upload.png rename to public/images/file-upload.png diff --git a/public/file-uploader.png b/public/images/file-uploader.png similarity index 100% rename from public/file-uploader.png rename to public/images/file-uploader.png diff --git a/public/form-builder-url.png b/public/images/form-builder-url.png similarity index 100% rename from public/form-builder-url.png rename to public/images/form-builder-url.png diff --git a/public/form_name.png b/public/images/form_name.png similarity index 100% rename from public/form_name.png rename to public/images/form_name.png diff --git a/public/forms-dashboard.png b/public/images/forms-dashboard.png similarity index 100% rename from public/forms-dashboard.png rename to public/images/forms-dashboard.png diff --git a/public/forms-dashboard1.png b/public/images/forms-dashboard1.png similarity index 100% rename from public/forms-dashboard1.png rename to public/images/forms-dashboard1.png diff --git a/public/group.png b/public/images/group.png similarity index 100% rename from public/group.png rename to public/images/group.png diff --git a/public/interactive_builder.png b/public/images/interactive_builder.png similarity index 100% rename from public/interactive_builder.png rename to public/images/interactive_builder.png diff --git a/public/json.png b/public/images/json.png similarity index 100% rename from public/json.png rename to public/images/json.png diff --git a/public/login-credentials.png b/public/images/login-credentials.png similarity index 100% rename from public/login-credentials.png rename to public/images/login-credentials.png diff --git a/public/login-page.png b/public/images/login-page.png similarity index 100% rename from public/login-page.png rename to public/images/login-page.png diff --git a/public/multi-page-layout.png b/public/images/multi-page-layout.png similarity index 100% rename from public/multi-page-layout.png rename to public/images/multi-page-layout.png diff --git a/public/new-form.png b/public/images/new-form.png similarity index 100% rename from public/new-form.png rename to public/images/new-form.png diff --git a/public/number.png b/public/images/number.png similarity index 100% rename from public/number.png rename to public/images/number.png diff --git a/public/obs-count-error.png b/public/images/obs-count-error.png similarity index 100% rename from public/obs-count-error.png rename to public/images/obs-count-error.png diff --git a/public/page_name.png b/public/images/page_name.png similarity index 100% rename from public/page_name.png rename to public/images/page_name.png diff --git a/public/preview_form.png b/public/images/preview_form.png similarity index 100% rename from public/preview_form.png rename to public/images/preview_form.png diff --git a/public/problemRender.gif b/public/images/problemRender.gif similarity index 100% rename from public/problemRender.gif rename to public/images/problemRender.gif diff --git a/public/question-editor.png b/public/images/question-editor.png similarity index 100% rename from public/question-editor.png rename to public/images/question-editor.png diff --git a/public/question.png b/public/images/question.png similarity index 100% rename from public/question.png rename to public/images/question.png diff --git a/public/radio.png b/public/images/radio.png similarity index 100% rename from public/radio.png rename to public/images/radio.png diff --git a/public/repeating.png b/public/images/repeating.png similarity index 100% rename from public/repeating.png rename to public/images/repeating.png diff --git a/public/images/save_component.png b/public/images/save_component.png new file mode 100644 index 0000000..a58df46 Binary files /dev/null and b/public/images/save_component.png differ diff --git a/public/save_form.png b/public/images/save_form.png similarity index 100% rename from public/save_form.png rename to public/images/save_form.png diff --git a/public/save_page.png b/public/images/save_page.png similarity index 100% rename from public/save_page.png rename to public/images/save_page.png diff --git a/public/save_question.png b/public/images/save_question.png similarity index 100% rename from public/save_question.png rename to public/images/save_question.png diff --git a/public/save_section.png b/public/images/save_section.png similarity index 100% rename from public/save_section.png rename to public/images/save_section.png diff --git a/public/schema-editor.png b/public/images/schema-editor.png similarity index 100% rename from public/schema-editor.png rename to public/images/schema-editor.png diff --git a/public/screen.png b/public/images/screen.png similarity index 100% rename from public/screen.png rename to public/images/screen.png diff --git a/public/select.png b/public/images/select.png similarity index 100% rename from public/select.png rename to public/images/select.png diff --git a/public/single-page-layout.png b/public/images/single-page-layout.png similarity index 100% rename from public/single-page-layout.png rename to public/images/single-page-layout.png diff --git a/public/text.png b/public/images/text.png similarity index 100% rename from public/text.png rename to public/images/text.png diff --git a/public/textarea.png b/public/images/textarea.png similarity index 100% rename from public/textarea.png rename to public/images/textarea.png diff --git a/public/toggle.png b/public/images/toggle.png similarity index 100% rename from public/toggle.png rename to public/images/toggle.png diff --git a/public/tooltip.png b/public/images/tooltip.png similarity index 100% rename from public/tooltip.png rename to public/images/tooltip.png diff --git a/public/ui-select-extended.png b/public/images/ui-select-extended.png similarity index 100% rename from public/ui-select-extended.png rename to public/images/ui-select-extended.png diff --git a/public/images/view_components.png b/public/images/view_components.png new file mode 100644 index 0000000..374a4cf Binary files /dev/null and b/public/images/view_components.png differ