Dashboards & Visualizations

Unable to render color to Field when condition is met


Hello and thank you for the review of my issue.

I am attempting to color a field/apply an icon if the field meets a certain criteria. For example, if the field is labeled FILESIZE and the value is > 100. However, I receive no changes to the rendered table.

I've created the following .css/.js files in the proper directory (apps/appname/appserver/static) but my logic does not appear to be properly met. I've tried bumping/restarting splunk which makes me believe my coding needs a little work.
Please see the appropriate search below:


<dashboard script="TOMtest4js.js" stylesheet="TOMtest3css.css">
  <table id="highlight">
      <query>| makeresults | eval FILESIZE = 10000</query>
    <option name="drilldown">none</option>


], function(_, $, mvc, TableView) {

    //Row coloring example with custom, client-side range interpretation

    var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
            // Enable this custom cell renderer for both active_hist_searches and realtime
            return cell.field === 'FILESIZE';
    render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);
            var icon = 'error';
            var range = 'severe';

            // Apply interpretation for string of test
                    if (value > 100) {
                    icon = "check-circle";
                    range = "low";
                    else {
                    icon = "alert";
                    range = "elevated";
                    $td.addClass('icon').html(_.template('<%- value %> <i class="icon-<%-icon%> <%- range %>" title="<%- range %>"></i>', {
                            icon: icon,
                            range: range
                            value: value.toFixed(2)
mvc.Components.get('highlight').getVisualization(function(tableView) {
                    tableView.addCellRenderer(new RangeMapIconRenderer());


td.icon i {
    font-size: 22px;
td.icon .severe {
    color: red;
td.icon .elevated {
    color: orangered;
td.icon .low {
    color: #006400;
0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!