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

Error rendering macro 'rw-search'

null

Versions Compared

Key

  • 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 ' + subTabAPI.name);
});

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 = this.apis.canvas.select('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');
                           tHead.appendChild(headerRow);
                           tableElement.appendChild(tHead);

                           //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 = field.name;
                                    headerRow.appendChild(th);
                           });
           
                           let tbody = document.createElement('tbody');
                           tableElement.appendChild(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;
                                             tr.appendChild(td);
                                    });
                                    tbody.appendChild(tr);
                               });
           
                                //Now we've done all that we want to get the custom_table element and insert the table there
                                let customTable = this.apis.canvas.select('custom_table');
                                customTable.innerHTML = ''; //Clear any previous table that might be there
                                customTable.appendChild(tableElement); //Append our new table
           
                  });
       
                  this.outputTypes.push({
                            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
        //tab
        this.outputTypes.forEach(outputObject => {
                  outputObject.reportAPI.removeOutputType(outputObject.key)
        });
};

...