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

Mentor:

  • 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

3 Likes

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

2 Likes

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.

2 Likes

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)

2 Likes

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?