PrimeFaces Extensions Showcase

OrgChart - Color Coded

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.

How it works

Each node has a className property that adds CSS classes to the node. Use these classes to style different types of nodes (e.g., by department, role, or status).

■ gold-level - Executive Team
■ green-level - Middle Management
■ blue-level - Tech Staff
■ red-level - Sales Staff
■ purple-level - Support Staff

Source

XHTML page
Managed bean


<style type="text/css">
            .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; }
        </style>

        <pe:orgchart id="orgChart"
                     widgetVar="colorWidget"
                     value="#{colorCodedOrgchartController.colorCodedChart}"
                     nodeId="id"
                     nodeContent="title"
                     nodeTitle="name"
                     style="height:400px">
        </pe:orgchart>


@Named("colorCodedOrgchartController")
@ViewScoped
public class ColorCodedOrgchartController implements Serializable {

    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;
    }

}