• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

OrgChart

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).

Orgchart Tag Documentation

OrgChart is a simple and direct organization chart component.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
chartClass String false CSS class to apply to the chart container.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
depth Integer false 999 The depth of the chart to initially display.
direction String false t2b The direction of the chart. 't2b' (top to bottom), 'b2t' (bottom to top), 'l2r' (left to right), 'r2l' (right to left).
draggable Boolean false false Enable dragging nodes on the chart.
exportButton Boolean false false Enable export button on the chart.
exportFileextension String false png The file extension for the exported chart.
exportFilename String false OrgChart The filename for the exported chart.
extender String false Name of javascript function to extend the widget.
filterable Boolean false false Render built-in filter controls for client-side node filtering.
nodeContent String false title The node content property name.
nodeId String false id The node id property name.
nodeTitle String false name The node title property name.
pan Boolean false false Enable panning on the chart.
parentNodeSymbol String false fa-users The symbol to indicate a node has children.
style String false Inline style of the component.
styleClass String false Style class of the component.
toggleSiblingsResp Boolean false false Toggle sibling nodes responsively.
value Object false Value of the component.
verticalDepth Integer false The depth at which the chart switches to vertical layout.
zoom Boolean false false Enable zooming on the chart.
zoominLimit Number false 7 The maximum zoom-in limit.
zoomoutLimit Number false 0.5 The maximum zoom-out limit.
Tag Documentation Widget Source
Basic Usage

A tree-like chart with dragging, panning, zooming and export to PDF.

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.

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

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.

Filter Node

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.

Compact Mode

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.

Icons

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.

Usage


<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">&#9632;</span> gold-level - Executive Team</li>
            <li><span style="color:#228B22">&#9632;</span> green-level - Middle Management</li>
            <li><span style="color:#4169E1">&#9632;</span> blue-level - Tech Staff</li>
            <li><span style="color:#DC143C">&#9632;</span> red-level - Sales Staff</li>
            <li><span style="color:#8B008B">&#9632;</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>