How can I highlight table cells that can either be multi-value or single value?

[richielynch89]

Hi,

I am trying to highlight values in my table but I am having trouble implementing it because the table cells can either be single-value cells or multi-value cells.

If I only needed to highlight single-value cells then I can use the Splunk example "Table Cell Highlighting" from the "simple_xml_examples" Splunk app.
This works fine for me when highlighting table cells that only have one value.

If I only needed to highlight each value in multi-value cells in my table, then I could use the example from the link below which also works perfectly:
https://answers.splunk.com/answers/694420/is-it-possible-to-highlight-a-value-within-a-multi-1.html

My problem is that my cells can either be single-value or multi-value so I have to write a script that will be able to highlight the cell/value whether it is a multi-value or single-value cell.

For example, if I had the following field/values:
Field_A = Apple
Field_B = Banana
Field_C = Orange, Apple (lets say this is a multi-value field).

If I wanted to highlight all "Apple" values in my table, I would expect to see the following:

In a single-value cell, you can see that the whole cell is highlighted (Field_B).
In a multi-value cell, you can see that the just the value is highlighted (Field_D).

I've tried combining code from both js scripts but have had no luck so far.
I've also tried using the two separate js files on the dashboard which worked at the beginning but later I noticed that, in some cases, it was displaying multi-value cells as comma separated single-value cells.

Did anyone implement this before?

Thanks!

[niketn]

Not sure if you are trying to find a word and highlight, can you check out the following answer and see if it fits the need? https://community.splunk.com/t5/Dashboards-Visualizations/How-to-add-css-class-to-table-field-by-inp...

If not please add more details on your use case.

[richielynch89 · Accepted solution]

No, my overall aim was to highlight values in multi-value cells. You were able to help me achieve this in the following link:

https://community.splunk.com/t5/Dashboards-Visualizations/Is-it-possible-to-highlight-a-value-within...

My issue was that, when I use your solution above, it doesn't highlight cells that have single values which I had in one of my tables.

I tried to mash javascript code to highlight single values cells with your javascript code but my Javascript skills are poor.

Instead, I implemented a workaround where I appended "+ " (that's a blank space after the plus sign) to the single value cell and then I split the string by "+" to turn it into a multi-value cell.

The first value is the initial value and the 2nd value is a blank space

In javascript then you can write a condition so that cells that are equal to " " will not be highlighted.

[niketn]

@richielynch89 can you try the following updated JS and confirm?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
    mvc.Components.get('highlight').getVisualization(function (tableView) {
        tableView.on('rendered', function () {
            setTimeout(function () {
                $('div#highlight table td[data-cell-index="1"] div.multivalue-subcell,td[data-cell-index="1"]').each(function () {
                    var strMultiValueTest = $(this).text();
                    if(strMultiValueTest.length>8){
                        // DO NOTHING - td for multivalue need not be handled.
                    }
                    else if (strMultiValueTest < "05:00:00") {
                        $(this).css("background-color", "green");
                    }
                    else if (strMultiValueTest >= "05:00:00" && strMultiValueTest <= "16:00:00") {
                        $(this).css("background-color", "orange");
                    } else {
                        $(this).css("background-color", "red");
                    }
                });
            }, 100);
        });
    });
});

 While selecting the Table Cell I have added condition for td  being highlighted if it is not a multi-value field. (Assuming multivalue cell will have length >8 because of multiple HH:MM:SS format.)

Also replace Existing Simple XML CSS override with the following:

      <html>
        <style>
          #highlight td[data-cell-index="1"]{
            padding: 0px;
            text-align: center;
          }
        </style>
      </html>