Web Based Implementation of Work With Pattern

Unofficial Content
Go to People And Organizations Knowledge Base to see this pattern in action and to an implementation for more info on how to use it.

In this implementation there are three forms, named: Selection, View and Transaction.

Selection Form

It's the form that allows to select an object.


  • Allows to Insert, Update or Delete an object. Update and Delete actions are present in the grid itself as images with links. Insert action is a buttom at the top of the grid.
  • The grid is paged. Go to first, previous, next and last is provided. Go to <page> will be added in the future.
  • Can have many ways to order it. The first combo presents all the possible orders.
  • Filter. Many attributes and complex conditions can be defined. The Search button activate the search.
  • Actions. Besides the Insert, Update and Delete actions, user defined actions can be defined. Can be in grid (like Update or Delete) or out of the grid (buttons).

View Form

It's the form that present the information of a given object.


  • This form isn't normally present in the winform implementation of this pattern, but very important in the web one. The reason is this form is the natural target for a link to the object.
  • Tabs. Given an object can have lots of information, a Tabbed form is used. In order to speed up the loading of the page, only the current tab is loaded from the server.
  • Many kind of tabs. A Tab can be:
    • Tabular. A plain table with the object's attributes.
    • Grid. Usually used for displaying subordinate information, like in this case the many addresses of an Organization.
    • User defined. A WebComponent defined by the developer.
  • Tab scroll. In case of many tabs, a scroll functionality is provided.

Transaction Form


Aditional functionality

Each webpanel has the following WebComponents:

  • Header. Usually has a context free menu.
  • Footer. Usually has Name and Version of the application.
  • Recent Links


  • Why is the View form needed?
Because in a web application any form can link to another one, so it's important to have a single form to link to an object. Once in this form, the user can navigate to all the info related to it.
  • Why is the View form tab based?
Because usually there is too much information about an object to display it in a single screen.
  • Why not use a DHTML tab?
If all the object info is put inside DHTML tabs the page can be very slow to download. It's better in terms of performance and scalability to download just only one tab each time.
  • How many actions should be present in the grid?.
Not too many. Usually just Update and Delete are enough.

More info

See How to Implement Good "Work With" Dialog Boxes in the Web for a presentation given in the Event 04.