PrimeFaces Steps

This components is an indicator for the steps in a workflow. It indicates that at what step we are right now. It is used to show current step in multi-steps application.

The <p:steps> component is used to create steps indicator in the JSF application. It has various important attributes that are tabled below.

Steps Attributes

Attribute	Default value	Type	Description
id	null	String	It is a unique identifier of the component.
rendered	true	Boolean	It takes boolean value to specify the rendering of the component.
model	null	MenuModel	It is used to build menu dynamically.
style	null	String	It is used to set inline style of the component.
activeIndex	0	Integer	It is an index of the active tab.
widgetVar	null	String	It is used to set name of the client side widget.
readonly	true	Boolean	It is used to make component readonly.

Skinning

Following is the table of structural style classes.

Style Class	Applies
.ui-steps	It applies on main container element.
.ui-steps-item	It applies on step element.
.ui-steps-name	It applies on name of the step.
.ui-steps-item	This class is used for number of the step.

Example

Here, in the following example, we are implementing <p:steps> component. This example contains the following files.

JSF File

// steps.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Steps</title>
</h:head>
<h:body>
<h3 style="margin-top:0">PrimeFaces Steps</h3>
<p:steps activeIndex="3">
<p:menuitem value="Personal Details" />
<p:menuitem value="Qualification" />
<p:menuitem value="Home Address" />
<p:menuitem value="Confirmation" />
</p:steps>
</h:body>
</html>

Output: