How to Add Field Data in Expand/Collapse Button with OrgChart JS

OrgChart JS provides a highly customizable way to display organizational charts. One of the useful features is the ability to show additional field data inside the expand/collapse button, which helps users understand more about collapsed nodes at a glance. In this tutorial, we will modify the expand/collapse button to display custom data.

Code example

Step 1: Modify the Expand Button

To customize the expand button, we will override the OrgChart.ui.expandCollapseBtn function. This function is responsible for rendering the button, and we can modify it to include additional field data.

Customizing the Button to Show Additional Field Data

Below is the modified expandCollapseBtn function that includes an additional field (e.g., count) inside the expand/collapse button:

OrgChart.ui.expandCollapseBtn = 
	function (chart, node, layoutConfigs, action, scale) {
	    if (action === OrgChart.action.exporting 
		    || node.childrenIds.length == 0 
			|| node.templateName == "split") {
		        return "";
	    }

	    let configName = node.lcn ? node.lcn : "base";
	    let layoutConfig = layoutConfigs[configName];
	    let html = "";
	    let x = 0, y = 0;
	    let t = OrgChart.t(node.templateName, node.min, scale);

	    switch (layoutConfig.orientation) {
	        case OrgChart.orientation.top:
	        case OrgChart.orientation.top_left:
	            x = node.x + (node.w / 2);
	            y = node.y + node.h;
	            break;
	        case OrgChart.orientation.bottom:
	        case OrgChart.orientation.bottom_left:
	            x = node.x + (node.w / 2);
	            y = node.y;
	            break;
	        case OrgChart.orientation.right:
	        case OrgChart.orientation.right_top:
	            x = node.x;
	            y = node.y + (node.h / 2);
	            break;
	        case OrgChart.orientation.left:
	        case OrgChart.orientation.left_top:
	            x = node.x + node.w;
	            y = node.y + (node.h / 2);
	            break;
	    }

	    let collapsedChildrenIds = chart.getCollapsedIds(node);
	    if (collapsedChildrenIds.length) {
	        let btnWidth = 24;
	        let data = chart.get(node.id);
	        let count = data.count ? data.count.toString() : "0";

	        if (count.length == 2) btnWidth = 30;
	        else if (count.length == 3) btnWidth = 40;
	        else if (count.length == 4) btnWidth = 50;

	        html += 
		        OrgChart.expcollOpenTag.
			        replace("{id}", node.id).
			        replace("{x}", x - btnWidth / 2).
			        replace("{y}", y - 12);
	        html += 
		        `<rect 
			        e-c="${node.id}" rx="12" ry="12" x="0" y="0" 
			        width="${btnWidth}" height="24" fill="#f57c00">
				 </rect>`;
	        html += 
		        `<text style="font-size: 14px; cursor: pointer;"
			        fill="#ffffff" x="${btnWidth / 2}" y="17" 
			        text-anchor="middle">
			        ${count}
			     </text>`;
	        html += OrgChart.grCloseTag;
	    } 
	    else {
	        x = x - t.expandCollapseSize / 2;
	        y = y - t.expandCollapseSize / 2;
	        html += 
		        OrgChart.expcollOpenTag.
			        replace("{id}", node.id).
			        replace("{x}", x).
			        replace("{y}", y);
	        html += t.minus;
	        html += OrgChart.grCloseTag;
	    }
	    return html;
};

Step 2: Define the Chart and Load Data

Next, we define the OrgChart and specify the data fields:

let chart = new OrgChart(document.getElementById("tree"), {
    collapse: { level: 2 },
    nodeBinding: {
        field_0: "id",
        field_1: "title",
        img_0: "img"
    },
});

let nodes = [
    { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg", count: 121 },
    { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg", count: 1212 },
    { id: 4, pid: 1, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg", count: 3 },
    { id: 6, pid: 1, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg", count: 12 },
    { id: 7, pid: 2, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg", count: 12 },
    { id: 10, pid: 6, name: "Elliot Scott", title: "Developer", img: "https://cdn.balkan.app/shared/10.jpg", count: 12 },
    { id: 14, pid: 12, name: "Mike John", title: "Developer", department: "Sub Development", img: "https://cdn.balkan.app/shared/11.jpg", count: 12 },
    { id: 15, pid: 12, name: "John Scott", title: "Developer", department: "Sub Development", img: "https://cdn.balkan.app/shared/12.jpg", count: 12 },
    { id: 16, pid: 12, name: "Elliot Smith", title: "Developer", department: "Sub Development", img: "https://cdn.balkan.app/shared/13.jpg", count: 12 },
];

chart.load(nodes);

expand button - Add data value(number) in plus - OrgChart JS

Conclusion

By customizing the expandCollapseBtn function, we successfully added field data (such as count) to the expand/collapse button in OrgChart JS. This enhancement provides users with immediate insight into the number of collapsed child nodes, improving the usability of the chart.

Try implementing this in your own OrgChart JS projects and customize it further based on your needs!