Customize box HTML template and CSS styles in Org Chart

Note

For the versions earlier than 4.x.x (including on-premises ones), please follow this instruction.

In this article I will show how to customize box template for Plumsail Org Chart. Christmas and New Year are coming. That is why I decided to implement such interactive behavior for org chart. This is just a show case and you can use this approach to create your own box templates.

This is how it looked before customization:

Org Chart allows to customize templates for boxes, tooltips and search results using Handlebars templating framework. It supports conditions, iterators and can be extended with own helpers. You can play around with template in this tester.

As you see I changed color schema and background of boxes as well as added Santa’s cap and beard.

The customization can be done in three steps:

To change Org Chart skin.
To customize box template – I will add Santa’s cap and beard to the box template at this step.
To customize CSS styles – I will set background, specify position for the cap and beard and finally, add dynamics to beard. So that it will appear on mouse over.

I will not describe in detail how to change skin. It is quite easy. Just open the configuration wizard, switch to the Design step, change the skin and finish the wizard.

How to customize box template

Firstly, I uploaded images of cap, beard, and box background to a document library. I used a “PublishingImages” library, but you can use any other path. In this case you will need to change path to pictures in HTML template and CSS styles below. You can download archive with pictures.

You need to open the configuration wizard to customize HTML template for box. Then switch to the Templates step and switch to the HTML mode in the Box template tab. The Org Chart will convert template from visual editor to HTML template and you will be able to edit it.

I added two div tags with images. The first one contains the image of Santa’s cap:

The second one contains the image of beard:

The result template looks like this:

<div class="poch-box media">
  {{#if PhotoUrl}}
    <div class="santa-cap">
      <img src="../PublishingImages/santa-cap.png"/>
    </div>
    <div class="poch-box__photo-container poch-photo-container is-medium media-left">
      {{#detailsTooltipLink}}
        {{safeImage PhotoUrl}}
      {{/detailsTooltipLink}}
    </div>
    <div class="santa-beard">
      <img src="../PublishingImages/beard.png"/>
    </div>
  {{/if}}
    <div class="poch-box__content media-content">
      <div class="poch-box__fields-container content">
        <div class="poch-box__field poch-box__header">
          {{#detailsTooltipLink}}
            {{Title}}
          {{/detailsTooltipLink}}
        </div>
        <div class="poch-box__field">
          {{JobTitle}}
        </div>
        <div class="poch-box__field">
          {{Department}}
        </div>
      </div>
    </div>
</div>
{{subordinatesCount pochContext.needSubordinatesCount}}
{{boxLevelNumber pochContext.boxLevelNumber}}

As you see the template contains multiple tokens that allow to display properties from the data source. There are also helpers like detailsTooltipLink that renders the link to show tooltip on click. You will find more information in the documentation.

You can include additional fields from the data source into the template. Just add {{Field}}, where the “Field” is an internal name of a field from the data source.

How to customize CSS styles

Now, when we added required HTML tags into the template we need to display them correctly. Below you can find complete CSS style that changes background for boxes, specifies position and size for cap and beard. It also sets animation delay for beard and shows it on hover. All of this is done with CSS styles. You can set them in the configuration wizard on the Custom code step.

I used following selectors in my CSS:

.poch-group-item__card – to change the background for boxes.
.santa-cap – take a look at the HTML template: I added the santa-cap class to the new div tag. I used this selector to set position of Santa’s cap.
.santa-cap img – to specify size of cap.
.santa-beard – take a look at the HTML template: this class was also added to the new div tag which contains the image of beard. I used this selector to set position for beard as well as set animation delay and hide it by default. As you can see I used multiple transition styles to ensure that it will work in different browsers.
.santa-beard:hover – to show beard on hover.
.santa-beard img – to set size of beard.

You can find complete CSS styles below. It contains multiple comments that will help you to understand how it works:

/*Change box background*/
.poch-group-item__card {
  background-image: url('../PublishingImages/box-background.png') !important;
  background-color: white !important;
  border: grey 1px solid !important;
}

/*Set position for Santa's cap*/
.santa-cap {
  position: absolute;
  top: -2px;
  left: 16px;
  z-index: 1;
  -webkit-transform: rotate(-13deg);
}

/*Set size for Santa's cap*/
.santa-cap img {
  width: 36px;
}

/*Set position and initial state for beard*/
.santa-beard {
  position: absolute;
  bottom: 10px;
  left: 21px;

  /*Set animation delay for beard in all browsers*/
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: opacity .5s ease-in-out;

  /*Hide beard by default*/
  opacity: 0;
}

/*Show beard on hover*/
.santa-beard:hover {
  opacity: 1;
}

/*Set size for beard*/
.santa-beard img {
  width: 30px;
}

Conclusion

That is all. The org chart is ready for Christmas and New Year. In this article I showed how to customize HTML template for boxes of organization chart. I added CSS styles to change background of boxes and animate beard on hover. This is just a proof of concept. You can complicate it by additional HTML and CSS styles. You can even add custom JavaScript to modify boxes or tooltips dynamically.