PrimeFaces Extensions Showcase

OrgChart - Variable Width Nodes

Nodes can have different widths to accommodate varying content lengths. Use the className property and custom CSS to define node widths based on content requirements.

How it works

Nodes can have different widths to accommodate varying content lengths. Use the className property on each node and define custom CSS rules to set different widths for the title and content sections.

wide-node - 240px width for longer content
standard-node - 160px width for medium content
narrow-node - 100px width for short content

Note: The default node width is 130px. You can customize this by targeting .orgchart .your-class-name .title and .orgchart .your-class-name .content in your CSS.

Source

XHTML page
Managed bean


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

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


@Named("variableWidthOrgchartController")
@ViewScoped
public class VariableWidthOrgchartController implements Serializable {

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

}

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.