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

Hello everyone, I will be working on the project “Next Generation Form Builder UI for the OpenMRS Community”. The goal of this project is to rebuild the Ampath form builder in react.js and improve the Ampath form builder’s UI and user experience.

This thread will be used for project updates and discussions.

Project Details: Next Generation Form Builder UI for the OpenMRS Community


  • Primary Mentor: @samuel34 - thank you to the @OHRI team for your support in this project!
  • Secondary Mentor: @dkibet - thank you to @AMPATH for your support as well!

Student: @kumuditha

Epic: [O3-1336] GSoC 2022: Next Generation Form Builder UI for the OpenMRS Community - OpenMRS Issues


Hey @kumuditha welcome to OpenMRS community. This is an exciting project and have been also on the @OHRI’s team mind. And we have actually built the carbonised viewer that is compatible with the AMPATH forms schema. You can test it here

This is how you access it: image

This is how it looks like: image

Link to the form schema used.

You can even change the editor theme there if you want to go to the “dark side” of things :laughing:

Feel free to reach out to @pirupius directly or we can schedule a call as discussed on the MFE call few minutes ago.

cc: @grace


That looks great!. I’ll test it out and reach out soon. Thank you for the heads up.

1 Like

Hi Kumuditha, this is such an exciting project. As you have already shared in your project proposal, the whole Form Builder app should indeed all be done in Carbon.

I especially liked in your proposal that you have already investigated what Carbon elements to use, and then used those to create designs showing how you would approach it, like this: 1S Mockup of the Dashboard Component

Minor points:

  • Personally I think the main navigational colors should be changed from purple to the O3 RefApp Global Nav color (#005D5D).
  • In Form-Editing mode: I would also like for the Form Builder to default to the Split Screen view, instead of the fullscreen 1-page view.
  • In Question-Editing view: The “Concept” and “ID” should be ordered with Concept first, THEN ID. Right now they’re usually switched.

My other first thought was, is there a way you think we should break this down, eg should you start with the lowest-hanging fruit that will offer value? Eg it would definitely help folks right away to get the Carbon-based preview they are looking for, instead of the kind of Bootstrap-based preview that the GUI offers now. But maybe it’s not possible to have that running concurrently with the rest of the Angular application, and you should just rebuild the whole thing waterfall-style…? What do you think?

BTW in the meantime - I am working with Ampath to get you explicit mentors ASAP, should have them id.'d early next week.


Project Updates

Week 01: 2022-06-12T18:30:00Z2022-06-18T18:30:00Z

  • Got new mentors: @samuel34 (Primary Mentor), @dkibet (Secondary Mentor)
  • Started Initialising the development environment project.
  • Sent the first Pull request on initialising the project.

Week 02: 2022-06-19T18:30:00Z2022-06-25T18:30:00Z

  • Started working on the dashboard component.
  • In my initial proposal, the design of the form builder was intended for the Ampath, but since it is for OpenMRS 3.x, the designs had to change. I created a few mockups and shared them with my mentors and the openmrs3 slack channel.

Dashboard Component

Form Builder and Form Viewer Components

Scheme Editor Component

@pauladams, It would be really helpful if you could provide some input on these designs.

cc: @samuel34 @dkibet @grace

Here is the second pull request, the implementation of the dashboard component.

@pedrosa @luis.oliveira that sounds like an interesting project for ICRC too.

(cc @achachiez, @reagan @enochb)


Hi everyone,

It’s been a while since I updated this thread. So, after implementing the Dashboard component, I began working on the form editor, which includes the schema editor, interactive builder, and form viewer. I created the basic UI and a method to route to the editor based on the form selected.

  • edit/new (new form)
  • edit/{form-uuid} (existing form).

Next I started implementing the schema editor, I used ace-editor as the editor and display the schema according to the selected form.

Here is the Pull Request on the Implementation of the Schema Editor. @samuel34 @dkibet could you review this pull request?

Hi everyone, Here is the pull request on implementing the form saving feature.

This PR includes,

  • UI design updates
  • Enables users to
    • Create, update or save a form as a new version.
    • Create, edit schemas and upload to a form.
    • Publish/ Unpublish forms.

@samuel34 @dkibet, Could you review this PR.

1 Like

Hi everyone, Here is the pull request on implementing the interactive builder component. @samuel34 @dkibet Could you review this PR?

Hi everyone, Here is the pull request on implementing the form viewer component. @samuel34 @dkibet Could you review this PR?

CC: @grace

Quick question (and this can be OUTSIDE of the scope of your current project; no pressure to do this unless you feel like it): How heavy of a lift would it be to add a reorder UI to the question UI here?


I often find I need to re-order questions after I’ve already made them using the UI - but then I’m forced to either delete a bunch to re-do the order, or do a bunch of copy/pasting in the schema itself.

I’m imagining one of the 2 approaches (though open to others too)

  • Click a “reorder” icon to drag to desired place in list: image
  • Click an “up” or “down” arrow to move the item up or down in the list image

(@cduffy/@pauladams/@alinesilveira I couldn’t find a carbon icon/pattern for re-ordering items in lists - are you aware of one?)

1 Like

Screenshot 2022-09-16 at 10.19.20

This icon indicates that something is draggable. You can click, and drag to reorder it in a list. The only time this has been used in designs is in the not-yet-implemented implementor tools screens.


Yeah that would be useful, I’ll work on implementing this

1 Like

Hooray!! Thank you Kumuditha, that will be a frequently used feature.

1 Like