Another pattern for Dynamic/Expanding forms?

Feedback & Problem Solving
#1

Usually we just have a table rows with Delete row and Add new row button.

But what if there’s just too many columns? Can’t provide a mockup since I’m just thinking on top of my head.

A closest I can find on google image is this: expanding table

I am thinking of a table and a button that would open a modal with the form inside. Spacing issue is solved here because the inputs are vertical.

The problem tho is, after closing that modal, how should the inputted data look like in the table? Less column?

Currently not having this issue but who knows when I will be needing it. I just cant really think of a solution on how to solve this issue.

Must also say that wizard might not be applicable since it is a group of related data rather than “relationship” like

Dynamically add user interface
#2

Hey there,
I’m confused by this. :confused: Why does the number of columns affect whether you’d have a delete/add row button?

Maybe you could sketch what you mean.

(Or alternatively, maybe other people understand exactly what you mean and I’m just being dumb!)

#3

Hey @HAWK, the problem I’m talking about is if there’s just to many column, that will be needing a lot of horizontal space.

Now, by moving the “Inputs” instead inside a modal something like this (another same idea I have I found on google)

700×425 68.9 KB

The horizontal space issue there is gone because the inputs are now align vertically.

Upon saving, the modal will be closed and the values inputted will be transferred as a new “row” of value. And the horizontal space issue is back again.

Hmm, I guess this is more like an issue about table having too many columns.

#4

@jendimacapili
welcome to my world!
Tables are one of my UX nightmares.

In my opinion, it’s not a good idea to provide the editable view in a dialog for several reasons:

  • dialogs are adding complexity to the task
  • with this approach, keyboard navigation is not easy to use
  • you should handle the form validation in the dialog and can have an impact in terms of performances

What we did in cases like this:

  • we provided a quick edit mode within the table, offering an editable table like in the example you posted
  • we provided an extended edit mode opening a detail page where you, as a user, can perform all the actions you need
  • we grouped the less important (or dangerous) actions in a context menu (ex. delete)

we did some qualitative usability tests and we noticed an increase of performance in terms of time to accomplish the task.
We also noticed that users were much faster to identify validation messages and they were more reactive in entering the right values

I hope it will help

1 Like
#5

Wow. +1 for the backed responses.

How about when adding? Is it still fine for modals? Or you already have a row with empty inputs? Or empty row with “No data” kind of message and have a button somewhere?

#6

the table starts with an empty row containing the form controls in editable mode.
You can add a new row tapping/clicking on the CTA “Add new row” (placed at the bottom of the table)
We deliver a label with a counter about how many rows are left “30 rows left”

:slight_smile: