Documentation › SharePoint Server 2019/SE (On-Premises) resources › How to create an org chart with two root managers in SharePoint Server 2019/SE

Create org chart with two root managers (SharePoint Server 2019/SE)

This article describes how to create an org chart with two root managers in Plumsail Org Chart for SharePoint Server 2019/SE.

You may use the following trick if you need to build a chart with two or more root nodes, for example, if you have multiple CEOs at the top of the hierarchy.

Two root nodes

To do that you need to add a fake manager at the top of your chart and then hide it using Custom JavaScript and CSS:

Fake manager on the top

Add the following script to the Custom JavaScipt tab to hide the fake manager:

renderer.onBoxRendered(function(event, box, itemData){
  if (itemData["Title"].contains("David Navarro")) {
    box.$elem.hide();
    $("div.poch-group").addClass("hiddenElements");
    $("div.poch-node").prepend('<div class="maskingBlock"></div>');
  }
});
Hide fake manager

Then, add the following styles to the Custom CSS tab for covering the lines left from the hidden box. The styles differ depending on the layout you use. Also, you may need to change the background color or other properties for adjusting the masking block to a selected skin.

Two root nodes

Top to bottom (any)

.hiddenElements {
  overflow: hidden;
  margin: 0 !important
}

.maskingBlock {
  display: block;
  width: 100%;
  height: 50px;
  background-color: white;
  position: absolute;
  left: 0;
  top: 0
}

Left to right

.hiddenElements {
  overflow: hidden;
  margin: 0 !important
}

.maskingBlock {
  display: block;
  width: 100%;
  height: 70px;
  background-color: white;
  position: absolute;
  left: 0;
  top: 0
}

Bottom to top

.hiddenElements {
  overflow: hidden;
  margin: 0 !important
}

.maskingBlock {
  display: block;
  width: 100%;
  height: 60px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20
}

That is it. Now you have a chart with multiple managers at the top:

Two root nodes

Conclusion

Now you know how to use Plumsail Org Chart to create org chart with two root managers. If you didn’t install it yet, download it and follow the installation instruction for your version of SharePoint in the documentation. It is quite easy to get started.