GSoC 2022: Next Generation Form Builder UI for the OpenMRS Community

Abstract

Ampath form builder provides an interactive interface that allows OpenMRS to build schemas effortlessly. Users can create schemas using their interactive form builder or by writing JSON in the Schema editor.
The current form builder is an angular based module. This form builder makes creating/editing forms more effortless. But the user interface of the form builder has various unexpected bugs and user experience issues. 
This project is based on creating the Form Builder UI for OpenMRS as a micro front-end using React JS and micro front-end technologies. 

Required Skills

React

JavaScript

Typescript

Project Rating and length

Medium

175 hours

Objectives

• To replace Ampath Form Builder  with a React based module

• This is intended to replace the form builder only, not the rendering engine
  1. Ability for view all available forms in the Dashboard. ✅
  2. Ability of Create new forms. ✅
  3. Ability of edit existing forms. ✅
  4. Ability to create a form schema using Schema editor. ✅
  5. Ability to create a form schema using interactive builder. ✅
  6. Ability to view a functional preview of the form through the form viewer component. ✅
  7. Ability to publish/ unpublish forms. ✅
  8. Ability to save forms. ✅

Documentation

https://talk.openmrs.org/t/gsoc-2022-next-generation-form-builder-ui-for-the-openmrs-community-discussion/36817/16

Detailed Project Report

Dashboard

Here, users can view all currently available forms, and the users can either update an existing form or create a new one.

Open

Form Editor

The form editor contains 3 sub components.

•  

  •  

    • Schema Editor

    • Interactive Builder

    • Form Viewer

Open

• Schema Editor

The Scheme Editor displays the JSON version of a form. This component consists of a editor. Using this scheme editor users can create or edit schemas and render them.

• Interactive Builder

The interactive builder enables users to easily design forms. With the click of a mouse, users may create pages, sections, and questions. In the meantime, when creating a form, both the JSON schema and the displayed form are modified. 

Form Viewer

The form viewer displays the a functional preview of the current form. Currently we are using OHRI form engine to generate the form.

Save Forms

• Save Existing Form

Users can modify the schema of a current form here, while also having the option to update the form's details such as name, version, encounter type, and description. 

• Save New Form

Users can save the newly formed schema to a new form here.

Publish Forms

The form editor provides the option to publish or unpublish a form.

Application Demonstration: link
Demonstration Video: link

Weekly Reports

1. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-01-a086960ea7f5

2. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-02-49df4fb64c25

3. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-03-2b479ecc55e3

4. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-04-24020b6a8b5b

5. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-05-f7a51bffe9b8

6. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-06-114863be7c7f

7. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-07-655196314ab6

8. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-08-9857169e9c5a

9. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-09-1360e9bd0fbe

10. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-10-4b16586ce6d8

11. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-11-278739107084

12. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-12-8e598783256f

13. https://kumudithaudaya.medium.com/gsoc-2022-with-openmrs-week-13-e074b9605d84

Final Presentation

 http://youtube.com/watch?v=Ptg6f5-JpMM

Resources

https://talk.openmrs.org/t/ampath-form-builder/14317
https://talk.openmrs.org/t/gsoc-2022-next-generation-form-builder-ui-for-the-openmrs-community-discussion/36817/10
Jira Epic