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.
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
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:
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.
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.
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.
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:
Click an “up” or “down” arrow to move the item up or down in the list
(@cduffy/@pauladams/@alinesilveira I couldn’t find a carbon icon/pattern for re-ordering items in lists - are you aware of one?)
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.
