JavaScript Configuration

Config stores all configuration settings for Org Chart. You can read it and modify before Org Chart is rendered. Thus, you can change configuration based on your logic dynamically.

Just use api.config outside of any events right in the code editor.

Below are some useful properties from the configuration which you can override. Other properties can be defined in user interface of the configuration wizard, but you can override them also if required.

Input parameters

Property

Description

webPartHeight

Height of the web part in pixels.

Example:

api.config.webPartHeight = 500;

layout

Default layout of a chart. Possible values:

  • TopToBottomCompact,

  • TopToBottom,

  • TopToBottomGroupLeafItems,

  • LeftToRight,

  • BottomToTop.

Example:

api.config.layout = "TopToBottom";

skin

Skin of a chart. Possible values:

  • Black,

  • BlackMetroTouch,

  • LightGray,

  • Silver,

  • Silk,

  • Forest,

  • Glow,

  • Hay,

  • Metro,

  • MetroTouch,

  • Modern,

  • Office,

  • OfficeBlack,

  • OfficeBlue,

  • Outlook,

  • Simple,

  • Sunset,

  • Vista,

  • Web20,

  • WebBlue,

  • Windows7.

Example:

api.config.skin = "Modern";

numberOfExpandLevels

Number of levels to expand.

Example:

api.config.numberOfExpandLevels = 1;

isCollapsingEnabled

Enable/disable collapsing.

Example:

api.config.isCollapsingEnabled = true;

isZoomEnabled

Enable/disable zoom.

Example:

api.config.isZoomEnabled = true;

displayBoxLevel

Display/hide a box level.

Example:

api.config.displayBoxLevel = true;

enableSubordinatesCount

Enable/disable displaying subordinates count.

Example:

api.config.enableSubordinatesCount = true;

enableVacancies

Enable/disable displaying vacancies.

Example:

api.config.enableVacancies = false;

vacanciesListUrl

It sets the URL of the data source list for vacancies.

Example:

api.config.vacanciesListUrl = "/sites/YourSite/Lists/Vacancies";

enableIndexedSearch

Example:

api.config.enableIndexedSearch = false;

enableClientSideCaching

Enable/disable Org Chart caching.

Example:

api.config.enableClientSideCaching = true;

nodesSortFieldName

Name of field which is used for sorting. For User profiles it is PreferredName by default.

Example:

api.config.nodesSortFieldName = "PreferredName";

nodesSortOrder

It is ASC by default, but you can specify DESC for descending sorting.

Example:

api.config.nodesSortOrder = "DESC";

nodesSortValueType

It is String by default, but you can change it to Integer.

Example:

api.config.nodesSortValueType = "Integer";

groupItemsBatchRequestSize

This property defines the number of user profiles that will be included in one request to SharePoint. By default, it is 50.

If there are too many requests to SharePoint and it causes throttling, you can encrease the value to reduce their number.

In the case of the time-out issue, on the contrary, decrease the value to make the size of each request smaller.

Example:

api.config.groupItemsBatchRequestSize = 30;

searchResultSortFieldName

Name of field which is used for sorting. For User profiles you need to use a name of Sortable Managed property. You may find these properties in SharePoint Central Administration > Search > Manage Search Schema.

Example:

api.config.searchResultSortFieldName = "LastName";

searchResultSortOrder

It is ASC by default, but you can specify DESC for descending sorting.

Example:

api.config.searchResultSortOrder = "DESC";

searchResultMaxCnt

Max number of items in search results. It is 10 by default.

Example:

api.config.searchResultMaxCnt = 15;

spSearchQueryPattern

The pattern for a keyword in a search query. You may adjust the severity of the search query with this property. For example, if you specify this property as {{keyword}} then the Org Chart will use the search by exact match.It is {{keyword}}* by default. {{keyword}} is the reserved key and you don’t need to change it. You may get more information about the syntax for the pattern in this article.

Example:

api.config.spSearchQueryPattern = "{{keyword}}";

spSearchSourceId

