Hide drill down for department or similar condition

Org Chart
1

Hi, we have a requirement where we want to stop our org chart from allowing to drill down any further from certain boxes.

The data will be coming from user profile service so ideally we would like to have a condition that if department equals a certain value then hide both options to drill down to subordinates. Is this possible?

Thanks In advance.

2

Hi @lquigg ,
Yes, you can easily hide the elements in the box conditionally, including the drill "Drill here" button.

Please paste the following code in the Custom Javascript tab:

renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Department"].contains('Marketing')){
    box.$elemContainer.find('.poch-toolbar-button.rocToolbarButton.rocActionDrillHere').css({
      'display': 'none'
    });
  }
});

This will hide the "Drill here" button from all the boxes that include "Marketing" in the Department field. Of course, you can modify this condition any way you want.
Please consider learning more about the onBoxRendered JavaScript event in this article.

3

Hi,

Thanks so much for getting back to me.

This works great, and done exactly what I needed, however I am struggling to hide the small expanding arrow that’s at the bottom of the box. This will then prevent further drill down to anyone under that employee.

How would this be accomplished?

Thanks again. The I’ll is great and currently in the process of purchasing as soon as we have approvals in place. It fills a massive gap for us.

4

Hi @lquigg ,
just like before, you can manipulate the css of any element directly with the JavaScript framework and the box object.
You can add one line in the code I've providen above:

renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Department"].contains('Marketing')){
    
    box.$elemContainer.find('.poch-toolbar-button.rocToolbarButton.rocActionDrillHere').css({
      'display': 'none'
    });
     box.$elem[0].nextElementSibling.style.visibility='hidden';
  }
});

The difference is only in the line

box.$elem[0].nextElementSibling.style.visibility='hidden';

The box.$elem[0].nextElementSibling will give you the DOM object of the expanding "plus" button.
As a result, the expand button will be hidden in all the "Marketing" department employees:
image

Please let me know if this works.

5

Thanks this worked great!