Updated Documentation (#11)

* Customisation

* login credentials page

* login page

* create new page

* React form engine

* React forms engine index.mdx

* images

* slashes added to link png

* renaming png

* final finish on the png

* developer guide

* refApp & Ohri urls added

---------

Co-authored-by: Pius Rubangakene <[email protected]>

pages/docs/comparison-with-ampath-forms.mdx

@@ -1,6 +1,6 @@
 # Supported AMPATH Forms Features
 
-OHRI Forms has committed to the schema used by the AMPATH Forms Builder, and as such, there is a high level of compatibility. OHRI Forms will be able to use the entire schema, but some features may not have been implemented by OHRI Forms. Some may be added in the future, other functionality may not be considered necessary for OHRI Forms. This page summarises that.
+RFE Forms has committed to the schema used by the AMPATH Forms Builder, and as such, there is a high level of compatibility. RFE Forms uses the entire schema, however some features and functionalities may not be considered necessary for RFE Forms. This page summarises that.
 
 ## Supported functionality
 
@@ -18,6 +18,10 @@ The following field types as defined by AMPATH Forms are currently supported:
 - `textarea`
 - `group`
 - `repeating`
+- `drug`
+- `file`
+- `problem`
+- `ui-select-extended`
 
 ### Other supported features
 
@@ -27,18 +31,3 @@ The following field types are also supported, but not currently part of the AMPA
 
 - content-switcher
 - toggle
-
-#### Features
-
-- Skip patterns
-- Input validation (see the validation manual)
-
-## Unsupported features
-
-The following features are not currently supported by OHRI Forms:
-
-### Field types
-
-The following field types are not currently supported:
-
-- `ui-select-extended`

pages/docs/core-concepts/forms.mdx

@@ -1,6 +1,6 @@
 # Forms
 
-A form is a collection of form fields classified through `pages` and `sections`. Forms are defined following a schema written in JSON. O3 forms are leveraging the [forms schema originally created by the AMPATH Form Engine](https://ampath-forms.vercel.app/core-concepts) with a few custom extensions. Below is a snippet of a basic form structure:
+A form is a collection of form fields classified through `pages`, `sections` and `questions`. Forms are defined following a schema written in JSON. React Form Engine (RFE) forms are leveraging the [AMPATH Forms schema](https://ampath-forms.vercel.app/docs/core-concepts/) with a few custom extensions. Below is a snippet of a basic form structure:
 
 ```json copy
 {

pages/docs/core-concepts/pages.mdx

@@ -1,6 +1,6 @@
 # Pages
 
-A page is a collection of related sections. A typical page definition consists of a `label`, `inlineRendering` (optional) and a list of `section`said. The engine uses the page’s label to identify it from other pages; that being said, it’s mandatory to keep the page’s label unique. Below is an example of a form with one `page` and `section`. The `section` has 4 questions labelled:
+A page is a collection of related sections. A typical page definition consists of a `label`, `inlineRendering` (optional) and a list of `section`s. The engine uses the `page`’s label to identify it from other pages; that being said, it’s mandatory to keep the page’s label __unique__. Below is an example of a form with one `page` and `section`. The `section` has 4 questions labelled:
 
 ```json copy
 {

pages/docs/create-new-form.mdx

@@ -2,46 +2,36 @@
 
 ## Introduction
 
-When creating user interface forms in OpenMRS frontends, the AMPATH form builder platform makes this task much easier by partially automating the process.
+The React Form Engine (RFE) form builder platform simplifies and partially automates the process of generating user interface forms in OpenMRS frontends.
 
-## Important links/concepts used in this document:
+## Links and ideas that are important to this text:
 
-- Getting started - https://ampath-forms.vercel.app/getting-started
-- Core concepts - https://ampath-forms.vercel.app/core-concepts
-- Validating fields - https://ampath-forms.vercel.app/validating-fields
-- Field types - https://ampath-forms.vercel.app/field-types-reference
+- Getting started - https://ohri-docs-chi.vercel.app/docs/create-new-form
+- Core concepts - https://ohri-docs-chi.vercel.app/docs/core-concepts/forms
+- Validating fields -https://ohri-docs-chi.vercel.app/docs/validation
+- Field types - https://ohri-docs-chi.vercel.app/docs/field-types-reference
+- Developer Guide - https://ohri-docs-chi.vercel.app/docs/developer-guide/contributing-guide
 
-## What is the AMPATH form builder?
+## What is the RFE form builder?
 
-The AMPATH form builder found at the address: https://openmrs-spa.org/formbuilder is an automation tool/website for auto-generating form schema JSON files which can be later loaded into the Form Engine to auto-create micro-frontend user interface forms.
+The RFE form builder is found at the following addresses: 
 
-This means the UI/UX developer does not have to manually create the user interface forms. And any technical/or non-technical person can use the form builder to generate these form JSON files.
-
-### How to use the AMPATH Form Builder
+- OHRI: https://ohri-dev.globalhealthapp.net/openmrs/spa/form-builder
+- Reference Application: https://dev3.openmrs.org/openmrs/spa/form-builder
 
-For macOS Users:
-
-Requirements:
+The RFE form builder is an automation tool/website for auto-generating form schema JSON files which can be later loaded into the Form Engine to auto-create micro-frontend user interface forms.
 
-- Make sure the Google Chrome browse is installed.
-
-Open the CLI terminal and run the command:
+This means the UI/UX developer does not have to manually create the user interface forms. And any technical/or non-technical person can use the form builder to generate these form JSON files.
 
-```copy
-open -a /Applications/Google\ Chrome.app --args --disable-web-security —user-data-dir="/tmp/chrome_tmp"
-```
+### How to use the RFE Form Builder
 
-The command above temporarily disables security in the browser. This is done since the Form builder usually fails to load due to certain security limitations.
+Requirements:
 
-This in essence is a ‘hack’ or work-around until this limitation/bug is fixed by AMPATH.
+- 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)
 
-**Note**: There is a warning that running the command above will cause stability and security to suffer. Ignore this warning since it is a temporary hack to get the Form builder running.
-
-After running the command above, the Chrome browser window will open.
-
-In the address bar, enter the form builder URL: https://openmrs-spa.org/formbuilder/.
+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)
 
@@ -61,52 +51,69 @@ With the correct details entered above, the platform will log you in. You will l
 
 ![Forms dashboard](/forms-dashboard.png)
 
-Now, click on `+Create New` in the top left corner to create a new Form schema.
+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)
 
-A ‘hamburger’ reveals beside the ‘Form Builder’ link. Click on it to reveal more options.
+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)
+
+Click on the `Interactive Builder` tab to open the builder page shown below:
+
+![Interactive Builder](/interactive_builder.png)
+
+Click on the `Start building` text link. and a popup window asking for the form details will show as below:
 
