Like what you see? Have a play with our trial version.

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


let subTabAPI = this.apis.subtab;  

this.bodyClick = function() {
         console.log('A click was recorded on ' +;

this.onRender = function() {
       document.body.addEventListener('click', this.bodyClick);

this.onRemove = function() {
       document.body.removeEventListener('click', this.bodyClick);


The “this” object will contain an “apis” parameter. This object will contain the following objects:

These can then be retrieved like so:


this.outputTypes = []; //Create an array of outputKeys and what report API they came from for easy removal

this.onRender = function () {
         let campaignSummary ='Campaign Summary');
         campaignSummary.onReportLoad.then(() => {
                  let reportAPI = campaignSummary.reportAPI;
                  let outputKey = reportAPI.registerOutputType('dataset', reportDataset => {
                           let tableData = [];
                           let tableElement = document.createElement('table');
                           //Give the table a class name so we can style it
                           tableElement.className = "codeModeExampleTable";
                           let tHead = document.createElement('thead');
                           let headerRow = document.createElement('tr');

                           //Loop over all the reports fields to get their names. The fields will be
                           //in the same order as the columns in the dataset
                           reportAPI.fields.forEach(field => {
                                    let th = document.createElement('th');
                                    th.innerText =;
                           let tbody = document.createElement('tbody');
                           //Loop over the rows in the dataset and create a table row at each level.
                           reportDataset.forEach(rowData => {
                                    let tr = document.createElement('tr');
                                    //Loop over the columns and append the formattedValue from each item
                                    rowData.forEach(columnData => {
                                             let td = document.createElement('td');
                                             //columnData will have rawValue, formattedValue and htmlFormattedValue.
                                             td.innerText = columnData.formattedValue;
                                //Now we've done all that we want to get the custom_table element and insert the table there
                                let customTable ='custom_table');
                                customTable.innerHTML = ''; //Clear any previous table that might be there
                                customTable.appendChild(tableElement); //Append our new table
                            key: outputKey,
                            reportAPI: reportAPI

this.onRemove = function () {
         //Remove the output types so that we aren't generating extra tables each time we come back to this
        this.outputTypes.forEach(outputObject => {