Building multiple embedded lists

Hope you can help.

My team is developing an internal form building tool that simplifies the creation of complex HTML forms by providing pre-made sections and standard form fields that can be combined by dragging and dropping.

This form builder will be used by our developers and it should allow them to create new forms that, in many cases, will need to replicate the structure of already existing forms. It is common for those forms to contain sections with a sequence of embedded lists.

Here's an example: The section called "Rewards" (the section title is not displayed in the image) contains a list of "Reward buckets" that contain lists of "Rewards for players", that at the same time contain lists of Rewards.

Now, our tool provides users with a "List" field. And when you embed a list inside another list, things don't look too bad:

enter image description here

But we're not finding an elegant way to allow users to nest three consecutive lists inside a section. It just doesn't work visually and hierarchy is hard to achieve, given that the list component always needs to behave in the same way when added to the section. (The green area indicates selection, by the way, the drawer should display setting options when a field is selected).

enter image description here

Here are some solutions we're considering:

  • Providing a pre-made section component that is a "List section", so it contains by default a button that duplicates its content (combination of fields). (This breaks a bit the IA, since pre-made sections are templates of the existing forms' sections and will contain fields in them)

  • Only allow the nesting of one list inside another list, and force users to manually add duplication logic to a button in case they want to duplicate a combination of fields (Buttons can be added as individual form components and can contain logic)

  • Provide two typologies of list: Simple list (the button to Add an item is displayed only on hover) and Complex lists (a sort of subsection with a duplication button by default). So more visual hierarchy can be achieved.

Thanks for reading! Please don't hesitate to ask for any clarifications. I understand there are a lot of details to this problem :-/

Tags: