JavaScript Methods

getFirstInstance()

This is a quick and convenient method to debug Plumsail Org Chart through browser DevTools. It returns an object of the first Org Chart web part on the current page.

Plumsail.OrgChart.getFirstInstance()

You can also get an array of all Org Chart instances on the page:

Plumsail.OrgChart.instances

For example, to get a JSON object of the Org Chart configuration execute this code in the browser console:

Plumsail.OrgChart.getFirstInstance().api.config

filtrationRule

If default filtration configuration is not enough use advanced JavaScript filtration. It is implemented through a function assigned to method api.filtrationRule. It evaluates data for the Org Chart box and returns a boolean value. If true, then the box with such data will be displayed.

You can use itemData input parameter to access data for the current box and verify it. Use internal names of properties to access their values like this: itemData["Department"]. Find all the available properties in the Field names list - click any to copy the internal name to the clipboard and use it in the code below.

Use typical JavaScript conditions, comparison operators, and functions like indexOf to verify data. For example, you may need to include in the org chart only employees from the specific department. In this case, the function to display employees from the Marketing department looks like this:

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

And with this filter, you can exclude all employees whose name contains “Smith” from marketing department:

api.filtrationRule = (itemData) => {
    return !itemData["PreferredName"].contains("Smith") && itemData["Department"] == "Marketing Department";
}

zoom(value)

Sets scale for entire Org Chart.

Input parameters

Example

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

api.zoom(0.5)

setSorting(sortingFieldName, sortOrder, sortValueType)

Set boxes sorting field, direction, and type.

Input parameters

Example

The example below shows how to set sorting by preferred name in DESC order.

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

The example below shows how to set sorting by number field in DESC order.

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

drillDown(itemId)

Drills the Org Chart down to the specified box.

Input parameters

Example

Below is an example that shows how to drill down to a box of an employee with the ID of 3:

api.drillDown("3");

adjustCenterScroll()

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

Example

The example below shows how to call this method:

api.adjustCenterScroll();

render()

Rerenders Org Chart from scratch.

Example

The example below shows how to call it

api.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:

api.fixConnectionLines();

initTooltipBasedOnConfig(link, itemData)

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

expandNodeLevels(numberOfLevels, completed)

Expands specified number of levels of Org Chart.

Input parameters

You can use it together with showLoadingPanel and hideLoadingPanel functions. Show loading panel before calling this method and hide it inside completed callback.

Example

api.expandNodeLevels(3, function(){
  console.log("Nodes are expanded");
});

expandNodeLevelsConditionally(maxNumberOfLevels, conditionFunction, completed)

Conditionally expands specified number of levels of Org Chart.

Input parameters

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.

api.onInitialLoadingFinished(() => {
  //Show loading panel before expanding
  api.showLoadingPanel();

  api.expandNodeLevelsConditionally(2,
    function (itemData) {
      //Expand all employees except "Derek Clark"
      return itemData["PreferredName"] != "Derek Clark";
    },
    function () {
      //Hide loading panel after expanding
      api.hideLoadingPanel();
    });
});

collapseAllNodes(completed)

Collapse all levels of Org Chart.

Input parameters

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.

api.onInitialLoadingFinished(() => {
  //Show loading panel before collapsing
  api.showLoadingPanel();

  api.collapseAllNodes(function () {
    //Hide loading panel after collapsing
    api.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

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

api.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

api.showLoadingPanel();

hideLoadingPanel()

It hides loading screen for the Org Chart web part.

Example

api.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"){
  api.enableDisableFullScreen();
}

dataProvider.getBoxGroupItemDataById(id, completed, error)

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

Example

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

dataProvider.getCurrentUserAccountName(completed, error)

Get account name of a current logged in user.

Example

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

dataProvider.clearCache()

Clears client side cache for current browser.

Example

api.dataProvider.clearCache();

scrollToBox(id)

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

Example

api.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

Example

api.customFunctions.getNumberOfColumns =
  function(rootItemData, defaultColumnsNumber){
  if(rootItemData["Title"] === "David Navarro"){
    return 2;
  }
  return defaultColumnsNumber;
}