organisation chart web part for SharePoint

Create and Share beautiful org charts with SharePoint

Quick to install. Easy to configure. Simple to use.

Conditional Formatting The Org Chart

This guide walks through the process of creating advanced conditional formats. The SharePoint Org Chart can support 4 different conditional format rules in addtion to the six "quick format rules" described here.

Using Conditional Formatting

1. Introduction
In this example the page developer has created an organisation chart and is coloring some of the boxes green using the Quick Formatting rules. In additon this chart includes a vacant postion ( circled in red ). The vacant position does not have name and does not stand out from the other occupied roles.

2. Enter Edit mode & Set First Conditional Format Rule
The page developer swithces the page into Edit Mode and opens the Conditional Format Rule 1 property section then sets the first conditional rule to trigger if the RoleType is EqualTo the value Vacant.

These rules are defined in the same way as the Quick Format rules which are explained further here

3. Apply Rule
Once the Apply button is pressed the vacant position is displayed with a red background.

4. Set HTML Template property
Although the box is red it is still not right. As the role is vacant there is no image to display and the page developer would like to create a method of allowing his customers to apply for the role should they wish.

To do this the HTML Template property is set. This takes HTML markup and uses the value substitution features of the SharePoint Org Chart.

Wrapping a field name in { } tells the SharePoint Org Chart to insert the value of that field into the box.

For more on the subtitution syntax see the Custom Templates User Guide.

5. Apply changes
Once the Apply button is pressed the vacant position is displayed with a red background and a different HTMLTemplate.

6. Save the chart
Pressing leaving Edit Mode saves the rule and it is applied to the organisation chart. As can be seen in the example the vacant postion is now visible and has a hyperlink that allows staff to apply for the role.