Getting started
Configuration wizard
HTML templates
JavaScript framework
Additional resources
General
Printing & Reports
Microsoft Teams
Display different types of employees
Filter and order boxes
Customize boxes and styles
Show specific user on load
Manage web part size and scale
Other examples
Note
For the versions earlier than 4.x.x (including on-premises ones), please follow this instruction.
In this tip I will describe how to automatically resize boxes to fit visible area of the web part. If you have many employees in your org chart it could look like this:
As you can see some of the boxes are outside of visible area. I will show how to automatically scale boxes to fit the web part:
Just edit the page and open the configuration wizard by clicking the Configure button at the top right corner of the web part. Switch to Custom JavaScript step and put the code below into the code editor. Then finish the wizard. This script calculates visible area, and resizes org chart until it fits the width of visible area.
api.onInitialLoadingFinished(() => {
api.showLoadingPanel();
const $pochContent = $(".poch-content");
const $rootNodeList = $(".poch-node-list_root");
const rootNodeList = $rootNodeList[0];
let currentZoom = api.currentZoom;
const adjustWidth = () => {
const realRootNodeListWidth = rootNodeList.scrollWidth * currentZoom;
const contentWidth = $pochContent.width();
if (realRootNodeListWidth > contentWidth) {
currentZoom = currentZoom - 0.1;
if (currentZoom > 0) {
api.zoom(currentZoom);
adjustWidth();
}
} else {
api.dataProvider.getRootItemId((rootId) => {
api.scrollToBox(rootId);
api.hideLoadingPanel();
});
}
}
setTimeout(adjustWidth, 50);
});