How to export Slinks along with nodes in JSON with OrgChart JS

Full Code Example

Why Export Slinks?

Slinks are an invaluable feature in organizational charts, as they represent relationships that don't fit into the standard parent-child hierarchy. They can be used to show:

• Cross-departmental collaboration 🤝

• Reporting structures to multiple managers

• Task dependencies or special project assignments

Exporting this data ensures that these crucial relationships aren't lost when you save or share your chart. A simple JSON export of the nodes alone won't contain this information, which is stored separately in the chart's configuration.

The Solution: The onExportEnd Event

The key to exporting slinks is to use the onExportEnd event provided by OrgChart.js. This event fires after a successful export, allowing you to run custom code. We can use this event to check if the export type is JSON, and if so, initiate a second download for the slinks data.

Step 1: Configure a Custom Menu Item

First, let's create a custom menu option for our export. This makes it clear to the user that this specific export will include the slinks. We can name it "Export JSON with Slinks" in the menu configuration.

JavaScript

menu: {
    json_export: { text: "Export JSON with Slinks" }
}

This will automatically trigger the default json_export function when clicked.

Step 2: Listen for the Export Event

Next, we add a listener for the onExportEnd event. This function receives an args object, which contains information about the completed export, including the file extension.

JavaScript

chart.onExportEnd((args) => {
    // Check if the exported file type is JSON
    if (args.ext == 'json') {
        // If it is, call a function to save the slinks
        saveJSON(chart.config.slinks);
    }
});

When a user clicks our custom menu item, the chart will perform a standard JSON export first. Then, the onExportEnd event will fire, and our code will check if the exported file type is json. If it is, we proceed to the next step.

Step 3: Extract and Save the Slinks

The slinks data is stored within the chart's configuration object at chart.config.slinks. We can access this array and convert it to a JSON string. We will then use a helper function to download this new JSON file.

JavaScript

function saveJSON(slinks) {
    let json = JSON.stringify(slinks);
    downloadFile("text/json", json, "slinks.json");
}

The downloadFile function is a simple utility that creates a downloadable file from a string of content. The slinks.json file will contain a clean array of objects, each representing a single slink with its from, to, and any additional properties like label or template.

By following these steps, you'll ensure that when you export your chart data, all the vital relationships are preserved and stored in a separate, easily accessible JSON file. This dual-file approach gives you a complete record of your organizational structure, including both the hierarchy and the additional links that provide deeper context.

Export JSON with Slinks - OrgChart JS