vincent15000's avatar

Best scenario between one big form and three little forms (several nested datas)

Hello,

I have a question about a form I need to code (with VueJS).

I have trainings, each training can have many units, and each unit can have many topics, and each topic can have many trainers.

training => many units (units table : name, hours_number, comments)
unit => many topics (topics table : name, hours_number, color --- to display in the calendar ---)
topic => many trainers (topic_trainer table : topic_id, trainer_id, hours_number)

To save / edit units, I do it from the show view of the training : the description of the training (training table) on the left side of the screen (1/4) and the units list on the right side of the screen (3/4).

I have at least 2 possibilities to save / edit units. I specify that all my forms are in modal windows.

FIRST SCENARIO : a unique form to edit each unit and all nested datas

  • one big form where the user can type the unit datas (name, hours_number, comments, ...), add / remove topics (name, hours_number, ... JS handled), and for each topic add / remove trainers (with assigned hours_number)

SECOND SCENARIO : three different forms

  • a form to add / edit a unit : name, hours_number, comments, ... each unit will appear in a separate card in the view

  • in the unit card body, a list of the topics with a button to add / edit the topics with a new form : name, hours_number, ...

  • in each topic line, a button to add / edit the trainers assigned to the topics : trainer, hours_number, ...

I have seen advantages and inconvenients for both scenarii.

What could be the better user experience between each scenario ?

Is there another way to design this case with multiple nested datas ?

What do you suggest me ?

Thanks a lot for your help.

V

0 likes
8 replies
vincent15000's avatar

@Tray2 Thank you ... that's effectively what I thought.

What could be the conditions to choose to update more than one model from the same form ?

vincent15000's avatar

@Tray2 I really don't understand the relationship between datalists and multiple models in the same form. Datalist are used similarly to dropdown to retrieve the id of an item.

vincent15000's avatar

@Tray2 Here is a screenshot of the view (not finished).

https://drive.google.com/file/d/1aqWNjueAupG02WQFNROjwKFiCdjWtuBS/view?usp=sharing

What you can't see (not coded for the moment), when you select a trainer, a new input appears to type the number of hours for this trainer, and it's possible to assign many trainers to the same topic.

I'm afraid that this solution is perhaps not the best one and three little forms could probably be a better solution, but with 3 forms, the user has to open a new form each time he need to add a topic and to add trainers.

There are advantages and inconvenients for each solution and I really hesitate to use one or the other.

On this page : https://tray2.se/posts/using-a-datalist-instead-of-a-dropdown-in-your-forms there is an error, you should add another n to the link to the blog of @sinnbeck ;).

Tray2's avatar

@vincent15000 The difference between datalist and dropdowns is that you can add things that doesn't exist in the list, while a dropdown is read only.

You have an example here on how I create the new series if it doesn't exist in the database.

1 like
vincent15000's avatar

@Tray2 I wondered if it would not be more convenient for the users to be able to add or remove a trainer without having to edit the entire unit and risk to delete a topic for example. What I see as an inconvenient for a one form scenario is that all is editable at the same time. But it is also an advantage.

The scenarii are probably both interesting for distinct reasons.

Thank you for your opinion ;). I will think about all that.

Please or to participate in this conversation.