Primefaces Dashboard Component Example Tutorial

Filed Under: PrimeFaces

We’ve mentioned earlier, Primefaces is one of leading libraries that provide you set of amazing UI control that makes you avoid the need of developing any components that you might need.

This tutorial intended to cover the Dashboard component, some of the basic details about creating maven Primefaces projects are already provided in Primefaces AccordionPanel tutorial.

Primefaces Dashboard provides you portal like layout with drag&drop based reorder capabilities. Let’s take a look at the basic information and attributes that would help you understand the Dashboard component.

Primefaces Dashboard

Type Dashboard Class
Component Class org.primefaces.component.dashboard.Dashboard
Component Family Package org.primefaces.component
Component Model org.primefaces.model.DashboardModel
Component Column org.primefaces.model.DashboardColumn
Component Rendered org.primefaces.component.dashboard.DashboardRendered
Component Reorder Event org.primefaces.event.DashboardReorderEvent

Primefaces Dashboard Attributes

Name Type Default Description
id String null Unique identifier of the component
rendered Boolean true Boolean value to specify the rendering of component.
If false, component will not be rendered
binding Object null EL expression that maps to a server side
UIComponent instance in a backing bean
widgetVar String null Name of the client side widget
model DashboardModel null DashboardModel instance for UI layout
disabled Boolean false To disable the rendering
style String null Inline CSS style of the component
styleClass String null For specifying CSS class for component style

Getting started with Primefaces dashboard

Dashboard is backed by a DashboardModel and consists of panel components. Dashboard model simply defines the number of columns and the widgets to be placed in each column. Let’s find out the most simple example that you might develop using the Dashboard component.

We assumed that you are familiar with the all required steps for making your Maven project ready for starting developing Primefaces component either by creating the project itself or by configuring it with the required dependencies and XML configurations. If you didn’t have these practices till now, it’s recommended for you seeing those while reading the AccordionPanel Example or Primefaces Beginners Tutorial.

The structure of the project inside Eclipse IDE will be like below after accomplished the creation steps

Primefaces Dashboard - Project Structure

We’ve added two additional files, index.xhtml which represents the JSF/Primefaces view and the DashboardManagedBean which represents the class that will be retaining the needed business.

Developing Simple Primefaces Dashboard Sample

For proper usage of dashboard component, you have to bind the dashboard component that’s defined in the index.xhtml with its model that’s defined within the DashboardManagedBean.


<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<title>Dashboard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:dashboard id="board" model="#{dashboardManagedBean.model}">
				<p:panel id="Finance" header="Finance" closable="true" toggleable="true">
					<h:outputText value="Finance Content"></h:outputText>
				</p:panel>
				<p:panel id="Sports" header="Sports" closable="true" toggleable="true">
					<h:outputText value="Sports Content"></h:outputText>
				</p:panel>
				<p:panel id="News" header="News" closable="true" toggleable="true">
					<h:outputText value="News Content"></h:outputText>
				</p:panel>
			</p:dashboard>
		</h:form>
		</div>
	</h:body>
</html>

package com.journaldev.primefaces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;

@ManagedBean
@SessionScoped
public class DashboardManagedBean {
	private DashboardModel model;

	public DashboardManagedBean(){
		// Initialize the dashboard model
		this.model = new DefaultDashboardModel();
		// Initialize the dashboard column #1
		DashboardColumn column1 = new DefaultDashboardColumn();
		// Initialize the dashboard column #2
		DashboardColumn column2 = new DefaultDashboardColumn();
		// Initialize the dashboard column #3
		DashboardColumn column3 = new DefaultDashboardColumn();

		// Add widget into column1
		column1.addWidget("Sports");
		// Add widget into column2
		column2.addWidget("Finance");
		// Add widget into column3
		column3.addWidget("News");		

		// Add columns into your model
		this.model.addColumn(column1);
		this.model.addColumn(column2);
		this.model.addColumn(column3);

	}

	public DashboardModel getModel() {
		return model;
	}

	public void setModel(DashboardModel model) {
		this.model = model;
	}
}

As you’ve noticed in the previous fragment of code; you’ve normally defined the dashboard into your page associated with its model that in the managed bean. You can add any number of columns you want into your dashboard. The columns you’ve added are able of retaining widgets, those widgets represent a normal <p:panel/> components that you might define them inside the dashboard or outside of it and you can add them into your columns by using column.addWidget() which accept the panel name. Look below at a very simple example might be made for using the dashboard component.

Primefaces Dashboard - Three Columns - Three Widgets

If you’ve looked into deeply, you must find that the dashboard component has defined three columns, each of these defined columns has retained a widget inside. Truly, those defined widgets are just a panels component.

Primefaces Dashboard – Ajax Behavior Events

The dashboard provides the developer one and only one ajax event, this event is fired when dashboard panels are reordered. A defined listener will be invoked by passing an org.primefaces.event.DashboardReorderEvent instance containing information about reorder.

