Web UI design for CRUD modules

Question

In the past, I mainly programmed desktop applications. When I created an administrative app for a store, I did the following for CRUD modules.

Let's say I need to add new articles to my store, the app shows me the new article form and begin filling.

When I reach the field to select the article provider, if it doesn't exists, I click a button, the provider dialog appears, fill provider data and when return I can continue filling the article form.

Most web UI designs and samples I see seems not to implement that feature. If in the middle of the form filling, the user founds some data is missing, in order to add it he/she must abandon the page, open the new form to create the missing info and then return to the original form and fill the whole data again.

Are there any framework/design patterns or some other design method that takes this situation into account to simplify data load tasks?

It may be a single / multiple page UI or begin displaying modal dialogs over the form.

---

EDIT (to clarify. couldn't find any image):

Example: Stock & billing management application.

In a desktop app to add a new product you go to Products -> New and a dialog window appears with a form asking for:

1. Product id
2. List item
3. Description
4. Price
5. Provider (assuming a single provider sells us a given product)
6. Many other field.

You start filling the form and when you reach the "Provider" you select it in the select box. If the product provider was not loaded in the system, you have an option to create a new one.

So you select "Create new provider" and a new dialog window appears with the New provider form.

After you press Save to save the new provider, window is closed and you get back into the New product so you continue filling the rest of the form fields.

If the Provider field does not give you the opportunity to create a new one if missing, then you have to cancel adding the new product, go to the Provider CRUD and then go again to the Product CRUD and fill id, description & price fields again because they are gone.

---

Web UI is different from a standard desktop UI. In desktop you have modal windows, in web you can emulate them but could lead to a bad design if multiple modals are shown one over other.

In web you can create a multipage applications, single page one, and many other design patterns that usually differs from desktop apps.

What I want to know if there is somekind of framework or design tips to help me to build an application.

Answer 1

I would recommend an "accordion" style form. Namely: Select a provider: [ Provider drop down v ] Or [ Add a new provider ].

When the user clicks the button (or the hyperlink, whatever you prefer), the form slides apart to reveal the new provider form. That information is submitted at the same time the main form is submitted, and you can handle the sequence (provider created first, then the product) on the back end.

I may even recommend that as well the desktop context- I try to avoid modal dialogs whenever possible.