JavaScript Methods

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.

zoom(value)

Sets scale for entire Org Chart.

Input parameters

Parameter

Description

value

numeric value, for example 0.5.

Example

The example below shows how to set 50% scale for Org Chart:

renderer.zoom(0.5)

drillDown(itemId, completed)

Drills down Org Chart to 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.

completed

callback function which is executed after drill down.

Example

The example below shows how to drill down to box of employee with ID equals 3.

renderer.drillDown("3", function(){
  console.log("Drill down executed.");
});

adjustCenterScroll()

Displays center of of structure in the middle of the web part.

Example

The example below shows how to call this method:

renderer.adjustCenterScroll();

render()

Rerenders Org Chart from scratch.

Example

The example below shows how to call it

renderer.render();

fixConnectionLines()

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();

expandNodeLevels(numberOfLevels, completed)

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");
});

expandNodeLevelsConditionally(maxNumberOfLevels, conditionFunction, completed)

Conditionally expands specified number of levels of Org Chart.

Input parameters

Parameter

Description

maxNumberOfLevels

Number of levels to expand.

conditionFunction

Function that receives itemData object with all box properties. You can use this object in your conditions. The funciton has to return boolean value. If true is returned, current box will be expanded.

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 untill 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();
  });
});

collapseAllNodes(completed)

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 untill 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();

  });
});

prerenderAction(completed)

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();
  }
}

showLoadingPanel()

It shows loading screen for the Org Chart web part.

Example

renderer.showLoadingPanel();

hideLoadingPanel()

It hides loading screen for the Org Chart web part.

Example

renderer.hideLoadingPanel();

enableDisableFullScreen()

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();
}

dataProvider.getBoxGroupItemDataById(id, completed, error)

Get org chart data item by id (usually account name or list id).

Example

renderer.dataProvider.getBoxGroupItemDataById("3", function(dataItem){
  console.log(dataItem)
});

dataProvider.getCurrentUserAccountName(completed, error)

Get account name of a current logged in user.

Example

renderer.dataProvider.getCurrentUserAccountName(function(accountName){
  console.log(accountName);
});

dataProvider.clearCache()

Clears client side cache for current browser.

Example

renderer.dataProvider.clearCache();

scrollToBox(id)

Scroll org chart to item by id (usually account name or list id).

Example

renderer.scrollToBox("domain\\username");

customFunctions.getNumberOfColumns(rootItemData, defaultColumnsNumber)

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.