topic Re: Table cell renderer does not work on Firefox in Dashboards & Visualizations

Table cell renderer does not work on Firefox

VatsalJagani — Sat, 06 Jun 2020 21:23:16 GMT

I've very similar javascript as below in my dashboard which adds up the color in the table. As I've updated dashboard.css I cannot utilize XML color palette, so I had to use table cell renderer.

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Point-C
             return _(['My Column Name', 'Name']).contains(cell.field);
         },
         render: function($td, cell) {
             // Point-D
             if(cell.value=="red" || cell.value=="green" || cell.value=="yellow")
             {
                 $td.html("<div class='circle_"+cell.value+"'></div>")
             }
             else if(cell.value=="NoData" || cell.value=="null")
             {
                 $td.html("<div class='align_center'></div>")
             }
             else
             {
                 $td.html("<div class='align_center'>"+cell.value+"</div>")
             }
         }
     });

     //List of table IDs to add icon
     var tableIDs = ["Mytable1", "Mytable2"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                // Point-A
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
                 // Point-B
             });
         }
     }     
 });

My code is able to execute properly in Chrome.
While running in Firefox it reaches Point-A and Point-B but not to Point-C or Point-D. Any idea what can be wrong or any workaround.
While in Firefox also the issue is intermittent, at some random time out of two tables any one loads as well, but not all the time. Anyone have any idea why TableCellRenderer does not work in firefox sometimes?

Re: Table cell renderer does not work on Firefox

VatsalJagani — Fri, 14 Feb 2020 11:48:45 GMT

The issue is because JS loads before the dashboard. I found a workaround as follows.

Add one line at the end of your JS.

  ...........
                  tableView.table.render();
                  // Point-B
              });
          }
      }
      setToken("wait_for_js_to_load", " ");
  });

Prepend this token in all the table queries which have custom cell renderer. Ex.

$wait_for_js_to_load$ index=main | stats count by sourcetype

I found this issue in Splunk 8.0.1.

Hope this helps other people having same issue.

Re: Table cell renderer does not work on Firefox

niketn — Fri, 14 Feb 2020 13:31:28 GMT

@VatsalJagani this has been a bug in Splunk Table Cell render extension since Splunk 6.6 and above. Please refer to the previous question with a workaround with setTimeout to add a delay before table is rendered().

https://answers.splunk.com/answers/614788/splunk-dashboard-examples-table-row-highlighting-b.html?childToView=615859#answer-615859

Re: Table cell renderer does not work on Firefox

sreichel — Tue, 19 May 2020 18:18:27 GMT

This worked great for me. I found that I needed to use the "submitted" rather than "default" instance.

let sub_tokens = mvc.Components.getInstance("submitted");
...
sub_tokens.set("js_ready", " ");