In the design of a good user interface, it is often desirable to mix elements of the list form, the detail form, and other elements to tailor a customized input/output experience. The subform is a feature that often proves useful. A subform is a nested form, one form within another. The need arises when attempting to display data from two or more tables within the same form. Typically this is done when there is a one-to-many relationship between the tables. While the user is adding or editing a record in the main form, it is convenient to have a list of records in the related "many" table, and perhaps be able to access them instantly for editing.

Bringing such complex data interactions to a Web form is a daunting proposition, requiring mastery of advanced Ajax programming techniques. Fortunately the 4D Ajax Framework provides ready to use objects, like the Data Grid and the Bridge, with convenient API’s that abstract away the difficult work. This frees you up to focus on higher level application development.

In the example database provided, the simple structure consists of a Department table with a one-to-many relation to an Employee table. In the form design, Department will be the data source of the main form, and often be referred to as the "parent"; Employee will be the source of the subform, and often called the "child".

A typical layout arrangement is to show a single record of the parent table in some kind of detail form layout, and below or off to the side, a summary list view of records from the child. The example application builds a simple version of such a form in increments. At each stage, you can see the form slowly taking shape, and taking on functionality. Likewise, you can inspect the source code of each incremental HTML file, as the example builds.

Download Session Materials