Add shape to org chart box?


#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:


#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:

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:

.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:

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


#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:


#4

I am glad to help! :slight_smile: