Monthly Archives: February 2010

Three techniques to implement a Web UI for editing a list of objects

Introduction

How do we implement the User Interface to edit a list of complex objects, some of these objects might have a list of other objects as well?, there are a number of techniques to implement this, I present three of them below. You need to assess the usability and ease of implementation for each one before choosing a technique for your UI.

The easiest single view technique

I believe this is the easier and the technique that provide the least rich user experience.

Have a drop down list with an identifier for all the object with a new button next to it. When the user selects an item from the list an area is displayed with the fields populated with the object properties including a Save and Delete buttons. Clicking the Add New button results in the area displayed with blank fields

Example 1:

A drop down list with button to create a new record

select_new

Clicking the ‘New’ button displays empty fields

new_client

Selecting an existing record from the drop down list shows the fields prepopulated to provide the ability to edit the record

edit

Example 2:

This example shows a more complex UI using the Dojo Toolkit to edit a collection of objects with each object having another collection of objects:

ss_workstreams_half

Selecting a row from the multiple select shows the second level of editable objects

ss_workstreams_full

The rich multi-view technique

This technique is highly effective in a MDI (Multiple Document Interface) view. But can also be used in a classical Web view where each view is displayed on a separate Web page. This technique is highly effective when editing complex object graphs specially when a new view is launched to edit or add a new object as shown in example 2 below.

Display all the details in a grid with new, save and delete buttons. The Grid is readonly. Selecting a record populates a form on the side or below the grid or pops a window with the details, after editing the user can click save. Clicking add new can either launch a window with a blank form or show a blank form to be edited

Example 1:

The example below shows a form binding to a grid, when the user makes a selection from the grid the form is pre-populated with the selected grid record. The form could also be used to add new records to the grid

grid_form

Example 2:

The example below shows a grid with a number of buttons to edit/delete and create a new record

grid

Clicking the edit button launches a new window to edit the record details

edit_details

Clicking the new button launches a new window to add a new record

new_details

The rich single view technique

Have a fully editable grid with save, new and delete buttons. All operations are performed on the Grid. I believe this technique provides a very rich user experience if it utilises AJAX to update the data once the user has finished updating the records. The view can also fit within a single Web page view. The technique may only useful when editing objects that have simple properties, but not objects that have a collection of other objects that also need to be editable.

Example 1:

edtiable_grid

Example 2:

editable_grid