Already, we’ve introduced the ajax event concept and for proper usage, you have to provide your dashboard component with p:ajax. The p:ajax has two major attributes, one for the event type at which the ajax has fired and the second is the listener by which the fired action is handled.


<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<title>Dashboard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:growl id="msgs" showDetail="true" />
			<p:dashboard id="board" model="#{dashboardManagedBean.model}">
				<p:ajax event="reorder" listener="#{dashboardManagedBean.handleReorder}" update="msgs" />
				<p:panel id="Finance" header="Finance" closable="true" toggleable="true">
					<h:outputText value="Finance Content"></h:outputText>
				</p:panel>
				<p:panel id="Sports" header="Sports" closable="true" toggleable="true">
					<h:outputText value="Sports Content"></h:outputText>
				</p:panel>
				<p:panel id="News" header="News" closable="true" toggleable="true">
					<h:outputText value="News Content"></h:outputText>
				</p:panel>
				<p:panel id="Cooking" header="Cooking" closable="true" toggleable="true">
					<h:outputText value="Cooking Content"></h:outputText>
				</p:panel>
				<p:panel id="Technology" header="Technology" closable="true" toggleable="true">
					<h:outputText value="Technology Content"></h:outputText>
				</p:panel>
			</p:dashboard>
		</h:form>
		</div>
	</h:body>
</html>

package com.journaldev.primefaces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;

@ManagedBean
@SessionScoped
public class DashboardManagedBean {
	private DashboardModel model;

	public DashboardManagedBean() {
		// Initialize the dashboard model
		this.model = new DefaultDashboardModel();
		// Initialize the dashboard column #1
		DashboardColumn column1 = new DefaultDashboardColumn();
		// Initialize the dashboard column #2
		DashboardColumn column2 = new DefaultDashboardColumn();
		// Initialize the dashboard column #3
		DashboardColumn column3 = new DefaultDashboardColumn();

		// Add widgets into column1
		column1.addWidget("Sports");
		column1.addWidget("Technology");
		// Add widgets into column2
		column2.addWidget("Finance");
		column2.addWidget("Cooking");
		// Add widget into column3
		column3.addWidget("News");

		// Add columns into your model
		this.model.addColumn(column1);
		this.model.addColumn(column2);
		this.model.addColumn(column3);

	}

	public DashboardModel getModel() {
		return model;
	}

	public void setModel(DashboardModel model) {
		this.model = model;
	}

	public void handleReorder(DashboardReorderEvent event) {
		FacesMessage message = new FacesMessage();
		message.setSeverity(FacesMessage.SEVERITY_INFO);
		message.setSummary("Reordered: " + event.getWidgetId());
		message.setDetail("Item index: " + event.getItemIndex()+ ", Column index: " + event.getColumnIndex()
				+ ", Sender index: " + event.getSenderColumnIndex());

		addMessage(message);
	}

	private void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}

}

Primefaces Dashboard - Before Initiated Reorder Event Primefaces Dashboard - After Initiated Reorder Event

For reordering a certain panel, all that you should have to do is just by drag the panel and drop it into the column you want. An event of reordering has fired and the associated listener will be invoked. The listener finds out the index of the reordered item, retaining column index and the sender column index as a message will be displaying listed all of this information.

Also, and as you’ve noticed above, all of the panels are closable and toggleable. Those attributes are configured using the closable and toggleable attributes for the panel component.

Primefaces Dashboard – Add New Widgets

The ability to add new widgets into your dashboard is also applicable, by adding an external panel into your dashboard. That’s happening through using of <p:draggable/> component which used for determining the component being dragged and the component that used for retaining the dragged component.

Primefaces Dashboard - Before Dragging External Panel Into Dashboard

Primefaces Dashboard - After Dragging External Panel Into Dashboard Now, you may ask about why the panel dragged has still retained externally even it’s dragged into dashboard. The big answer here was with help attribute that you provide at the draggable component which has clone value. Clone value means that the panel which dragged has been cloned for completing the dragging operation. You might ask about the messages that displayed here for notifying you about dragging operation. Messages component will be discussed in a separate tutorial in the future.


<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<title>Dashboard</title>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<h:body>
	<div style="height:500px">
		<h:form>
			<p:growl id="msgs" showDetail="true" />
			<h:panelGrid columns="2">
				<p:dashboard id="board" model="#{dashboardManagedBean.model}">
					<p:ajax event="reorder" listener="#{dashboardManagedBean.handleReorder}" update="msgs" />
					<p:panel id="Finance" header="Finance" closable="true" toggleable="true">
						<h:outputText value="Finance Content"></h:outputText>
					</p:panel>
					<p:panel id="Sports" header="Sports" closable="true" toggleable="true">
						<h:outputText value="Sports Content"></h:outputText>
					</p:panel>
					<p:panel id="News" header="News" closable="true" toggleable="true">
						<h:outputText value="News Content"></h:outputText>
					</p:panel>
					<p:panel id="Cooking" header="Cooking" closable="true" toggleable="true">
						<h:outputText value="Cooking Content"></h:outputText>
					</p:panel>
					<p:panel id="Technology" header="Technology" closable="true" toggleable="true">
						<h:outputText value="Technology Content"></h:outputText>
					</p:panel>
				</p:dashboard>
				<p:panel id="draggable">
					<h:outputLabel value="Drag Panel Into Your Dashboard"></h:outputLabel>
				</p:panel>
				<p:draggable for="draggable" helper="clone" dashboard="board"></p:draggable>
			</h:panelGrid>

		</h:form>
		</div>
	</h:body>
