Drag & Drop Controls in FormBuilder

When creating a Form 2.0 in FormBuilder, we are faced with problems in drag and drop controls.


Currently, when dropping multiple controls in a single cell in FormBuilder (a form in the Implementer Interface has multiple cells, as shown in the photo attached), there are a few issues:

  1. If you attempt to reorder the obs within the same cell, the observation disappears from the working canvas
  2. Control Id gets messed up if obs are shifted around within the same cell


After investigating for more than a week to fix this issue with drag and drop, we found that if a user is forced not to input multiple controls in the same cell, these issues such as obs disappearing from the canvas when reordering the form, can be resolved. Meaning, the user can input one control in one cell and the next control in the cell below. Functionally, this does not impact how the form is viewed in the Consultation page (as attached), as cell are not visible when filling up the form.

Hence, we propose that FormBuilder have a restriction of 1 obs control per cell to avoid a user from facing the issues when creating a Form 2.0

Cells in Implementer Interface:


Multiple Controls in the Same Cell in FormBuilder:

One Control Per Cell in FormBuilder:

Consultation Page Looks the Same Irrespective of Both the Above Scenarios:

CC: @snehabagri @vmalini @pramidat @angshuonline @binduak @rajashri @shivarachakonda

I am not sure. IMO, If there is a problem, we should fix it, rather than downgrade the functionality. There is also requirement for multiple controls in a single cell, because in many case, it makes sense to have a single line. (e.g. recording complaints)

Hey Angush,

Agreed, but the difference between the same cell or different cell is very specific to an implementer. When we look at the form while filling, it would look the same even if they are in different cells. So instead of complicating the code further, it would make sense to disable it.

Hmm. I am not sure. There are requirements of contents being presented a) in a single line b) additional information like “last value” or “read-only” labels, “descriptions” (in additional to current label controls) being placed next to a control.

Historically, we wanted to have a grid layout with multiple columns support. As the CSS got complicated we redesigned to 1 column and decided that we will simplify to a single-column layout, allowing the controls at the cell level to decide what form/factor it should take. To me, the above solution, make it seem like we are further pulling back because of technical limitations, rather than the desired functionality.

One possible way to solution the above, if we make a container control (like a section) in-line its children in a single row.

Lets hear what others have to say. You can bring up in the pat call too.

@mksrom @darius @bharatak @arjun @pramidat @sumanmaity112 @shashikanth @akhilmalhotra

Hey Angshu,

Yes, if we want to add multiple controls in a single line, we can add a section to the cell and then add multiple controls inside the section. This will help us group the contents as per our needs.