Why am I unable to get Table Cell Highlighting to work with my current XML, CSS, and JavaScript files?

[zd00191]

I know there area a bunch of questions about table cell highlighting out there. I have looked at all of them and have tried to get my .js and .css files correct but it will not work. Please help! I have copied my xml, .js and .css file below. I really appreciate everyone on here answering questions.

XML

<dashboard script="table_cell_highlighting.js" stylesheet="table_cell_highlighting.css">
  <label>Application Health Monitor-ZD-Cell Highlight</label>
  <description>AHM Using Cell Highlight Rangemaps</description>
  <row>
    <table id="highlight">
      <title>Application Health Monitor</title>
      <searchString>tag="BOFC" OR tag="Compass_Asia" OR tag="Compass_Global" OR tag="Datapass_CCNA" OR tag="Datapass_CPS" OR tag="IPM" OR tag="Picasso" OR tag="SAP_APO" OR tag="SAP_CRM_Call_Center" OR tag="SAP_Finance_Logistics" OR tag="SAP_HR" OR tag="SAP_MDMaint" OR tag="SAP_MDMgmt" OR tag="SAP_SRM" OR tag="SAP_eSourcing" OR    tag="SDW" OR tag="Wall_Street" OR tag="myKO_Portal" OR tag="myKO_UCM" LocID="-7" SbuID="-7" |dedup tag | rex field=ResponseDisplay "(?<Application_Response>\d+)" | rex field=AvailabilityDisplay "(?<Application_Availability>\d+)"  |table tag Application_Availability Application_Response |rename tag AS "Application"</searchString>
      <earliestTime>-30m</earliestTime>
      <latestTime>now</latestTime>
      <option name="drilldown">none</option>
      <option name="count">20</option>
      <option name="wrap">true</option>
      <option name="rowNumbers">false</option>
      <option name="dataOverlayMode">none</option>
    </table>
  </row>
</dashboard>

.JS

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview'A,
    '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 availability and the response field
            return _(['Application_Availability', 'Application_Response']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);

            // Apply interpretation for availabiliy
            if (cell.field === 'Application_Availability') {
                if (value < 50) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 50 && value < 100) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value = 100) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }

            // Apply interpretation for response
            if (cell.field === 'Application_Response') {
                if (value < 50) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value > 50 && value < 100) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value == 100) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }

            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });

    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).addClass(this.className);
           // });
        //});

.CSS

/* Cell Highlighting */

/*
#highlight td {
    background-color: #c1ffc3 !important;
}
*/

#highlight td.range-low {
    color: green;
    font-weight: bold;
}

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

#highlight td.range-severe {
    background-color: red !important;
    font-weight: bold;
}

[sandyIscream]

@robettinger If you want to highlight text or string values in table cell, Then you need to add the following code.

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

I have tried it in my case and it works.

Please let me know if you encounter any other problems.

[alacercogitatus · Accepted solution]

When adding custom JS and CSS to a Simple XML dashboard, Splunk MUST be restarted for those to be pulled into the dashboard.

[robettinger]

Hi,

Most of the examples I see are related to highlight a numeric cell. What if I want to highlight a date or a string, such as OK or ERROR?

From the js script:

        // Update the cell content
        $td.text(value.toFixed(2)).addClass('numeric');

Should this change too?

[Cuyose]

I am not able to get this to work either in Splunk Ent 7.1 with text values.

[aljohnson_splun]

Splunkweb that is

[jeffland]

Did you make sure that your .js and .css files are loaded on the dashboard? You can confirm this with your browser, usually pressing F12 to get the tools.
Right-click on your table cell you would like to see colored and select "inspect element" (or similar). This should directly take you to the element in the DOM, and you should see that the cells have the class like "range-severe" as you specified in the .js code. That view should also tell you which .css styles are applied to this item and from which source.

[zd00191]

I do not believe that my .js and .css are loading into the dashboard. Do you think that restarting splunk could do it?

[jeffland]

As mentioned in the answer, YES 🙂 That's also stated in every documentation there is on using css in dashboards, and usually suggested as the first solution in any answer to this topic... it surprises me that you didn't come across this.