The GUID of your custom SharePoint Result Source. “Local People Results” result source is using in the Org Chart by default. You may get more information about creating a custom result source by this link.

Example:

api.config.spSearchSourceId = "F2HR7450-98KV-6JA3-23LT-GNZOP20D1S73";

idFieldMapping

parentIdFieldMapping

displayTextFieldMapping

assistantFieldMapping

dottedManagerFieldMapping

There are several properties with information about mapping to the data source fields. All properties contain JSON objects with the same structure.

Here is a default value of the displayTextFieldMapping for the user profiles data source:

{
  "InternalFieldNameForSelect": "PreferredName",
  "InternalFieldName": "PreferredName",
  "DisplayName": "Name"
}

And for the list data source:

{
  "InternalFieldName": "Title",
  "DisplayName": "Title",
  "FieldType": "Text",
  "isIndexed": false,
  "InternalFieldNameForSelect": "Title"
}

For example, you can extract internal field name with this code:

api.config.displayTextFieldMapping.InternalFieldName;

boxTemplateData

tooltipTemplateData

searchResultTemplateData

There are several properties with information about template data for box, tooltip, and search results in design mode. All properties contain JSON objects with the same structure.

Here is a sample value of the boxTemplateData:

{
  "PictureField": {
    "InternalFieldName": "PhotoUrl",
    "DisplayName": "Photo URL",
    "FullInternalFieldName": "PhotoUrl",
    "IsLookupField": false,
    "Type": 5,
    "IsText": false,
    "IsRichText": false,
    "IsEmail": false,
    "IsPhone": false,
    "IsTooltipLink": false,
    "IsLink": false,
    "UrlLinkFieldName": null,
    "ManualLinkUrl": null,
    "IsHeader": false
  },
  "PersonalUrlField": null,
  "DisplayFields": [{
      "InternalFieldName": "Title",
      "DisplayName": "Title",
      "FullInternalFieldName": "Title",
      "IsLookupField": false,
      "Type": 2,
      "IsText": false,
      "IsRichText": false,
      "IsEmail": false,
      "IsPhone": false,
      "IsTooltipLink": true,
      "IsLink": false,
      "UrlLinkFieldName": null,
      "ManualLinkUrl": null,
      "IsHeader": true
    }
  ],
  "NeedSubordinatesCount": "pochContext.needSubordinatesCount",
  "BoxLevelNumber": "pochContext.boxLevelNumber"
}

For example, you can set the second field in the box as a tooltip link:

api.config.boxTemplateData.DisplayFields[1].IsTooltipLink = true;

boxTemplate

tooltipTemplate

searchResultTemplate

There are several properties with information about template data for box, tooltip, and search results in HTML mode. All properties contain strings with the HTML mark-up of the templates.

For example, you can set the box template with the record like below (the string contents is cut out):

api.config.boxTemplate = '<div class="poch-box media">...</div>';

listDataSourceSettings

Stores information about list data source. For example you can extract list id.

Example:

api.config.listDataSourceSettings.listId;

additionalList

Stores information about an additional list. For example you can set its URL.

Example:

api.config.additionalList.listServerRelativeUrl = "/sites/TestSite/Lists/AdditionalList";

itemsPerNodeLimit

Limit for items per one node for compact layout. Default value is 100.

Example:

api.config.itemsPerNodeLimit = 150;

filtrationRule

String of a filtration rule in advanced mode (JavaScript).

Example:

api.config.filtrationRule = '(itemData) => {return itemData["Department"] == "Marketing Department";}';

filtrationRuleData

Object of a filtration rule in simple mode. It has two properties.

The first one, ConditionsMode, specifies whether the employee should meet any (0) or all (1) conditions.

The second, Conditions, is an array of objects (conditions) containing three properties:

  • fieldName, a field name in the data source;

  • operation, possible values: Equals, NotEqualTo, Contains, NotContains, Matches;

  • value, an arbitrary value for the condition.

