You can use methods inside events or directly in the JavaScript editor. If you put a method call directly in the editor it is executed when Org Chart web part is loaded.
Contents
Sets scale for entire Org Chart.
Input parameters
Parameter |
Description |
|---|---|
value |
numeric value, for example |
Example
The example below shows how to set 50% scale for Org Chart:
renderer.zoom(0.5)
Set boxes sorting field, direction, and type.
Input parameters
Parameter |
Description |
|---|---|
sortingFieldName |
Internal name of a field that is used for sorting. For User profiles it is |
sortOrder |
Sort order. It is |
sortValueType |
Type of field value. It is |
Example
The example below shows how to set sorting by preferred name in DESC order.
renderer.setSorting("PreferredName", "DESC");
The example below shows how to set sorting by number field in DESC order.
renderer.setSorting("NumberFieldName", "DESC", "Number");
Drills the Org Chart down to the specified box.
Input parameters
Parameter |
Description |
|---|---|
itemId |
Id of item in a data source. For example it is an account name for user profiles or it can be a list item ID for SharePoint list. Mapping for ID field can be configured on the first step of the configuration wizard for SharePoint list data source. |
Example
Below is an example that shows how to drill down to a box of an employee with the ID of 3:
renderer.drillDown("3");
Displays center of structure in the middle of the web part.
Example
The example below shows how to call this method:
renderer.adjustCenterScroll();
Rerenders Org Chart from scratch.
Example
The example below shows how to call it
renderer.render();
Sometime if you add content to Org Chart boxes dynamically by JavaScript, connection lines can appear not in correct place. You can use this method to adjust connection lines to newly added content.
Example
The example below shows how to use this method:
renderer.fixConnectionLines();
Initializes tooltips for specified link. If you have custom rendering logic you can use this method to initialize tooltip links. This method will show a tooltip with data from itemData when somebody clicks on the link.
Input parameters
Parameter |
Description |
|---|---|
link |
jQuery element for the link. Click on the link will show the tooltip. |
itemData |
The object with properties from a data source. You can receive it from rendering events. Please find the description below at the beginning of the “Events” section. |
Expands specified number of levels of Org Chart.
Input parameters
Parameter |
Description |
|---|---|
numberOfLevels |
Number of levels to expand. |
completed |
callback function which is executed when all levels are expanded. |
You can use it together with showLoadingPanel and hideLoadingPanel functions. Show loading panel before calling this method and hide it inside completed callback.
Example
renderer.expandNodeLevels(3, function(){
console.log("Nodes are expanded");
});
Conditionally expands specified number of levels of Org Chart.
Input parameters
Parameter |
Description |
|---|---|
maxNumberOfLevels |
Number of levels to expand. |
conditionFunction |
Function that receives |
completed |
callback function which is executed when all levels are expanded. |
You can use it together with showLoadingPanel and hideLoadingPanel functions. Show loading panel before calling this method and hide it inside completed callback.
Example
The example below shows how to use this function together with onInitialLoadingFinished event and showLoadingPanel method. It waits until the web part is loaded in onInitialLoadingFinished event. Then it shows loading panel by calling showLoadingPanel. Then it validates condition for each box in conditionFunction. Once all levels are expanded, it hides loading panel by calling hideLoadingPanel method.
renderer.onInitialLoadingFinished(function () {
//Show loading panel before expanding
renderer.showLoadingPanel();
renderer.expandNodeLevelsConditionally(2,
function (itemData) {
//Expand all employees except "Derek Clark"
return itemData["PreferredName"] != "Derek Clark";
}, function () {
//Hide loading panel after expanding
renderer.hideLoadingPanel();
});
});
Collapse all levels of Org Chart.
Input parameters
Parameter |
Description |
|---|---|
completed |
callback function which is executed when all levels are expanded. |
You can show loading panel before calling this method and hide it inside completed callback with showLoadingPanel and hideLoadingPanel functions.
Example
The example below shows how to use this function together with onInitialLoadingFinished event and showLoadingPanel method. It waits until the web part is loaded in onInitialLoadingFinished event. Once all levels are collapsed, it hides loading panel by calling hideLoadingPanel method.
renderer.onInitialLoadingFinished(function () {
//Show loading panel before collapsing
renderer.showLoadingPanel();
renderer.collapseAllNodes(function () {
//Hide loading panel after expanding
renderer.hideLoadingPanel();
});
});
You can use this method to preform some actions before Org Chart rendering. For example if you need to load some data or some scripts you can hold Org Chart loading and continue it once everything is ready.
Input parameters
Parameter |
Description |
|---|---|
completed |
callback function which is executed when all levels are expanded. |
Be careful with this method because if you don’t call completed function, Org Chart is never rendered. We recommend you to wrap your code with try – catch – finally to guarantee that completed function is called.
Example
renderer.prerenderAction = function(completed){
try {
//Do some initialization staff }
catch(err) {
//handle errors }
finally {
//Org chart will not start rendering
//until you call 'completed' function
completed();
}
}
It shows loading screen for the Org Chart web part.
Example
renderer.showLoadingPanel();
It hides loading screen for the Org Chart web part.
Example
renderer.hideLoadingPanel();
It toggles full screen mode for the Org Chart web part.
Example
In the example below I check if there is the URL parameter IsFullScreen and show Org Chart enable full scheen if it is there.
var isFullScreen = GetUrlKeyValue("IsFullScreen");
if(isFullScreen === "true"){
renderer.enableDisableFullScreen();
}
Get org chart data item by id (usually account name or list id).
Example
renderer.dataProvider.getBoxGroupItemDataById("3", function(dataItem){
console.log(dataItem)
});
Get account name of a current logged in user.
Example
renderer.dataProvider.getCurrentUserAccountName(function(accountName){
console.log(accountName);
});
Clears client side cache for current browser.
Example
renderer.dataProvider.clearCache();
Scroll org chart to item by id (usually account name or list id).
Example
renderer.scrollToBox("domain\\username");
You may use this method to perform some custom logic for setting the number of columns for the root item in the compact layout dynamically. For example, if you need to change the default value from the Layout step of the configuration wizard for one of the users.
Note: This method must return a number value. The default value will be taken otherwise.
Input parameters
Parameter |
Description |
|---|---|
rootItemData |
The business object from the data source. See description at the beginning of “Events” section. |
defaultColumnsNumber |
The default value from the configuration wizard. |
Example
renderer.customFunctions.getNumberOfColumns =
function(rootItemData, defaultColumnsNumber){
if(rootItemData["Title"] === "David Navarro"){
return 2;
}
return defaultColumnsNumber;
}
Note
Next review Configuration.