Documentation › How to display awards and conditionally format Org Chart in SharePoint and Microsoft Teams

Display awards and conditionally format Org Chart

Note

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

Most scenarios use simple style rules, but sometimes you may need more advanced logic. This tutorial explains how to conditionally format Org Chart boxes and search results based on data source values (such as SharePoint lists or User profiles).

You’ll start with simple rules for highlighting boxes, then move to a more advanced scenario where boxes are styled dynamically and display awards medals (gold, silver, bronze). By the end, you’ll be able to change box styles, highlight search results, and add visual elements based on employee data.

This article is divided into different sections:

If you only need simple color highlighting, the first section may be enough. For more advanced customization, continue with the next sections.

This is how your chart will look after all customizations:

Resulting chart showing awards based on custom styles

Highlight boxes according to field values

It is assumed that you’ve already added the web part to your page and configured it with default settings. Next, we’ll change box background colors based on a custom field in the data source.

First, add an Awards field to your data source, which may have one of the following values:

  • Gold medal

  • Silver medal

  • Bronze medal

Hint

We use a SharePoint list in this example, but you can use User profiles as well. If you don’t know how to add a new column, refer to official Microsoft documentation:

Based on that, we will set a light goldenrod background for boxes where Awards field has the value Gold medal, a lavender background for boxes with the Silver medal field value, and a maize background for boxes with the Bronze medal field value.

Using the configuration wizard, navigate to the Custom code (JavaScript) tab.

Custom JavaScript step in the wizard

This JavaScript tab includes ready-to-use handlers for box, tooltip, and search result events. In this article, we will only use box and search result rendering events to highlight boxes and search results. You can find more detailed information about JavaScript in our documentation.

Use JavaScript code to highlight boxes with Gold medal field values as follows:

//Subscribe for the box rendering event
api.onBoxRendered((box, itemData) => {
  //If the employee has a gold award, color the card
  if (itemData.Awards == "Gold medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    $card.attr('style', 'background-color: #ffec8b !important');
  }
});

The script included above uses the onBoxRendered event to access each box as it is rendered. This method receives:

  • box: represents the object of the current box. Its elem property stores the DOM element of the box.

  • itemData: contains all field values from the data source specified in the configuration wizard.

We use the Awards property of the itemData to check the employee’s award value and apply styling when the condition is met. This allows you to update the box style based on employee data.

Resulting chart after applying custom styles for gold boxes

To highlight boxes with other field values, you can use the same logic and add the conditional operator if for each of them. This approach also works for search results and tooltips.

For simple styling, you can apply CSS directly in JavaScript. However, for better readability and maintainability, it’s recommended to move styles into CSS classes.

To apply a separate CSS class, change the JavaScript code to the following:

//Subscribe to the box rendering event
api.onBoxRendered((box, itemData) => {
  //If the employee has a gold award, add a class
  if (itemData.Awards == "Gold medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    $card.addClass("gold-box");
  }
});

Then switch to the Custom code (CSS) tab and add the following CSS class for the gold medal box:

/*Set a background color for the box with the gold medal*/
.gold-box {
  background-color: #ffec8b !important;
}

As you can see, we added a CSS class to elem instead of setting CSS styles manually.

Add images (awards) or any other HTML elements into boxes dynamically

So far, we’ve only updated box colors. Next, we’ll add an award image to each box.

Use the following JavaScript code:

//Subscribe to the box rendering event
api.onBoxRendered((box, itemData) => {
  //If the employee has a gold award, add a div element
  if (itemData.Awards == "Gold medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    var medalSpan = $("<div class='medal gold-medal'></div>");
    $card.append(medalSpan);
  }
});

It checks for a Gold medal value and adds a new div element to the box. Then, you need to add some CSS classes, as specified below, to set the image and define its position and size:

/*Set position for all medals*/
.medal {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 56px;
  right: 0px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/*Set image URL for the gold medal*/
.gold-medal {
  background-image: url(../SiteAssets/OrgChart/gold-medal32x32.png);
}

Note

We uploaded images for medals to an OrgChart folder of a SiteAssets document library, but you can use any other location. Don’t forget to specify the correct path to the image in the CSS style.

This is enough to add the medal to an employee box:

Resulting chart with gold medals in boxes

We showed the script portion and CSS styles for the gold medal only. You can find the complete script in the next section.

Step-by-step guide with copy-pasteable code

Now that you’ve seen how it works, let’s combine everything into a complete example.

Add a new Awards field to your data source. If you don’t know how to do it, refer to official documentation from Microsoft:

In the configuration wizard, open the Custom code (CSS) tab and paste the following CSS code:

/*Set position for all medals*/
.medal {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 56px;
  right: 0px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/*Set image URL for a gold medal*/
.gold-medal {
  background-image: url(../SiteAssets/OrgChart/gold-medal32x32.png);
}

/*Set image URL for a silver medal*/
.silver-medal {
  background-image: url(../SiteAssets/OrgChart/silver-medal32x32.png);
}

/*Set image URL for a bronze medal*/
.bronze-medal {
  background-image: url(../SiteAssets/OrgChart/bronze-medal32x32.png);
}

/*set background color for box with the gold medal*/
.poch-group-item__card.box.gold-box, .gold-search-result {
  background-color: #ffec8b !important;
}

/*set background color for box with the silver medal*/
.poch-group-item__card.box.silver-box, .silver-search-result{
  background-color: #e6e6fa !important;
}

/*Set background color for box with the bronze medal*/
.poch-group-item__card.box.bronze-box, .bronze-search-result{
  background-color: #edd19c !important;
}

Then, switch to the Custom code (JavaScript) tab and paste the following JavaScript code:

//Subscribe to the box rendering event
api.onBoxRendered((box, itemData) => {

  //If the employee has a gold award, add a div element
  if (itemData.Awards == "Gold medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    var medalSpan = $("<div class='medal gold-medal'></div>");
    $card.append(medalSpan);
    $card.addClass("gold-box");
  }

  //If the employee has a silver award, add a div element
  if (itemData.Awards == "Silver medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    var medalSpan = $("<div class='medal silver-medal'></div>");
    $card.append(medalSpan);
    $card.addClass("silver-box");
  }

  //If the employee has a bronze award, add a div element
  if (itemData.Awards == "Bronze medal") {
    var $card = $(box.elem).find(".poch-group-item__card");
    var medalSpan = $("<div class='medal bronze-medal'></div>");
    $card.append(medalSpan);
    $card.addClass("bronze-box");
  }
});

//Subscribe to the search result rendering event
api.onSearchResultRendered((searchResult, itemData) => {

  //Add a class to the search result of the employee with the gold medal
  if(itemData.Awards == "Gold medal"){
    $(searchResult.elem).addClass("gold-search-result");
  }

  //Add a class to the search result of the employee with the silver medal
  if(itemData.Awards == "Silver medal"){
    $(searchResult.elem).addClass("silver-search-result");
  }

  //Add a class to the search result of the employee with the bronze medal
  if(itemData.Awards == "Bronze medal"){
    $(searchResult.elem).addClass("bronze-search-result");
  }
});

Click Save to close the wizard and your chart will reload with the new conditional formatting and awards:

Resulting chart showing awards based on custom styles

In this article, you learned how to apply conditional formatting to Org Chart based on data source values. You can use the same approach to style tooltips and search results, or extend it further by adding dynamic elements (such as images) using JavaScript.

This makes it easier to highlight key employees and improve the overall readability of your org chart.