How to Create Multiline Group Titles with Min/Max Functionality in OrgChart JS

Code example

If you're new to OrgChart JS and want to create multiline group titles with minimize and maximize functionality, this guide is for you! Follow these steps to get started:

Step 1: Define Custom Templates

First, you need to define custom templates for the group nodes. These templates will specify how the titles should be displayed when the nodes are minimized and maximized.

OrgChart.templates.group.min = Object.assign({}, OrgChart.templates.group);
OrgChart.templates.group.min.textFieldWhenTheNodeIsMimized = '<text data-width="200" data-text-overflow="multiline" style="font-size: 18px;" fill="#F57C00" x="{cw}" y="60" text-anchor="middle">{val}</text>';

OrgChart.templates.group.textFieldWhenTheNodeIsMaximized = '<text data-width="200" data-text-overflow="multiline" style="font-size: 18px;" fill="#F57C00" x="125" y="35" text-anchor="middle">{val}</text>';

OrgChart.templates.group.padding = [100, 10, 10, 10];

Step 2: Initialize the Chart

Next, initialize the OrgChart with the necessary configurations.

let chart = new OrgChart(document.getElementById("tree"), {
    enableSearch: false,
    nodeMouseClick: OrgChart.action.none,
    nodeMenu: {
        details: { text: "Details" }
    },
    nodeBinding: {
        textFieldWhenTheNodeIsMimized: "textWhenTheNodeIsMimized",
        textFieldWhenTheNodeIsMaximized: "textWhenTheNodeIsMaximized"
    },
    tags: {
        "node-with-subtrees": {
            template: "group"
        }
    }
});

Step 3: Add Minimize and Maximize Menu Options

To add minimize and maximize functionality, customize the node menu UI. This will allow users to toggle between minimized and maximized states.

chart.nodeMenuUI.on('show', function (sender, args) {
    let node = chart.getNode(args.firstNodeId);
    if (node.min && node.templateName == "group") {
        args.menu = {
            myMenuItemMax: { text: "Maximize", icon: OrgChart.icon.add(16, 16, "#ccc"), onClick: function (id) { chart.maximize(id) } },
            myMenuItemDummy: {
                text: "Dummy menu option", icon: OrgChart.icon.details(16, 16, "#ccc"), onClick: function (id) { alert("you can add option to expand the nodes in a sub tree, print, remove, edit etc") }
            }
        }
    } else if (!node.min && node.templateName == "group") {
        args.menu = {
            myMenuItemMin: { text: "Minimize", icon: OrgChart.icon.add(16, 16, "#ccc"), onClick: function (id) { chart.minimize(id) } },
            myMenuItemDummy: {
                text: "Dummy menu option", icon: OrgChart.icon.details(16, 16, "#ccc"), onClick: function (id) { alert("you can add option to expand the nodes in a sub tree, print, remove, edit etc") }
            }
        }
    }
});

Step 4: Load the Data

Finally, load the data into the chart. Define the nodes and specify the titles for minimized and maximized states.

chart.load([
    { id: 0 },
    {
        id: 1,
        pid: 0,
        tags: ["node-with-subtrees"],
        textWhenTheNodeIsMimized: "Minimized group 1 title",
        textWhenTheNodeIsMaximized: "This group 1 title is shown when the group is maximized"
    },
    { id: 2, stpid: 1 },
    { id: 3, pid: 2 },
    {
        id: 11,
        pid: 0,
        tags: ["node-with-subtrees"],
        textWhenTheNodeIsMimized: "Minimized group 1 title",
        textWhenTheNodeIsMaximized: "This group 2 title is shown when the group is maximized"
    },
    { id: 12, stpid: 11 },
    { id: 13, pid: 12 }
]);

Multiline Group Text - OrgChart JS

Conclusion

By following these steps, you can create multiline group titles with minimize and maximize functionality in OrgChart JS. This feature enhances the user experience by allowing them to toggle between different views of the group nodes. Happy coding! 😊