</html>

package com.journaldev.primefaces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;

@ManagedBean
@SessionScoped
public class DashboardManagedBean {
	private DashboardModel model;

	public DashboardManagedBean() {
		// Initialize the dashboard model
		this.model = new DefaultDashboardModel();
		// Initialize the dashboard column #1
		DashboardColumn column1 = new DefaultDashboardColumn();
		// Initialize the dashboard column #2
		DashboardColumn column2 = new DefaultDashboardColumn();
		// Initialize the dashboard column #3
		DashboardColumn column3 = new DefaultDashboardColumn();

		// Add widgets into column1
		column1.addWidget("Sports");
		column1.addWidget("Technology");
		// Add widgets into column2
		column2.addWidget("Finance");
		column2.addWidget("Cooking");
		// Add widget into column3
		column3.addWidget("News");

		// Add columns into your model
		this.model.addColumn(column1);
		this.model.addColumn(column2);
		this.model.addColumn(column3);

	}

	public DashboardModel getModel() {
		return model;
	}

	public void setModel(DashboardModel model) {
		this.model = model;
	}

	public void handleReorder(DashboardReorderEvent event) {
		FacesMessage message = new FacesMessage();
		message.setSeverity(FacesMessage.SEVERITY_INFO);
		message.setSummary("Reordered: " + event.getWidgetId());
		message.setDetail("Item index: " + event.getItemIndex()+ ", Column index: " + event.getColumnIndex()
				+ ", Sender index: " + event.getSenderColumnIndex());

		addMessage(message);
	}

	private void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}

In case you’ve closed the widgets (panels) and you want them again reloaded into your page, you can reload them by doing a page refresh or by dragging them again into your dashboard from an external panel if you have it.

Primefaces Dashboard Summary

This tutorial intended for providing you a full-fledged explanation for how could use Dashboard component and what are the features that dashboard component able to provide. You can download the sample project from the below link and try using other attributes to learn more.

Comments

  1. Song Jing Lim says:

    Hi

    I tried this example and it work on tomcat 7 but not on Google App Engine. It just display empty blank screen.

    1. Song Jing Lim says:

      Problem solved which is cause by GAE SDK 1.9.50. I need to use JSF imple 2.2..5 instead of 2.2.13

  2. Francesco Bertolino says:

    I meant “inside the h:head tag”, sorry :))

  3. Francesco Bertolino says:

    Thank you Mohammad for the useful article.
    In case anybody wonders why a column disappears when you take the last widget out of it, the reason is CSS related.
    Just put:

    .ui-dashboard-column {width:200px;}

    inside the tag to make it work.

  4. QuanBM says:

    Could you tell me how to get id of new widget that have added to dashboard.

    I find a lot of ways but when i call method event.getWidgetId() ( in handleReorder method ), the WidgetId only got value if the widget is dashboard’s widgets.

    The new widget got blank Id.

    Thanks alot,

  5. Patrick says:

    Hi
    Thanks for this tutorial.
    But i’ve been looking for a solution for widgets that spread out to multiple rows and colums.
    I want to build a customizable dashboard where the user can change size and position of the widgets.
    What could be the best solution for this?
    Thanks in advance

  6. Abdul Mannan says:

    Hi I am having a dashboard with 6 charts i want to export those dashboard with charts, the charts are generated from database data how can a user download that dashboard with all charts.

    Thanks

    1. Mohammad says:

      Hi Abdul Mannan,

      I don’t know if there’s something standard that can be used helping you exporting these information just like you want. But you may use an alternative Tools that can help here. I suggest you use Birt Report system or iReport for that. Hopefully this can help you, waiting to hear from your side.

  7. Minh says:

    – I downloaded your code
    – import to eclipse and run
    but the result is the content in dashboard is nothing to show. On the browser, only one panel “Drag Panel into Your Dashboard” appear.

    Could u help me to explain what happen ?

    1. Mohammad says:

      Hi Minh,

      I have also downloaded the project here and imported it into my Eclipse and ran it using Apache 7.0 and i find a proper status. I can see all dashboards including Drag Panel Into Your Dashboard.

      What i did is as follows:

      – Download the project
      – Import it as a maven project
      – Make sure that the compiler version is compatible with the server that you’re going to use
      – Right click on index.xhtml
      – Run using Apache 7

      Regards,

  8. anoop gupta says:

    nice

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages