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:
Example: api.config.layout = "TopToBottom";
|
skin |
Skin of a chart. Possible values:
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 |
Enable/disable search only in indexed columns of the data source list. 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 Example: api.config.nodesSortFieldName = "PreferredName";
|
nodesSortOrder |
It is Example: api.config.nodesSortOrder = "DESC";
|
nodesSortValueType |
It is 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 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 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 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 {
"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 {
"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;
|
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;
|
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: 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 Example: api.config.BoxesCustomization = {
"6": {Orientation: "Horizontal"},
"3": {Orientation: "Horizontal"}
};
|
reportHeader and reportFooter |
Also, using an
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}}";
|