PrimeFaces Extensions Showcase

OrgChart - Filter Node Example

Demonstrates client-side node filtering based on the official OrgChart filter-node behavior via a clean OrgChart widget API.

Programmatic API demo: quick actions can trigger common searches from business workflows.

Source

XHTML page
Managed bean


<h:form id="filterForm">
        <h:panelGroup layout="block" style="margin:0 0 0.75rem 0;">
            <h:outputText value="Programmatic API demo: quick actions can trigger common searches from business workflows." />
        </h:panelGroup>

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


@Named
@ViewScoped
public class FilterOrgchartController implements Serializable {

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

}

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

Name

Description

binding

An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.

chartClass

CSS class to apply to the chart container.

converter

EL expression resolves to a converter instance or literal converter ID defining a component converter.

depth

The depth of the chart to initially display.Default is 999.

direction

The direction of the chart. 't2b' (top to bottom), 'b2t' (bottom to top), 'l2r' (left to right), 'r2l' (right to left).Default is t2b.

draggable

Enable dragging nodes on the chart.Default is false.

exportButton

Enable export button on the chart.Default is false.

exportFileextension

The file extension for the exported chart.Default is png.

exportFilename

The filename for the exported chart.Default is OrgChart.

extender

Name of javascript function to extend the widget.

filterable

Render built-in filter controls for client-side node filtering.Default is false.

Unique identifier of the component in a namingContainer.Default is generated.

nodeContent

The node content property name.Default is title.

nodeId

The node id property name.Default is id.

nodeTitle

The node title property name.Default is name.

pan

Enable panning on the chart.Default is false.

parentNodeSymbol

The symbol to indicate a node has children.Default is fa-users.

rendered

Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.

style

Inline style of the component.

styleClass

Style class of the component.

toggleSiblingsResp

Toggle sibling nodes responsively.Default is false.

value

Value of the component.

verticalDepth

The depth at which the chart switches to vertical layout.

widgetVar

Name of the client side widget.

zoom

Enable zooming on the chart.Default is false.

zoominLimit

The maximum zoom-in limit.Default is 7.

zoomoutLimit

The maximum zoom-out limit.Default is 0.5.