MasterDetail component allows to group contents into levels (sections) and saves page space. Smart and flexible navigation between levels via built-in breadcrumbs or command components gives a neat and stylish interface for users.

Each level in the flow is represented with a MasterDetailLevel component. Switching between levels occurs by means of SelectDetailLevel handler and is based on AJAX, that means each level is loaded dynamically by AJAX. SelectDetailLevel can be attached to any ajaxified PrimeFaces and non PrimeFaces component. Such typically components are CommandLink, CommandButton, MenuItem, RemoteCommand, HotKey and any other components with attached f:ajax / p:ajax.

This approach gives a flexible and powerful capability to control partial validation and to call action / actionListener during navigation. Area to be updated during navigation between levels is set automatically to the MasterDetail component - no needs to specify it explicitly. But of course, processed and updated areas can be controlled more precise by "process" / "update" attributes. Partial validation can be e.g. skipped by setting process="@none" or immediate="true". Partial validation in case of the navigation via breadcrumbs is always skipped automatically.

Other features are a server-side listener invoking when a navigation attempt takes place, "header", "footer" facets and more.

Attention: You have to reference the pe:masterDetail in the "update" attribute of command components manually if you have any auto updatable components, such as p:growl or p:message with p:autoUpdate, on the page.

Known limitation: MasterDetail component doesn't work inside of data iteration components extending UIData, e.g. inside of DataTable. More precise: the navigation will not work when pe:masterDetail is placed within a data iteration component.