-![Schema editor](/schema-editor.png)
+![Form name](/form_name.png)
 
-Enter the form name
+Click on the `add page` text link below to add a page to your form
 
-![New form](/new-form.png)
+![Add page](/add_page.png)
 
-A Form can consist of Page(s), under a Page you can create Section(s), and under Section, you can create Form Questions.
+Add the page name in the pop up text box.
 
-**Note**: You can also create Section(s) directly under the Form without a Page.
+![Page](/page_name.png)
 
-To Create a Page, click on `+Create New Page`
+Click on the `Save` button to successfully save the page and proceed.
 
-![Create a new page](/create-new-page.png)
+![Save page](/save_page.png)
 
-A modal opens, enter the name of the Page
+Next, click on the `Add section`  text link to add a section to your form.
 
-![Create new page modal](/create-page-modal.png)
+![Create section](/create_section.png)
 
-Once created, click on the name of the page to expand and reveal more Sections.
+Click `save` to save the section added to form.
 
-![Expand sections](/expand-sections.png)
+![Save section](/save_section.png)
 
-Enter the page label and select True under `isExpanded`
+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`
+- `Question ID`: Must be unique
+- `Question type`
+- `Field Type`
+- `Backing Concept`
+- `Mappings`: Auto generate from concept selected
 
-![Create section](/create-section.png)
 
-Click on the name of the Section label drop-down to reveal the action to create a new Question
+![Question](/question.png)
 
-![Create new question](/create-new-question.png)
+Click `Save` to save the question
 
-Create your questions, providing the relevant details appropriately.
+![Save question](/save_question.png)
 
-![Question editor UI](/question-editor.png)
+Click on `Preview Form` tab to view how the form will look like when rendered.
 
-Remember to always save as the form builder sometimes unexpectedly closes without saving your current work.
+![Preview form](/preview_form.png)
 
-After you are done building all the forms, copy the generated json form schema to your project
+Click on the `Save` to save your final form. A popup form entry will appear to allow you enter details that include:
+- `Form name`
+- `Version`
+- `Encounter Type`
+- `Description`
 
-![Copy generated JSON schema](/copy-schema.png)
+![Save form](/save_form.png)
 
-Paste the json file to the packages folder under the relevant folder in the OHRI micro-frontend application project or OHRI’s UI editor.
+Finally, the form is ready for adding to the backend for rendering.
 
-![JSON schema](/json.png)
+![Preview form](/preview_form.png)

pages/docs/developer-guide/run-form-engine-in-openmrs3.mdx

@@ -2,7 +2,7 @@ import { Callout } from 'nextra-theme-docs'
 
 # Running the Form Engine against an OpenMRS 3.x frontend
 
-Presently, [OpenMRS 3.x](https://dev3.openmrs.org/openmrs) (O3) ships the [OHRI form engine](https://github.com/openmrs/openmrs-form-engine-lib).
+Presently, [OpenMRS 3.x](https://dev3.openmrs.org/openmrs) (O3) ships the [React Form Engine](https://github.com/openmrs/openmrs-form-engine-lib).
 
 This version leverages [React](https://react.dev/) and [Carbon design system](https://carbondesignsystem.com/) to get its look and feel to match that of O3.
 
@@ -26,9 +26,9 @@ Additionally, the [openmrs-esm-patient-chart](https://github.com/openmrs/openmrs
 
 ## Steps
 
-- Fork and clone the [OHRI forme ngine](https://github.com/openmrs/openmrs-form-engine-lib) repository.
+- Fork and clone the [React Form Engine](https://github.com/openmrs/openmrs-form-engine-lib) repository.
 - `cd` into your clone.
-- `pwd` to get the path of the OHRI form engine , which you will use later. You should see something like
+- `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
   ```
@@ -72,9 +72,9 @@ Additionally, the [openmrs-esm-patient-chart](https://github.com/openmrs/openmrs
 
 - Next, log into your 3.x frontend (could be `AMPATH 3.x`, `KenyaEMR 3.x`, or a community server like `dev3`) in your browser.
 
-- Congratulations! You should now be running the local version of the formegine in your application.
+- 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 formengine app should propagate into the form displayed in the workspace.
+- Any changes made to the form engine app should propagate into the form displayed in the workspace.
 

pages/docs/expression-helpers.mdx

@@ -1,6 +1,6 @@
 # Expression Helpers Reference
 
-OHRI forms provides a number expression helper functions that are useful for evaluating more complex expressions.
+RFE forms provides a number expression helper functions that are useful for evaluating more complex expressions.
 
 ## isEmpty
 

pages/docs/field-types-reference.mdx

@@ -1,6 +1,6 @@
 # Field Types
 
-OHRI Forms has committed to the schema used by the AMPATH Forms, and as such, there is a high level of compatibility. OHRI Forms supports almost all the field types from AMPATH’s schema with a few extensions. The most commonly used fields include `text`, `textarea`, `number`, `date` and `select`.
+RFE Forms has committed to the schema used by the AMPATH Forms, and as such, there is a high level of compatibility. RFE Forms supports almost all the field types from AMPATH’s schema with a few extensions. The most commonly used fields include `text`, `textarea`, `number`, `date` and `select`.
 
 Field types are defined in the questionOptions definition of a question using the following syntax:
 

pages/docs/technical-implementation.mdx

@@ -1,8 +1,8 @@
-# Technical Implementation of OHRI forms
+# Technical Implementation of RFE forms
 
-OHRI Forms is a lightweight form engine written in React and powered by Formik and Carbon UX. It uses FHIR along with OpenMRS' Web Services to communicate with the associated OpenMRS instance.
+RFE Forms is a lightweight form engine written in React and powered by Formik and Carbon UX. It uses FHIR along with OpenMRS' Web Services to communicate with the associated OpenMRS instance.
 
-Technically, OHRI Forms is a React component that requires the following props:
+Technically, RFE Forms is a React component that requires the following properties(props):
 
 ## Mapping Controls
 

pages/docs/validation.mdx

@@ -2,7 +2,7 @@ import { Callout } from "nextra-theme-docs";
 
 # Field Validation
 
-OHRI Forms is designed to support arbitrarily complex form field validations. Validation can be broken down into two types:
+RFE Forms is designed to support arbitrarily complex form field validations. Validation can be broken down into two types:
 
 1. Date based validation
 2. JavaScript expression based validation

pages/index.mdx

@@ -8,10 +8,10 @@ import Image from "next/image";
   <Image src="/ohri.svg" alt="OHRI logo" height="50" width="150" />
 </div>
 
-OHRI Forms is a React component that renders forms based on the AMPATH Forms Builder. The AMPATH forms are well defined here. OHRI Forms:
+React Forms Engine (RFE) Forms is a React component that renders forms based on the RFE Forms Builder. The RFE forms are well defined here. RFE Forms:
 
 - Use the same schema as the AMPATH Forms Builder.
-- May not implement all features from the AMPATH Forms Builder (yet).
+- May implement all features from the AMPATH Forms Builder.
 - May define some extensions to the schema specific to OHRI to implement functionality needed by OHRI (such functionality may be suggested back to the AMPATH Forms Builder team for their consideration to include).
 - Renders forms based on the Carbon Design system using React.