Custom code

Custom CSS

Org Chart allows to specify custom CSS styles. If you are familiar with CSS, you can adjust visualization of company structure to your brand book.

On the picture below you can see example of CSS style which changes the background of boxes to black:

.poch-group-item__card.box {
  background-color: black !important;
  border-color: black !important;
}

And this is another example which resizes Org Chart boxes to smaller size. Thus, more boxes can be displayed in the single screen.

/*Width of the box*/
.poch-application-container .poch-group-item  {
  width: 170px;
}

/*Font size for the fields in the box*/
.poch-application-container .poch-box__field {
  font-size: 12px;
}

/*Font size for the header field in the box (the first in the box)*/
.poch-application-container .poch-box__field.poch-box__header {
  font-size: 12px;
}

/*Width of the photo in the box*/
.poch-application-container .poch-box .poch-photo-container.is-medium {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
}

Review more articles on customizing Org Chart look:

• Customize box HTML template and CSS styles,

• Custom styles for printed Org Chart.

JavaScript

This step allows to specify custom JavaScript code. You can use functions from JavaScript framework to subscribe for box, tooltip, search results rendering events. Each event receives rendered element and object with field values from the data source. The object contains all fields from the data source. Find their names by clicking the Field names button. Read description of JavaScript framework for more information.

On the picture below you can see an example of JavaScript which changes the background of boxes to red for all employees from the Marketing Department.

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    if (itemData["Department"].contains("Marketing")) {
        const $boxCard = $(box.elem).find(".poch-group-item__card");
        $boxCard.css({
            'background-color': 'red',
            'border-color': 'red'
        });
    }
});