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

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

zd00191 — Wed, 15 Jul 2015 03:30:20 GMT

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;
}

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

jeffland — Thu, 16 Jul 2015 09:18:31 GMT

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.

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

zd00191 — Thu, 16 Jul 2015 12:43:03 GMT

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

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

alacercogitatus — Thu, 16 Jul 2015 12:56:33 GMT

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

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

aljohnson_splun — Thu, 16 Jul 2015 16:18:54 GMT

Splunkweb that is

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

jeffland — Fri, 17 Jul 2015 08:41:22 GMT

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.

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

robettinger — Fri, 05 Aug 2016 09:11:51 GMT

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?

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

Cuyose — Tue, 28 Aug 2018 19:07:26 GMT

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

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

sandyIscream — Wed, 10 Apr 2019 17:40:09 GMT

@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.