How to effectively capture nested data?
We need to capture data in the following structure(A json payload is the easiest way to represent the structure I know of):
{
"A": [{
"B1": "foo",
"B2": 1,
"B3": [{
"C1": "bar",
"C2": 2,
"C3": [{
"D1": "baz"
}]
}]
}]
}
The user has to capture this information in a form/forms/table. As you can see A
is a collection of data, so is B3
and C3
. Basically it's nested collections of data.
Something to note is that the structure represents a single domain entity, i.e. D1
doesn't make sense outside the context of the C
items and so on.
We initially thought the easiest way split up the capturing process without loosing context would be to have an A
page that has a table of B
items and a button that allows you to add a B
item. Upon clicking the Add new B item
button you are taken to a page to capture B1
, B2
and a table for B3
that contains C
items also with a Add new C item
button and so on... While maintaining context with a breadcrumb. So if the user is on the deepest page and capturing D1
the breadcrumb would display A/foo/bar
The primary users of the system raised concern that there needs to many A
items captured. And being moved from screen to screen would be frustrating. Their suggestion is that the data be captured in a table. e.g.
Our issue with this is that there is so much duplicated data being typed in over and over again. And another issue is the possibility that the user could make a typo, creating 2 instances when only one was intended i.e. foo
and fo0
I guess my question is, is there a nice way to allow users to capture large amounts of nested data at once?