Add shape to org chart box?

Org Chart Microsoft 365 version
1

Hello!

I have a requirement from our Marketing department to try and include a shape in the Org Chart box that is color coded based on a contains value in the Department field. I've been able to accomplish the conditional color coding with the border color, but adding a shape to the box is much harder...

Here's an example of what we have, and what we'd like to do:

image
image.png741×358 54.8 KB

2

Hello @JenSWCA,

Thank you for your question.

You may use :before or :after pseudo elements to add stripes to the boxes. You would need to add a separate class for boxes in each department and then apply custom CSS for those boxes.

  1. Please, add classes using custom JS:

image
image.png859×547 23 KB 

renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Department"].contains("Marketing")){
   box.$elem.addClass('custom-class');
  }
  if(itemData["Department"].contains("Financial")){
   box.$elem.addClass('custom-class-2');
  }
});
  1. Then, please, add custom CSS:

image
image.png859×547 25.9 KB 

.custom-class{
  position: relative;
  padding: 10px 10px 10px 25px !important
}
.custom-class:before{
  display: block;
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  background-color: #6b8d21;
  height: 100%;
  width: 10px
}

.custom-class-2{
  position: relative;
  padding: 10px 10px 10px 25px !important
}
.custom-class-2:before{
  display: block;
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  background-color: #df601b;
  height: 100%;
  width: 10px
}

Here is the result:

image
image.png1195×511 58.9 KB

You may also check this article to learn more about how to customize box template and use CSS styles.

Best Regards,
Anna Dorokhova
Plumsail Team

2 Likes
3

OMG Anna - this is perfect! I started with what you had and added more for our group, and the result is perfecto!! Thank you so much!

You guys are always so helpful :slight_smile:

2 Likes
4

I am glad to help! :slight_smile:

5

I love this idea, what if we wanted to add it for every box, not per department?

6

Hi @turtlgal,
It's even easier if you want to customize every box the same way, you can do without JS, just use the CSS rule for the following two classes:

.pl-item-template {
  position: relative;
  padding: 10px 10px 10px 25px !important
}
.pl-item-template:before {
  display: block;
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  background-color: #6b8d21;
  height: 100%;
  width: 10px
}

This will add the green stripe to every box in your Org Chart.
Alternatively, if you want to apply a custom class as above to boxes based on a different rule (some other that department) you only need to change the "if" condition inside the handler in onBoxRendered event.

1 Like
7

Thank you so much for the quick reply