Order employees boxes using custom field for Org Chart

You can choose a custom field for ordering the employees boxes in your chart. It can be an existing field or a new one. If you use Users Profiles as a data source you can create a new user property. In case you use a list, you can create a new list column.

To define the sorting rules use this javascript method. You can find a full description of the method here.

renderer.setSorting("sortingFieldName", "sortOrder", "sortValueType");
  • sortingFieldName – the internal name of a list field or a property from the User Profile service.

  • sortOrder – a sorting order, for example, ASC or DESC.

  • sortValueType – defines ths sorting method: by string or by number. It is String by default, but you can specify Number. If a field contains a non-number value it fallback to zero value and writes a message to the browser console.

Sorting by string

You can either specify the sortValueType parameter as “String” or leave the option empty.

renderer.setSorting("PreferredName", "DESC");


renderer.setSorting("PreferredName", "DESC", "String");

For example, I want to sort the list of employees by their names.


I add the code to the Custom Javascript section of the Org Chart settings.

renderer.setSorting("Title", "ASC", "String");

The result looks like this.


If I use DESC sorting it looks like this.

renderer.setSorting("Title", "DESC", "String");
Sorting Sorting

Sorting by number

If you want to sort the fileds by number you need to specify the parameter.

renderer.setSorting("NumberFieldName", "DESC", "Number");

For example, I have a list of employees and room numbers for each employee.


If you want to sort the boxes by number of the rooms, add the following code to the Custom JavaScript section of the Org Chart settings.

renderer.setSorting("Room", "ASC", "Number");
Number sorting

The result looks like this.

Number sorting

You can also use DESC sorting.

renderer.setSorting("Room", "DESC", "Number");
Number sorting

This is the result.

Number sorting