Templates

Template types

There are three Org Chart elements for which you can customize templates:

box,
tooltip,
search result.

The editing process is the same for all elements.

We will demonstrate the process using the box as an example.

Editor modes

The templates can be edited in both Design and HTML modes.

In the visual editor, you need to specify the photo URL field. This property defines which field is used to retrieve photo URLs for the boxes. These photos will be displayed on the left side of the boxes. You can leave this property empty if you don’t have photos.

Below the photo URL field property, you will see a list of available fields. Click Add field and select the field you want to display in the box. The selected field will be added to the box template.

After adding a field, you can drag and drop it to change the order of fields in the box.

Each field has a Display as property.

The Display as property controls how the selected field is rendered in the box:

Type	Description
date	It will be displayed as a date.
date and time	It will be displayed as a date with time.
e-mail	It will be displayed as a `mailto` link.
link	It will be displayed as a link. Once you choose link as a display type, a tooltip will appear. This tooltip allows you to: select another field that will be used as a URL for the link specify a custom URL manually
MS Teams	It will be displayed as a link that opens a Microsoft Teams chat with the selected user. For example, if you select the “Work email” field as a source for the MS Teams link, the Org Chart will open a chat with the user whose email is specified in that field.
phone	It will be displayed as a phone number.
rich text	It will be displayed as rich text (content that can include formatting such as bold text, colors, and other styling using HTML tags).
tags	It will be displayed as multiple separated tags. You can use this option with: pipe-separated values (“\|”) in a text column within a SharePoint list data source: The Org Chart does not support semicolon-separated values yet. multi-choice columns within a SharePoint list data source, where each selected value will be displayed as a separate tag: this also applies to properties like “Skills” and “School & Education” in Entra ID or User Profiles data sources.
text	It will be displayed as plain text (without formatting).
tooltip link	It will show the details tooltip for the current box on click.

This is how the properties look in the Org Chart:

If you need more advanced customization, switch to HTML mode. Once you click the HTML button, all changes made in the visual editor are converted into an HTML template.

Note

If you switch to HTML mode and finish the wizard, you will not be able to return to the visual editor without resetting the template to default.

HTML mode

We use the Handlebars templating engine to render Org Chart elements. You can specify custom HTML templates using Handlebars syntax to change the look and feel of the Org Chart.

Handlebars template looks like regular HTML, with embedded Handlebars expressions. They are enclosed between double braces {{ }}, for example {{Department}}. It renders the value of the field with the internal name “Department”.

You can find all available field names by clicking the Field names button:

The Restore default button resets the template to its default version.

For more information about HTML templating syntax, see the HTML templating syntax description.

Note

Go to the next step of the configuration wizard – Custom code.

Templates

Template types

Editor modes

Design mode

HTML mode