Here is a sample JSON object of the filtrationRuleData property:

{
  "ConditionsMode": 1,
  "Conditions": [
      {
          "fieldName": "Department",
          "operation": "Contains",
          "value": "Marketing"
      },
      {
          "fieldName": "Title",
          "operation": "NotEqualTo",
          "value": "Jessica Adams"
      }
  ]
}

For example, you can extract the value of the first condition with this code:

api.config.filtrationRuleData.Conditions[0].value;

clientSideCachingLifeMinutes

Life time in minutes for client side cache.

Example:

api.config.clientSideCachingLifeMinutes = 60;

zoomThreshold

Zoom threshold to switch the box view to a implified mode.

Example:

api.config.zoomThreshold = 0.6;

numberOfRootNodeGroups

Max number of columns in the compact top to bottom layout.

Example:

api.config.numberOfRootNodeGroups = 4;

renderInitialNode

You can disable rendering of initial node if you want to drill down to some other node on web part load. By default it is set to true. It helps to reduce time of initial loading.

Example:

api.config.renderInitialNode = false;

rootNodeId

You can specify root ID dynamically from your code.

Example:

api.config.rootNodeId = "account@contoso.onmicrosoft.com";

minSearchKeywordLength

Min number of symbols for a search keyword. It is 2 by default.

Example:

api.config.minSearchKeywordLength = 3;

displayAssistantAsSubordinate

Display/hide subordinates if they are assistants.

Example:

api.config.displayAssistantAsSubordinate = false;

displayDottedLineForSolidEmployee

Show/hide the feature for displaying dotted-line managers drill down link for boxes. It is true by default.

Example:

api.config.displayDottedLineForSolidEmployee = false;

customJavaScript

Stores the string content of the custom JavaScript step.

Example:

api.config.customJavaScript = 'api.onBoxRendered((box, itemData) => {//Box rendered event});';

customCss

Stores the string content of the custom CSS step.

Example:

api.config.customCss = '.poch-group-item__card {background-color: moccasin !important; border-left-color: orange !important;}';

dataProviderType

Defines the data source type: 0 – for SharePoint list and 1 – for user profiles.

Example:

api.config.dataProviderType = 0;

connectionLinesWidth

Sets the width of connections lines between boxes in Org Chart. It is 1 by default.

Example:

api.config.connectionLinesWidth = 2;

csvExportFields

You can specify a custom array of fields that will be used in the export to CSV. Fields with the item’s current level and the subordinate’s count will be included to the result file automatically. If you use User Profiles data source you need to specify the internal names of SharePoint user profile properties in the array; in case of SharePoint list data source specify the internal field names from the SharePoint list.

Example:

api.config.csvExportFields = ["ID", "Title", "Office", "JobTitle"];

BoxesCustomization

Stores the customization for some single boxes. This is the key/value dictionary where the key is an ID of a box and the value is an object of box customization. Available fields for customization: Orientation – sets a box’s orientation. Can be Stacked or Horizontal. It has Stacked value by default. Note: BoxesCustomization works only for the TopToBottomCompact layout.

Example:

api.config.BoxesCustomization = {
  "6": {Orientation: "Horizontal"},
  "3": {Orientation: "Horizontal"}
};

reportHeader and reportFooter

{{Metadata.Properties.FieldName}}

Also, using an if block, it is possible to check whether the field exists and only then include it:

{{#if Metadata.Properties.FieldName}}{{Metadata.Properties.FieldName}}{{/if}}

Example:

api.config.reportHeader = "{{Metadata.RootItemName}}{{#if Metadata.Properties.Department}} -
{{Metadata.Properties.Department}}{{/if}}{{#if Metadata.Properties.JobTitle}} - {{Metadata.Properties.JobTitle}}{{/if}}";
api.config.reportFooter = "{{Metadata.RootItemName}}{{#if Metadata.Properties.JobTitle}} -
{{Metadata.Properties.JobTitle}}{{/if}} - Reports to {{Metadata.RootItemManagerName}}";