How do I increase org height dynamically?

Org Chart Microsoft 365 version
1

I am using the left to right so that I can display the org alongside the site’s contents and I can’t figure out how to change the height dynamically based on the number of people in that org. Can someone assist?

2

Hello @sophia.johnson,

Thank you for your question.

Have you tried the approach described in this article? You can change width to height to fit the content by height:

renderer.onInitialLoadingFinished(function(){ 
 
  renderer.showLoadingPanel();
 
  var $pochContent = renderer.querySelector(".poch-content")
  var $viewPort = renderer.querySelector(".poch-control").children().first();
  var viewPort = $viewPort[0];
  var topOffset = 20;
  var currentZoom = 1;
 
  function adjustHeight(){
 
    var realViewPortHeight = viewPort.scrollHeight * currentZoom;
    var contentHeight = $pochContent.height(); 
 
    if(realViewPortHeight > contentHeight){
 
      currentZoom = currentZoom - 0.1;
      if(currentZoom > 0){
        renderer.zoom(currentZoom);
        adjustHeight(); 
      } 
    } else {
      renderer.hideLoadingPanel();
      renderer.dataProvider.getRootItemId(function(rootId){
        renderer.scrollToBox(rootId);
      });
    }
  }
 
  setTimeout(adjustHeight, 50);
 
});

Would this be a suitable option for you?

Best Regards,
Anna Dorokhova
Plumsail Team

3

This code seems to adjust the chart to fit the webpart height, which makes my org tiny in size. I need the webpart’s height to adjust to the org chart’s content.

4

Hi @sophia.johnson,

You can adjust the code a bit to change the webpart height instead of zooming out:

renderer.onInitialLoadingFinished(function(){ 
 
  renderer.showLoadingPanel();
 
  var $pochContent = renderer.querySelector(".poch-content")
  var $pochWebpart = $(".poch-web-part")
  var $viewPort = renderer.querySelector(".poch-control").children().first();
  var viewPort = $viewPort[0];
  var topOffset = 20;
  var currentZoom = 1;
 
  function adjustHeight(){
 
    var realViewPortHeight = viewPort.scrollHeight * currentZoom;
    var contentHeight = $pochContent.height(); 
 
    if(realViewPortHeight > contentHeight){
      
      $pochWebpart.height(realViewPortHeight);
      $pochContent.height(realViewPortHeight);
      adjustHeight(); 

    } else {
      renderer.hideLoadingPanel();
      renderer.dataProvider.getRootItemId(function(rootId){
        renderer.scrollToBox(rootId);
      });
    }
  }
 
  setTimeout(adjustHeight, 50);
 
});

Best Regards,
Anna Dorokhova
Plumsail Team

1 Like
5

See I tried and couldn’t figure it out. Thanks so much for your help! One thing I did notice was the person at the bottom was cut off so I added + 50 to var realViewPortHeight = viewPort.scrollHeight * currentZoom and it’s perfect now. Thank you again!

1 Like
6

I am glad to help!

Best Regards,
Anna Dorokhova
Plumsail Team

7

Hello,

I pasted the code from this article and the boxes are still cut off on the sides and bottom of the web part. I'm pasting the code at the bottom of Custom JavaScript step. I suspect that I'm missing something but any help would be greatly appreciated.

Lennie

8

Hi @CPrompt,

Please note that this code only affects the width. That is, if the boxes do not fit into the visible area in terms of height, the chart will not be resized.

It would also be helpful if you could provide a screenshot of your 'Custom JavaScript' tab.

9

Hi, is there a V4 update to this script please?

10

Hi @lee,

Here is the code adapted to work with Org Chart v4:

api.onInitialLoadingFinished(() => {
  api.showLoadingPanel();

  const $pochContent = $(".poch-content");
  const $rootNodeList = $(".poch-node-list_root");
  const rootNodeList = $rootNodeList[0];
  let currentZoom = api.currentZoom;

  const adjustHeight = () => {
    const realRootNodeListHeight = rootNodeList.scrollHeight * currentZoom;
    const contentHeight = $pochContent.height();

    if (realRootNodeListHeight > contentHeight) {
      currentZoom = currentZoom - 0.1;

      if (currentZoom > 0) {
        api.zoom(currentZoom);
        adjustHeight();
      }
    } else {
      api.dataProvider.getRootItemId((rootId) => {
        api.scrollToBox(rootId);
        api.hideLoadingPanel();
      });
    }
  }

  setTimeout(adjustHeight, 50);
});
1 Like
11

I simplified things a bit to adjust the webpart height:

api.onInitialLoadingFinished(() => {
  const $pochContent = $(".poch-content");
  const $pochWebpart = $(".poch-web-part");
  const $rootNodeList = $(".poch-node-list_root");
  const adjustOrgChartHeight = () => {
    const realRootNodeListHeight = $rootNodeList[0].scrollHeight * api.currentZoom;
    if (realRootNodeListHeight > $pochWebpart.height()) {
      $pochContent.height(realRootNodeListHeight);
      $pochWebpart.height(realRootNodeListHeight);
    }
    setTimeout(adjustOrgChartHeight, 50);
  }
  adjustOrgChartHeight();
});
2 Likes
12

Hi @Tin.Bui,

Thank you for simplifying it - just applied it and it works perfectly! :smiley_cat:

1 Like