change field value font color in a table

[thambisetty]

Hi
below is my table in a dashboard:

severity count

High 1004
Low 12000
Medium 10000

my question is how to show entire line in red color which is having High severity.
please help me anyone i tried application.js and application.css
here is my application.js and application.css

application.js

if( Splunk.Module.SimpleResultsTable ){
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {

 renderResults: function($super, htmlFragment) {
     $super(htmlFragment);

     if (this.getInferredEntityName()=="events") {
         this.renderedCount = $("tr", this.container).length - 1;
     }

     $.each( $('.simpleResultsTable td'), function(index, value) {
         $(this).attr('data-value', $(this).text() );
     });
 }

});

application.css

.SimpleResultsTable tr td.d[field="severity"][data-value="High"]{
font-weight: bold;
background-color: #C42323;
color: white;
}

please help me on this..

[stephanefotso]

I hope this could help you. just test it.
you'll have to put js and css files in the folowing directory: your_app_name / appserver / static , and do not forget to restart splunk.
Here is the search i will use: (index=_internal sourcetype=* | stats count as total_count by sourcetype ) and i will change the font of the row where "splunkd_access" is a sourcetype. lets go!

table_row_highlighting.xml

 <dashboard script="table_row_highlighting.js" stylesheet="table_decorations.css">
     <label>font_of_single_table_string</label>
     <row>
         <table id="highlight">
             <title>Row Coloring</title>
             <searchString>index=_internal sourcetype=*  | stats count as total_count by sourcetype</searchString>
             <earliestTime>-24h</earliestTime>
             <option name="drilldown">none</option>
         </table>
     </row>
 </dashboard>

table_row_highlighting.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 the sourcetype field
             return _([ 'sourcetype']).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var value = String(cell.value);
            // Apply interpretation for number of historical searches
             if (cell.field === 'sourcetype') {
                  if (value==="splunkd_access" ){
                     $td.addClass('range-cell').addClass('range-elevated');
                 }
             }
             $td.text(value.toString()).addClass('string');
         }
     });
     mvc.Components.get('highlight').getVisualization(function(tableView) {
         // Add custom cell renderer
         tableView.table.addCellRenderer(new CustomRangeRenderer());
         tableView.on('rendered', 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);
             });
         });
         // Force the table to re-render
         tableView.table.render();
     });
 });

table_decorations.css

/* Row Coloring */

 #highlight tr.range-elevated td {
     background-color: #ffc57a !important;
     font-weight: bold;
     color:blue;
 }

[0YAoNnmRmKDg]

Thank you so much - i used this to highlight status words instead of numbers - awesome!

[splk]

Upvote! All Splunk Examples are only with numbers, your example shows how to handel also text values in cells.

@Splunk, please update your examples!

[thambisetty]

how to use code the which showing bottom of the each dashboard.

[tom_frotscher]

Hi,
there is a example implementation of this feature in the "Splunk 6.x Dashboard Example App". The example is called "Table Row Highlighting" and provides a simple xml example, together with the corresponding js and css files. This should be a good startingpoint for you.

Greetings

Tom

[thambisetty]

in table row highlighting they are highlighting by using numeric values now i want to highlight by using text inside the field.please help me
// Apply interpretation for number of historical searches
if (cell.field === 'severity') {
if (value =='High') {
$td.addClass('range-cell').addClass('range-elevated');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'severity') {
if (value == 'Low') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value.addClass('string');
}

[tom_frotscher]

What you tried is the right way:

if (cell.field === 'severity') { 
  if (value =='High') { 
   $td.addClass('range-cell').addClass('range-elevated'); } }

But right before these lines, you define what is in the value variable. In the original piece of code it looks like this:
var value = parseFloat(cell.value);

This parses the string value of the cell to a number. But in your case, you don't want to get a number from the cell, instead you just want to the string.

so try to replace this with:
var value = cell.value;

[thambisetty]

 return _(['severity']).contains(cell.field);
    },
    render: function($td, cell) {
        // Add a class to the cell based on the returned value
        var value = cell.value;
        // Apply interpretation for number of historical searches
        if (cell.field === 'severity') {
            if (value=='High') {
                $td.addClass('range-cell').addClass('range-elevated');
            }
        }
        // Apply interpretation for number of realtime searches
        if (cell.field === 'severity') {
            if (value=='Low') {
                $td.addClass('range-cell').addClass('range-severe');
            }
        }
        // Update the cell content
    $td.text(value.addClass('string');
    }
});

i am getting every row in a green color even though i tried above snippet

[tom_frotscher]

If everything is green, there should be a problem with your if clauses or the check for cell.field==='severity'. Because in the css it looks like green is the default color. You can use a debuger or manually look what values your variables have with something like this:
console.log(cell.field)
or
console.log(value)

and then look at your browsers web console.

For example use this:

  return _(['severity']).contains(cell.field);
 },
 render: function($td, cell) {
     // Add a class to the cell based on the returned value
     var value = cell.value;
     // Apply interpretation for number of historical searches
     if (cell.field === 'severity') {
         console.log(value + "High case");
         if (value=='High') {
             $td.addClass('range-cell').addClass('range-elevated');
         }
     }
     // Apply interpretation for number of realtime searches
     if (cell.field === 'severity') {
         console.log(value + "Low case");
         if (value=='Low') {
             $td.addClass('range-cell').addClass('range-severe');
         }
     }
     // Update the cell content
 $td.text(value.addClass('string'));
 }
});

[thambisetty]

console log

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)
Resource interpreted as Script but transferred with MIME type text/plain: "http://10.215.3.195:8000/en-GB/static/@207789:10003/app/Symantec_DLP/table_row_highlighting.js". mtd_dlp_incidents?earliest=0&latest=:676
Uncaught SyntaxError: Unexpected token ; table_row_highlighting.js:38
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi) mvc.js:6
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) mvc.js:6
Resource interpreted as Image but transferred with MIME type image/x-png: "http://10.215.3.195:8000/en-GB/static/@207789/img/skins/default/loading_medium_green_2x.png".

[thambisetty]

and one more thing what ever is appearing on the dashboard it is not showing the color when i generated pdf.

[thambisetty]

and one more thing what ever is appearing on the dashboard it is not showing the color when i generated pdf.