Saving data and displaying it, within a form

webforms
challenge

#1

This is 1 page of a ~4 page form.
Here I am focusing mainly on Part 2

What we see in part 2 is pretty simple. there’s a form on top, and a table below.

You enter the form details, and when you click “save this work history”, they appear in the table below.
I am wondering if you’ve seen this kind of data entry / display done well, and if you got any thoughts.

Normally, I see this kind of thing done with a modal. eg: you might have a table with an add button, you’d click “add”, a modal would appear in which you would enter the details, and click save. the information appears in the table. this seems to be a ‘cleaner’ way to do it - and it might be argued as preferable. but modals can be buggy and i’m curious how one might do without them here.


#2

One of the reasons why modals work well for this type of design is that they are easier to mentally manage. They provide focus on the task at hand by eliminating other distracting factors - such as the table itself. For a model of a well-done modal, LinkedIn’s process for adding experience to your profile is straight-forward and well-designed.

I haven’t seen this done in a table well for some time, largely due to the Pandora’s Box of practical and architectural issues entailed with removing data from a table, re-populating a data entry field, and allowing for changes to that data when the need to edit incorrect data appears.


#3

thank you Doug. I like what you’re putting down here.


#4

Did you see how facebook does this in the user’s profile?

You click + and editing fields appear inside the form. You can open several fields with Save button for each.