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.
Components and more
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
level Current level in flow. It can be arbitrary initialized and gets updated with each navigation. It allows to show any initial level when a view with MasterDetail component(s) is displayed. Default is 1.
contextValue Context value for the current level. It can be arbitrary initialized at beginning and gets updated with each navigation. Default is null.
selectLevelListener Method with signature int methodName(SelectLevelEvent). Server-side listener invoking when a navigation attempt takes place (via pe:selectDetailLevel). Return value defines the level to go. Default is null.
showBreadcrumb Flag whether a breadcrumb navigation is shown or not. Default is true.
showAllBreadcrumbItems Per default breadcrumb items right from the current level are not shown. This flag allows to show all breadcrumb items right from the current level as disabled. Default is false.
breadcrumbAboveHeader Boolean flag to allow rendering of breadcrumb above or below header facet. Default is true.
style Style of the main MasterDetail container element. Default is null.
styleClass Style class of the main MasterDetail container element. Default is null.
PrimeFaces Extensions Showcase - © 2011-2018, PrimeFaces: 6.2, PrimeFaces Extensions: 6.2.1, JSF: mojarra 2.3.2, Server: jetty/9.4.2.v20170220, Build time: 2018-03-20 13:36
Thomas Andraschko
Oleg Varaksin
Nilesh Namdeo Mali
Mauricio Fenoglio
Pavol Slaný
Sudheer Jonna