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

Primary mentor	Samuel Male
Backup mentor	Donald Kibet
Assigned to	Kumuditha Karunarathna

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.

Form Editor

The form editor contains 3 sub components.

- - Schema Editor
  - Interactive Builder
  - Form Viewer

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.