Documentation › JavaScript Events (SharePoint Server 2019/SE)

JavaScript Events (SharePoint Server 2019/SE)

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 function has three input parameters:

Parameter

Description

event

It is the object of the event

box

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

The box object has following properties:

  • $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method.

  • elem – The DOM element of the box.

  • $elemContainer – The property stores jQuery object of the box container element.

You can use this object to set width and height of the box. - elemContainer – The DOM element of the box container.

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 description at the beginning of “Events” section.

Example

//Changes background of boxes for all employees
//from marketing department
renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Department"].contains('Marketing')){
    box.$elem.css({
      'background-color': 'red',
      'border-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 three input parameters:

Parameter

Description

event

The object of the event.

tooltip

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

The tooltip object has following properties:

  • $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method.

  • elem – The DOM element of the details tooltip.

itemData

The business object from the data source. See description at the beginning of “Events” section.

Example

//Changes background for all tooltips of employees
//from marketing department
renderer.onTooltipRendered(function(event, 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 three input parameters:

Parameter

Description

event

The object of the event.

tooltip

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

The searchResult object has following properties:

  • $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method.

  • elem – The DOM element of the search result.

itemData

The business object from the data source. See description at the beginning of “Events” section.

Example

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

onDrilledDown(handler) event

Adds a drilled down event handler. The handler has one input parameter:

Parameter

Description

event

The object of the event.

Example

renderer.onDrilledDown(
  function(event) {
    console.log("Drill down 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

renderer.onInitialLoadingFinished(
  function(){
    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

renderer.onLoadingStarted(
  function(){
    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

renderer.onLoadingFinished(
  function(){
    console.log('Loading is finished');
  }
);

Note

Next review Methods.