Page History

this.onRender = function () {
         //Select the report_1 element from the page canvas through the canvas api
         let report1 = this.apis.canvas.select('report_1');
   
         //The report will begin loading once it is added to the DOM, so it is possible that at this point it hasn't completed yet. So wait for the onReportLoad promise to resolve.
         report1.onReportLoad.then(() => {
                  let changeDisplayType = () => {
                           let currentDisplay = report1.getAttribute('display-type');
                           if(currentDisplay === "CHART") {
                                    currentDisplay = "REPORT";
                           } else {
                                    currentDisplay = "CHART";
                           }
           
                           report1.setAttribute('display-type', currentDisplay);
                  }
                  this.reportChangeTimeout = setInterval(changeDisplayType, 5000);
         });
};

this.onRemove = function () {
         //The SubTab is being removed from the page, we want to stop triggering the reportChange
         clearTimeout(this.reportChangeTimeout);
};

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)
        });
};