PowerPoint

PowerPoint Export

You can add PowerPoint export as a menu item:

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

And/or as a nodeMenu item:

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

Here is the result:

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 options can work together.

exportToPowerPoint method

The default export format is Screen, which is the client screen size. Here is how to export in 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
  },
}

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

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 following 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>'
    },
  ],
});

Export a chart by teams

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

Edit in BALKAN Code

Export 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>' }
  ]
});

Edit in BALKAN Code

Exporting styles

Using the onExportStart and onExportEnd event listeners, you can change export behavior. You can export styles using the args.styles property.

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:

Edit in BALKAN Code

In PowerPoint you can ungroup the chart and make changes.

Limitations

• Cannot export images and foreignobjects.
• Header and footer should be SVG objects.

PowerPoint Preview

You can add PowerPoint Preview as a menu item:

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

And/or as a nodeMenu option:

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

Click on the menu option to open the preview:

Edit in BALKAN Code

Add header and footer to preview

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: {
  pp_preview: {
    text: "Export PowerPoint",
    icon: OrgChart.icon.powerpoint(24, 24, "#7A7A7A"),
    onClick: ppExportPreview
  }
}

Edit in BALKAN Code

Add slides programmatically

You can add custom pages in preview using the pages property.

Here is how to export a chart by teams:

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

Edit in BALKAN Code

Custom content slides

You can add a slide with custom content:

function ppExportPreview() {
  chart.powerPointPreviewUI.show({
    pages: [
      {
        content: '<svg>[Your SVG definition here]</svg>'
        // or
        // content: '[Your HTML definition here]'
      },
      {
        nodeId: 2
      }
    ]
  });
}

Here is how to add a slide with a logo:

Edit in BALKAN Code

Preview Buttons Configuration

You can hide or show the following buttons:

chart.powerPointPreviewUI.buttons.addNewPage = true;
chart.powerPointPreviewUI.buttons.childLevels = true;
chart.powerPointPreviewUI.buttons.parentLevels = true;
chart.powerPointPreviewUI.buttons.removePage = true;

Here is an example:

Edit in BALKAN Code

Localization

Here is what you can localize in 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:

Edit in BALKAN Code

Server JS

There may be cases where you do not want to use the BALKAN server for export. For example, if you run a secure website or do not want your data to be passed to https://balkan.app.

In that case you need to set up your own Server JS.