OrgChart is a simple and direct organization chart component. Anytime you want a tree-like chart, you can turn to OrgChart. Based on orgchart by Xuebin Dong (dabeng).
A tree-like chart with dragging, panning, zooming and export to PDF.
Use CSS classes to color-code nodes by department, role or any other criteria. Set the className property on each node to apply custom styling.
Nodes can have different widths to accommodate varying content lengths. Use the className property and custom CSS on .orgchart .your-class .title and .content to set the widths (default 130px): wide-node 240px, standard-node 160px, narrow-node 100px.
Client-side node filtering through the widget API: the quick action buttons call filterNodes and clearFilter, the filter input of the chart works as well.
Nodes marked compact=true render their children in a grid inside the parent node, which helps when many children exist. Bo Miao is compact and includes a nested compact node (Si Xuan); use the green corner controls to switch between compact and loose layouts.
OrgChart uses Font Awesome for its icons (for example parentNodeSymbol="fa-folder-open").
As Font Awesome is no longer included in PrimeFaces,
include Font Awesome
in the pages that use OrgChart. The showcase already does.
<style>
.orgchart .gold-level .title { background-color: #DAA520; }
.orgchart .gold-level .content { border-color: #DAA520; }
.orgchart .green-level .title { background-color: #228B22; }
.orgchart .green-level .content { border-color: #228B22; }
.orgchart .blue-level .title { background-color: #4169E1; }
.orgchart .blue-level .content { border-color: #4169E1; }
.orgchart .red-level .title { background-color: #DC143C; }
.orgchart .red-level .content { border-color: #DC143C; }
.orgchart .purple-level .title { background-color: #8B008B; }
.orgchart .purple-level .content { border-color: #8B008B; }
.orgchart .wide-node .title,
.orgchart .wide-node .content {
width: 240px;
}
.orgchart .standard-node .title,
.orgchart .standard-node .content {
width: 160px;
}
.orgchart .narrow-node .title,
.orgchart .narrow-node .content {
width: 100px;
}
.compact-demo .orgchart {
background: unset;
}
</style>
<div class="card">
<h5>Basic Usage</h5>
<p>A tree-like chart with dragging, panning, zooming and export to PDF.</p>
<h:form id="formBasicUsage">
<pe:orgchart id="orgChart"
widgetVar="orgChartBasicWidget"
value="#{orgchartController.orgChartNode}"
draggable="true"
exportButton="true"
pan="true"
parentNodeSymbol="fa-folder-open"
zoom="true"
exportFileextension="pdf"
direction="#{orgchartController.direction}"
toggleSiblingsResp="true"
style="height:350px">
</pe:orgchart>
</h:form>
</div>
<div class="card">
<h5>Color Coded</h5>
<p>Use CSS classes to color-code nodes by department, role or any other criteria. Set the <code>className</code> property on each node to apply custom styling.</p>
<h:form id="formColorCoded">
<pe:orgchart id="orgChart"
widgetVar="colorWidget"
value="#{colorCodedOrgchartController.colorCodedChart}"
nodeId="id"
nodeContent="title"
nodeTitle="name"
style="height:400px">
</pe:orgchart>
<ul>
<li><span style="color:#DAA520">■</span> gold-level - Executive Team</li>
<li><span style="color:#228B22">■</span> green-level - Middle Management</li>
<li><span style="color:#4169E1">■</span> blue-level - Tech Staff</li>
<li><span style="color:#DC143C">■</span> red-level - Sales Staff</li>
<li><span style="color:#8B008B">■</span> purple-level - Support Staff</li>
</ul>
</h:form>
</div>
<div class="card">
<h5>Variable Width Nodes</h5>
<p>Nodes can have different widths to accommodate varying content lengths. Use the <code>className</code> property and custom CSS on <code>.orgchart .your-class .title</code> and <code>.content</code> to set the widths (default 130px): <code>wide-node</code> 240px, <code>standard-node</code> 160px, <code>narrow-node</code> 100px.</p>
<h:form id="formVariableWidth">
<pe:orgchart id="orgChart"
widgetVar="variableWidthWidget"
value="#{variableWidthOrgchartController.orgChartModel}"
nodeId="id"
nodeContent="title"
nodeTitle="name"
style="height:400px">
</pe:orgchart>
</h:form>
</div>
<div class="card">
<h5>Filter Node</h5>
<p>Client-side node filtering through the widget API: the quick action buttons call <code>filterNodes</code> and <code>clearFilter</code>, the filter input of the chart works as well.</p>
<h:form id="formFilterNode">
<h:panelGroup layout="block" style="margin:0 0 0.75rem 0;">
<p:commandButton type="button" value="Quick Filter: VP"
onclick="PF('orgChartFilterWidget').filterNodes('VP', false); return false;" style="margin-right:0.5rem;" />
<p:commandButton type="button" value="Quick Filter: Developer"
onclick="PF('orgChartFilterWidget').filterNodes('Developer', false); return false;" style="margin-right:0.5rem;" />
<p:commandButton type="button" value="Clear Programmatically"
onclick="PF('orgChartFilterWidget').clearFilter(); return false;" />
</h:panelGroup>
<pe:orgchart id="orgChart"
widgetVar="orgChartFilterWidget"
value="#{filterOrgchartController.orgChartNode}"
filterable="true"
draggable="true"
exportButton="true"
pan="true"
zoom="true"
direction="t2b"
style="height:420px">
</pe:orgchart>
</h:form>
</div>
<div class="card">
<h5>Compact Mode</h5>
<p>Nodes marked <code>compact=true</code> render their children in a grid inside the parent node, which helps when many children exist. Bo Miao is compact and includes a nested compact node (Si Xuan); use the green corner controls to switch between compact and loose layouts.</p>
<h:form id="formCompactMode">
<h:panelGroup layout="block" styleClass="compact-demo">
<pe:orgchart id="orgChart"
widgetVar="orgChartCompact"
value="#{compactOrgchartController.orgChartNode}"
nodeContent="title"
parentNodeSymbol="fa-users"
pan="true"
zoom="true"
direction="t2b"
style="height:480px">
</pe:orgchart>
</h:panelGroup>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.orgchart;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
import org.primefaces.extensions.event.OrgChartClickEvent;
import org.primefaces.extensions.event.OrgChartDropEvent;
/**
* OrgchartController
*
* @author @jxmai / last modified by $Author$
* @version $Revision$
*/
@Named
@ViewScoped
public class OrgchartController implements Serializable {
@Serial
private static final long serialVersionUID = 1648477595853984820L;
private OrgChartNode orgChartNode;
private String direction = "t2b";
public OrgchartController() {
super();
init();
}
public void init() {
orgChartNode = new DefaultOrgChartNode("id1", "Node1", "content1");
orgChartNode.addChild(new DefaultOrgChartNode("id2", "Node2", "Content2"));
orgChartNode.addChild(new DefaultOrgChartNode("id3", "Node3", "Content3"));
final OrgChartNode node = new DefaultOrgChartNode("id4", "Node4", "Content4");
orgChartNode.addChild(node);
node.addChild(new DefaultOrgChartNode("id5", "Node5", "Content5"));
node.addChild(new DefaultOrgChartNode("id6", "Node6", "Content6"));
}
public static void onClick(final OrgChartClickEvent event) {
System.out.println("clicked ID: " + event.getId());
System.out.println("hierachy: " + event.getHierarchy().toString());
}
public static void onDropOver(final OrgChartDropEvent event) {
System.out.println("hierachy: " + event.getHierarchy().toString());
System.out.println("dragged node id " + event.getDraggedNodeId());
System.out.println("dropped node id " + event.getDroppedZoneId());
}
public OrgChartNode getOrgChartNode() {
return orgChartNode;
}
public void setOrgChartNode(final OrgChartNode orgChartNode) {
this.orgChartNode = orgChartNode;
}
public String getDirection() {
return direction;
}
public void setDirection(final String direction) {
this.direction = direction;
}
}
package org.primefaces.extensions.showcase.controller.orgchart;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
/**
* ColorCodedOrgchartController
*
* @author @jxmai / last modified by $Author$
* @version $Revision$
*/
@Named("colorCodedOrgchartController")
@ViewScoped
public class ColorCodedOrgchartController implements Serializable {
@Serial
private static final long serialVersionUID = 1648477595853984820L;
public OrgChartNode getColorCodedChart() {
DefaultOrgChartNode root = new DefaultOrgChartNode("1", "Leadership", "Executive Team");
root.setClassName("gold-level");
DefaultOrgChartNode mgmt = new DefaultOrgChartNode("2", "Management", "Middle Management");
mgmt.setClassName("green-level");
DefaultOrgChartNode staff1 = new DefaultOrgChartNode("3", "Engineering", "Tech Staff");
staff1.setClassName("blue-level");
DefaultOrgChartNode staff2 = new DefaultOrgChartNode("4", "Sales", "Sales Staff");
staff2.setClassName("red-level");
DefaultOrgChartNode staff3 = new DefaultOrgChartNode("5", "Support", "Support Staff");
staff3.setClassName("purple-level");
mgmt.addChild(staff1);
mgmt.addChild(staff2);
mgmt.addChild(staff3);
root.addChild(mgmt);
return root;
}
}
package org.primefaces.extensions.showcase.controller.orgchart;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
/**
* VariableWidthOrgchartController
*
* @author @jxmai / last modified by $Author$
* @version $Revision$
*/
@Named("variableWidthOrgchartController")
@ViewScoped
public class VariableWidthOrgchartController implements Serializable {
@Serial
private static final long serialVersionUID = 1648477595853984821L;
public OrgChartNode getOrgChartModel() {
DefaultOrgChartNode root = new DefaultOrgChartNode("1", "Sarah Johnson", "Chief Executive Officer & Board Member");
root.setClassName("wide-node");
DefaultOrgChartNode cto = new DefaultOrgChartNode("2", "Michael Chen", "Chief Technology Officer");
cto.setClassName("standard-node");
DefaultOrgChartNode cfo = new DefaultOrgChartNode("3", "Emily Rodriguez", "Chief Financial Officer & VP of Strategic Planning");
cfo.setClassName("wide-node");
DefaultOrgChartNode cmo = new DefaultOrgChartNode("4", "David Kim", "CMO");
cmo.setClassName("narrow-node");
DefaultOrgChartNode engManager = new DefaultOrgChartNode("5", "Robert Williams", "Engineering Manager");
engManager.setClassName("standard-node");
DefaultOrgChartNode finAnalyst = new DefaultOrgChartNode("6", "Lisa Brown", "Senior Analyst");
finAnalyst.setClassName("narrow-node");
DefaultOrgChartNode accountant = new DefaultOrgChartNode("7", "James Taylor", "Accountant");
accountant.setClassName("narrow-node");
root.addChild(cto);
root.addChild(cfo);
root.addChild(cmo);
cto.addChild(engManager);
cfo.addChild(finAnalyst);
cfo.addChild(accountant);
return root;
}
}
package org.primefaces.extensions.showcase.controller.orgchart;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
@Named
@ViewScoped
public class FilterOrgchartController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
private OrgChartNode orgChartNode;
public FilterOrgchartController() {
init();
}
public void init() {
orgChartNode = new DefaultOrgChartNode("ceo", "CEO", "Alice Johnson");
final OrgChartNode vp1 = new DefaultOrgChartNode("vp1", "VP Sales", "Bob Martin");
final OrgChartNode vp2 = new DefaultOrgChartNode("vp2", "VP Engineering", "Carol White");
orgChartNode.addChild(vp1);
orgChartNode.addChild(vp2);
vp1.addChild(new DefaultOrgChartNode("m1", "Sales Manager", "David Green"));
vp1.addChild(new DefaultOrgChartNode("m2", "Account Manager", "Eve Black"));
final OrgChartNode engLead = new DefaultOrgChartNode("lead1", "Engineering Lead", "Frank Moore");
vp2.addChild(engLead);
engLead.addChild(new DefaultOrgChartNode("dev1", "Developer", "Grace Kim"));
engLead.addChild(new DefaultOrgChartNode("dev2", "Developer", "Henry Lee"));
}
public OrgChartNode getOrgChartNode() {
return orgChartNode;
}
public void setOrgChartNode(final OrgChartNode orgChartNode) {
this.orgChartNode = orgChartNode;
}
}
package org.primefaces.extensions.showcase.controller.orgchart;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
/**
* CompactOrgchartController
*
* @author @jxmai / last modified by $Author$
* @version $Revision$
*/
@Named("compactOrgchartController")
@ViewScoped
public class CompactOrgchartController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
private OrgChartNode orgChartNode;
public CompactOrgchartController() {
init();
}
public void init() {
orgChartNode = new DefaultOrgChartNode("root", "Lao Lao", "General Manager");
final DefaultOrgChartNode boMiao = new DefaultOrgChartNode("n1", "Bo Miao", "Department Manager");
boMiao.setCompact(true);
boMiao.addChild(new DefaultOrgChartNode("n1a", "Fei Xuan", "Engineer"));
boMiao.addChild(new DefaultOrgChartNode("n1b", "Er Xuan", "Engineer"));
boMiao.addChild(new DefaultOrgChartNode("n1c", "San Xuan", "Engineer"));
final DefaultOrgChartNode siXuan = new DefaultOrgChartNode("n1d", "Si Xuan", "Engineer");
siXuan.setCompact(true);
siXuan.addChild(new DefaultOrgChartNode("n1d1", "Feng Shou", "Engineer"));
siXuan.addChild(new DefaultOrgChartNode("n1d2", "Er Shou", "Engineer"));
siXuan.addChild(new DefaultOrgChartNode("n1d3", "San Shou", "Engineer"));
siXuan.addChild(new DefaultOrgChartNode("n1d4", "Si Shou", "Engineer"));
boMiao.addChild(siXuan);
boMiao.addChild(new DefaultOrgChartNode("n1e", "Wu Xuan", "Engineer"));
final DefaultOrgChartNode suMiao = new DefaultOrgChartNode("n2", "Su Miao", "Department Manager");
suMiao.addChild(new DefaultOrgChartNode("n2a", "Tie Hua", "Senior Engineer"));
final DefaultOrgChartNode heiHei = new DefaultOrgChartNode("n2b", "Hei Hei", "Senior Engineer");
heiHei.addChild(new DefaultOrgChartNode("n2b1", "Dan Dan", "Engineer"));
heiHei.addChild(new DefaultOrgChartNode("n2b2", "Er Dan", "Engineer"));
heiHei.addChild(new DefaultOrgChartNode("n2b3", "San Dan", "Engineer"));
suMiao.addChild(heiHei);
suMiao.addChild(new DefaultOrgChartNode("n2c", "Pang Pang", "Senior Engineer"));
final DefaultOrgChartNode hongMiao = new DefaultOrgChartNode("n3", "Hong Miao", "Department Manager");
orgChartNode.addChild(boMiao);
orgChartNode.addChild(suMiao);
orgChartNode.addChild(hongMiao);
}
public OrgChartNode getOrgChartNode() {
return orgChartNode;
}
public void setOrgChartNode(final OrgChartNode orgChartNode) {
this.orgChartNode = orgChartNode;
}
}