Master/Detail Interaction Unit


Two or more groups of data related to each other has to be shown at the same time. The relationship linking them is the central idea. Therefore, the information to show must be in-sync respect to the relation: updates to one end must force the invocation in the other end.


Representation of domain relationships

Master-Detail IU Sample 1
Figure 1. Master/Detail example on Apple Mac OS/X.



The Master/Detail Pattern is probably one of the oldest know for Business User Interface developers and users. It is very intuitive to show invoices and its corresponding lines next to it.

The Master/Detail Pattern is driven by a relation (a domain relation usually) and two roles: the Master & the Detail.

The master is any component capable to provide an object. This object will guide and trigger the update in the details. Note that Population IU & Instance IU patterns can play this role.
The detail component is any component capable to show object(s) related to the master object conforming to the given relation. Note that Population IU & Instance IU patterns can play this role.

The classes used at both ends are determined by the relation used.


To make explicit the information related to an object.


The most typical case could be Invoices & Invoice's lines: Whenever the user select an invoice, the lines are updated to the selected one.

Countries & customer are another easy example. A population of countries can take the master role and another population of customers can play the detail role. Whenever a country is selected, the list of customers is updated to show the customers in such country.

Figure 1 shows an example on Mac OS/X. The upper part shows a list implementing a Population IU and action as a master. The lower part is a container implementing an Instance IU acting a detail part. Here, the relationship used in the Master/Detail is self: the same object is used to provide more details about the item selected.


The specification of a Master/Detail Interaction Unit is defined by:

Note also that Master/Detail can be applied more than once on the same interaction, producing two combinable scenarios:


An Master/Detail Interaction Unit is represented by a wire frame box showing its name with a small box & grid in the upper-right corner.

Root CUIP Metalevel

Valid XHTML 1.0 Strict Valid CSS