Show / Hide Table of Contents

PowerPoint Export

In PowerPoint you can ungroup the chart and make changes.

Limitations:
  • Cannot export images and foreignobjects.
  • The header and footer sould be SVG objects.

PowerPoint Preview

You can add the PowerPoint Preview as a menu item: 

     
menu: {
    pppreview: { text: "Create a PowerPoint Presentation" }
}

and/or as a nodeMenu option: 

     
nodeMenu: {
    pppreview: {text: "Create a PowerPoint Presentation from here"}
}

Click on the Menu option to open the Preview:

BALKAN Code Edit in BALKAN Code

Add header and footer

The header and footer are SVG definitions.

Define the function: 
     
function ppExportPreview(){
    chart.powerPointPreviewUI.show({
        header: '<text>My Header</text>',
        footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    });
}
Use it in a menu option: 
     
menu: {
    ppPreview: {
        text: "Export PowerPoint", 
        icon: OrgChart.icon.powerpoint(24, 24, "#7A7A7A"), 
        onClick: ppExportPreview

}
BALKAN Code Edit in BALKAN Code

Add slides programmatically

You can add custom pages in preview, using the pages property:

Here is how we export a chart by teams:

     
function ppExportPreview(){
    chart.powerPointPreviewUI.show({
                pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
    })
};
BALKAN Code Edit in BALKAN Code

Profile Export

With the isProfile property you can export a node profile: 
     
function ppExportPreview(){
    chart.powerPointPreviewUI.show({
        pages: [
            {
                nodeId: 1,
                isProfile: true
            }
        ]
    })
}
BALKAN Code Edit in BALKAN Code


You can add a slide with a custom content: 

         
function ppExportPreview() {
    chart.powerPointPreviewUI.show({
        pages: [
            {
                content: <svg>[Your SVG definition here]</svg>
            },
            {
                nodeId: 2
            }
        ]
    })
}
Here is how we can add a page with a logo:
BALKAN Code Edit in BALKAN Code

Localization

Here is what you can localize in the PowerPoint Preview: 
         
chart.powerPointPreviewUI.locExport = 'Export';
chart.powerPointPreviewUI.locCancel = 'Close';
chart.powerPointPreviewUI.locParentLevels = 'parent levels';
chart.powerPointPreviewUI.locChildLevels = 'child levels';
chart.powerPointPreviewUI.locClickToAdd = 'Click on a node to display it here';
chart.powerPointPreviewUI.locPrintTree = 'Print tree';
chart.powerPointPreviewUI.locPrintProfile = 'Print profile';
chart.powerPointPreviewUI.locAddNew = 'Add new slide';
chart.powerPointPreviewUI.locRemove = 'Remove slide';
Here is an example:
BALKAN Code Edit in BALKAN Code

Direct PowerPoint Export

You can add the PowerPoint Export as a menu item: 

     
menu: {
    powerpoint: { text: "Export PowerPoint" }
}

and/or as a nodeMenu item: 

     
nodeMenu: {
    powerpoint: { text: "Export node and its children to PowerPoint" }
}

Here is the result:

BALKAN Code Edit in BALKAN Code

Export options

     
chart.exportToPowerPoint({
    childLevels: 1,
    expandChildren: true,
    format: "Standard", // "Screen" (default) | "Widescreen" | "Standard"
    header: "<text>My Header</text>",
    footer: "<text>My Footer. Page {current-page} of {total-pages}</text>",
    filename: "myChart.pptx",
    min: false,
    openInNewTab: true,
    nodeId: id,
    margin: [10, 10, 10, 10],
    padding: 50
});

Not all the options can work together.

exportToPowerPoint method

The deafault export format is Screen, which is the client screen size.
Here is how we will export to Widescreen format using exportToPowerPoint

First define the function: 
     
function powerpoint() {
    chart.exportToPowerPoint({
        format: "Widescreen"
    });
}
Then use it in a menu option: 
     
menu: {
    export_pp: {
        text: "Export PowerPoint - Widescreen",
        icon: OrgChart.icon.powerpoint(24, 24, "#7A7A7A"),
        onClick: powerpoint
    },
}
BALKAN Code Edit in BALKAN Code

Add header and footer

The header and footer are SVG definitions.

Define the function: 
     
function powerpoint(nodeId) {
    chart.exportToPowerPoint({
        header: '<text>My Header</text>',
        footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    });
}
Use it in a menu option: 
     
menu: {
    export_powerpoint: {
        text: "Export to PowerPoint with my header and footer",
        icon: OrgChart.icon.powerpoint(24, 24, "#7A7A7A"),
        onClick: powerpoint
    },
}
BALKAN Code Edit in BALKAN Code

Export by slides

You can export multiple charts or a chart by teams, using the pages property:

You can use the below options: 
     
chart.exportToPowerPoint({
        pages: {
            content: '<svg><text>My Header</text></svg>',
            chartInstance: chart,
            nodeId: 2,
            expandChildren: true,
            childLevels: 2,
            parentLevels: 1,
            min: false,
            header: '<text>My Header</text>',
            footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
        },
});

Here is how we export a chart by teams:

     
chart.exportToPowerPoint({
        expandChildren: false,
        pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
});
BALKAN Code Edit in BALKAN Code

How you can exrport multiple charts in one PowerPoint file:

     
chart1.exportToPowerPoint({
    pages: [
        { chartInstance: chart1, header: '<text>OrgChart 1</text>' },
        { chartInstance: chart2, header: '<text>OrgChart 2</text>' },
        { chartInstance: chart3, header: '<text>OrgChart 3</text>' },
        { chartInstance: chart4, header: '<text>OrgChart 4</text>' }
    ]
});
BALKAN Code Edit in BALKAN Code

Exporting Styles

Using the onExportStart and onExportEnd event listeners, you can change the export behaviour.

You can export the styles using the property args.styles

HTML:

     
<style id="myStyles">
    .node.HR rect {
        fill: #E99113;
    }
</style>

JavaScript:

     
// add before chart.load()
chart.onExportStart((args) => {
    args.styles += document.getElementById('myStyles').outerHTML;
});
Code example:
BALKAN Code Edit in BALKAN Code

Server JS
There may be cases where you don't want to use BALKAN OrgChart JS's export server, for instance if you are running a secure website or if you don't want your data to be passed to https://balkan.app In that case you have to setup your own server.
In this article