How to set class for different fields using JavaScript for changing font color and background color in Splunk table?

812456 — Mon, 04 May 2020 15:55:59 GMT

Hi i am new to Splunk/JavaScript, Need your help for reducing my code, i have created two class for 2 fields, likewise we have 50 fields in splunk table. class is created for changing font and background color based on condition.
With this current approach i need to add/repeat 50 times (i.e.) for all the fields. Each time i need to add/call setTimeout(function() how can i customize the redundancy of the code for creating class and calling the setTimeout function for single time in javascript.
kindly find my code

enter code here

table.js

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

  // Row Coloring Example with custom, client-side range interpretation

 var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
     canRender: function(cell) {
         // Enable this custom cell renderer for both the active_hist_searches and the active_realtime_searches field
         //return _(["LOgType"]).contains(cell.field);
          return true;
     },
     render: function($td, cell) {
         // Add a class to the cell based on the returned value

         var value = cell.value;

         // Apply interpretation for string of autorización
         if (cell.field === "LOgType") {
             if (value == "error") {
                 $td.addClass('range-cell').addClass('range-severe');
             }
         }
         if (cell.field === "ID") {
             if(value!==null) {
                 $td.addClass('range-con').addClass('range-low');
             }
 if (cell.field === "Desc") {
             if(value!==null) {
                 $td.addClass('range-cos').addClass('range-high');
             }
         }

         // Update the cell content
         $td.text(value).addClass("string");
     }
 });

 mvc.Components.get('Table1').getVisualization(function(tableView) {
     tableView.on('rendered', function() {

         setTimeout(function(){
         // Apply class of the cells to the parent row in order to color the whole row
         tableView.$el.find('td.range-cell').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
   setTimeout(function(){
         tableView.$el.find('td.range-con').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
     });
    setTimeout(function(){
         tableView.$el.find('td.range-cos').each(function() {
             $(this).parents('tr').addClass(this.className);
         });
      },100);
     });

`tableView.addCellRenderer(new CustomRangeRenderer()); // Add custom cell renderer, the table will re-render automatically.
});
});

table.css

         #Table1 tr.range-severe td{
            color: red;             
            }
            #Table1 tr td.range-low{
            background-color: #FFC597 !important;            
            }
           #Table1 tr td.range-high{
            background-color: #FFC597 !important;            
            }

Re: How to set class for different fields using JavaScript for changing font color and background color in Splunk table?

niketn — Tue, 05 May 2020 12:42:55 GMT

@812456 while posting code on Splunk Answers use the Code button ( 101010 ), or shortcut Ctrl+K to ensure that special characters do not escape.

I think the better approach for you would be to use the Table Search Manager to get the list of fields you want to iterate and pass to the Cell Render extension as a string array. Refer to one of my older answers, see if it fits your needs: https://answers.splunk.com/answers/618930/how-can-i-get-the-table-cell-colorization-renderin-1.html

topic Re: How to set class for different fields using JavaScript for changing font color and background color in Splunk table? in Splunk Search

How to set class for different fields using JavaScript for changing font color and background color in Splunk table?

Re: How to set class for different fields using JavaScript for changing font color and background color in Splunk table?