PrimeFaces Extensions Showcase

MasterDetail

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.

Use Cases

Documentation

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.
showBreadcrumbFirstLevel	If true show the breadcrumb at level 1, if false hide it at level 1. Default is true.
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.

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	Level of this detail. Level is unique inside masterDetail component. This is a required attribute. Default is none.
contextVar	Variable to access the value set by pe:selectDetailLevel when the level is changed. If the value was not set by currently invoking pe:selectDetailLevel, the last set value is be used. Default is null.
levelLabel	Label for the corresponding breadcrumb item shown on top. Default is none.
levelDisabled	Flag indicating whether the breadcrumb item is disabled (not clickable). Default is dalse.

Attributes (move mouse over the names to see data types)

Name	Description
contextValue	Context value passing to the level to be navigated. Value defined here is accessible by contextVar in MasterDetailLevel. Default is none.
listener	Listener method which is fired before action / actionListener of component, pe:selectDetailLevel is attached to, gets called. Return value of this listener is used as a new / modified contextValue. The listener allows to pass a new / modified contextValue between levels. Default is none.
level	Level to go to. Default is none.
step	Specifies how many steps to go. Can be negative. If level and step are not specified, then step = 1 is assumed. Default is none.
preserveInputs	Specifies comma or blank separated list of clientIds of editable components whose inputs have to be preserved while levels get switched. @all is allowed and means all values within master detail have to be preserved. It makes sense e.g. if corresponding command component has "immediate"=true attribute. If nothing specified, input values gets cleared.
resetInputs	Specifies comma or blank separated list of clientIds of editable components whose inputs have to be cleared while levels get switched. @all is allowed and means all values within master detail have to be cleared. It takes precedence over clientIds in preserveInputs.
event	Name(s) of one or several accepted events of f:ajax / p:ajax in case when SelectDetailLevel is attached to any component with ajax behavior. Several events should be defined as space or comma separated list. If no events are specified, all events will be accepted.