JavaScript Events

itemData object

Most rendering events receive itemData object as input parameter. The object represents the business object from the data source. It is a set of fields with values. Each field has the same name as internal name of the field in the data source.

The object has structure like this:

{
  "FieldInternalName1": "FieldValue1",
  "FieldInternalName2": "FieldValue2",
  ...
  "FieldInternalNameN": "FieldValueN",
}

onBoxRendered(handler) event

Adds a handler on box rendered event. The handler has two input parameters: box and itemData.

box

It is the object of the rendered box. You can modify it, for example change background.

The box object has following properties:

• elem – The DOM element of the box. Use this notation to get access to its jQuery object: $(box.elem). You can use all methods available in jQuery to customize the box, for example css method.

• elemContainer – The DOM element of the box container. Use this notation to get access to its jQuery object: $(box.elemContainer). You can use this object to set width and height of the box.

The box object also provides getInnerContent() function. It gets jQuery object for the inner content of current box.

itemData

It is the business object from the data source. See the description at the beginning of this article.

Example

//Changes background of boxes for all employees from marketing department
api.onBoxRendered((box, itemData) => {
  if (itemData["Department"].contains("Marketing")) {
    var $card = $(box.elem).find(".poch-group-item__card");
    $card.css({
      "background-color": "red"
    });
  }
});

In this example Department is an internal name of the field, you can get value from the business object using such syntax:

itemData.Department

But if the internal name of your field contains − like SPS–Responsibility, you need to use different syntax:

itemData["SPS-Responsibility"]

The − symbol is forbidden in JavaScript, that is why you need to get value of the field using string key.

onTooltipRendered(handler) event

Adds a handler on tooltip rendered event. The handler has two input parameters: tooltip and itemData.

tooltip

The object of rendered details tooltip. You can modify it, for example change background.

The tooltip object has an elem property. It is a DOM element of the details tooltip. Use this notation to get access to its jQuery object: $(tooltip.elem). You can use all methods available in jQuery to customize the tooltip, for example css method.

itemData

The business object from the data source. See description at the beginning of this article.

Example

//Changes background for all tooltips of employees from marketing department
api.onTooltipRendered((tooltip, itemData) => {
  if (itemData["Department"].contains("Marketing")) {
    $(tooltip.elem).css({
      "background-color": "red"
    });
  }
});

onSearchResultRendered(handler) event

Adds a handler on quick search result rendered event. The handler has two input parameters: searchResult and itemData.

searchResult

The object of rendered search result. You can modify it, for example change background.

The searchResult object has an elem property. It is a DOM element of the search result. Use this notation to get access to its jQuery object: $(searchResult.elem). You can use all methods available in jQuery to customize the search result, for example css method.

itemData

The business object from the data source. See description at the beginning of this article.

Example

//Changes background for search results of employees from marketing department
api.onSearchResultRendered((searchResult, itemData) => {
  if (itemData["Department"].contains("Marketing")) {
    $(searchResult.elem).css({
      "background-color": "red"
    });
  }
});

onDrilledDown(handler) event

Adds a drilled down event handler. It is triggered when Org Chart is drilled down to some box.

Example

api.onDrilledDown(() => {
  console.log("Drill down is executed.");
});

onInitialLoadingFinished(handler) event

Adds a handler on org chart initial loading finished event. It is triggered when Org Chart is loaded for the first time.

Example

api.onInitialLoadingFinished(() => {
  console.log("Initial loading is finished.");
});

onLoadingStarted(handler) event

Adds a handler on org chart loading started event. It is triggered when progress indicator is showed.

Example

api.onLoadingStarted(() => {
  console.log("Loading is started.");
});

onLoadingFinished(handler) event

Adds a handler on org chart loading finished event. It is triggered when progress indicator is hidden.

Example

api.onLoadingFinished(() => {
  console.log("Loading is finished.");
});

onLayoutChanged(handler) event

Adds a handler on org chart layout changed event. It is triggered when a layout is changed in the org chart dropdown menu.

Example

api.onLayoutChanged(() => {
  console.log("Loading is finished.");
});