Contents
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:
Note
Editing JavaScript is available only for Tenant Administrator (Global Admininistrator). Also, the Tenant Administrator can disable the Custom JavaScript feature globally.
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'
});
}
});
Note
Go to the next step of the configuration wizard General.