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

}