Picture showing the problem with the nested form Here's how it works:

  • The user uses the dropdown in the gray "new service" area to select a service.
  • Once one is selected, let's say Web Design (cuz why not?), then they can click "Add Project Service."
  • Once a new Project service (Ex. "Mock-ups" or "Mobile Responsiveness" or something like that) is added within that Service "category" they fill out some information. One of these bits of information is an estimate breakdown, which is where the user can break down their estimate in terms of Work/Doubt. This process is started by clicking "Add Breakdown".
  • Each of these breakdowns (not shown) contains a number for the estimate, a description and the category of the estimate (like work or doubt). So three fields. The estimate broken down numbers get summed and validated against whole estimate. The suggestions are clickable and auto-fill the form based on previously completed projects.

As you can see, the user can have 1 to N Services, and for each Service 1 to N Project Services. There is also 1 to Several Breakdowns possible, but realistically only 2 to 3 would be used. Not to mention selecting from a list of employees, and categories. The thing that is puzzling me is how to organize and simplify this mess; it's all nested and crazy and unintuitive!

So far I have two thoughts, but I don't know if they're laziness or good UX:

  1. Have one form where the user selects a service, then fills out the information and when they click "add" it creates a card below the form and clears the form. The user can remove that card, or edit it. If they edit it, the data repopulates the form and any changes are bound to the card. Simple. Relatively clean.
  2. Have the whole form on one row of a table, like line items. In the bottom of the table would be a persistent row for adding. So you would have the form data in their inputs always editable. This seems less clean, but still simple.
  3. Any other ones you can think of that you've seen a convention for?

Anyway, my puzzler feels broken, so I appreciate any advice you're able to give. Thank you ahead of time!

  • Do you also have requirement of having a Manage Page where you can see Breakdowns associated with services?
    – Moksh
    Sep 5, 2020 at 9:28
  • Yes, I do. It will be on a summary page.
    – mrClean
    Sep 5, 2020 at 16:18

1 Answer 1


As far as I understood, user may have many records and for many records scenario, tabular structure is very useful (your second option).

At first, you will have empty table of records and in above toolbar there will button to create a new Project service. On the button click, you can open a pop up(I assume Project Service Table is not opening in pop up already).

You can provide drop down to Service and other fields on that pop up window. For Breakdown option, you may have editable table where + sign to add Breakdown and - is for removal. Also,one save button at the bottom of pop up. Once, you save the record, it will be displayed as first row in table.

On edit mode, you can populate same form with all values.

For your reference:

Manage Page for list all your Project Service. Give Add/Edit/Delete buttons at the top of this table. enter image description here

When create, the pop up should open with this kind of form. enter image description here

Sample for breakdown table inside above window as other form item: enter image description here

Hope, you will get the idea. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.