Splunk Search

Highlight entire row in table after the row is clicked

lyderhansen
Engager

I want to highlight an entire row in a table when its clicked. I want this to be persistent so when I click outside the table or go to next or previous page, the row that i clicked is still highlighted until a new row is clicked or the dashboard is refreshed.

This is an example on how i want it to look like:
alt text

This is probably a use case where Javascript is needed. But with minimal knowledge and experience with Javascript this has become a big challenge.

Additional information:
- Splunk Enterprise 7.2
- Dashboard written in SimpleXML
- Looked into the dashboard examples app with no luck
- The dashboard has multiple tables and should work on each one and be independent of each other
- The default highlighter in the "click selector" option in "Format visualization" is not persistant

Thank you in advance!

0 Karma

to4kawa
Ultra Champion

Hi, I tried it but it is difficult.
Table column Simple XML
Even if you look here, the color can be changed only in column units, and the color changes according to the value of the column, so the same value will change the color.

I think it is not only work hard in the CSS.

0 Karma

lyderhansen
Engager

Thank you. Had a look and the it looks like that CSS and JS is the solution. Because what i have tried to do now is to just change one cell not the whole row. And the problem seems to be that changing what value that is being highlighted by using a token is not working. It works on initial load on the dashboard but if you try to change this on a later stage it doesn´t work.

Here is what i have tried this with:

<form>
  <label>Color test</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="colorPickerToken" searchWhenChanged="true">
      <label>Change field to highlight</label>
      <choice value="1">1</choice>
      <choice value="2">2</choice>
      <choice value="3">3</choice>
      <choice value="4">4</choice>
      <choice value="5">5</choice>
      <choice value="6">6</choice>
      <choice value="7">7</choice>
      <choice value="8">8</choice>
      <choice value="9">9</choice>
      <choice value="0">0</choice>
      <default>1</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>In field "int" set color on value $colorPickerToken$</title>
      <table>
        <search>
          <query>| makeresults
                 | eval int="1,2,3,4,5,6,7,8,9,0"
                 | makemv int delim=","
                 | mvexpand int 
                 | eval A="a",B="b",C="c"
                 | table _time int A B C
          </query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="refresh.display">progressbar</option>
        <format type="color">
          <colorPalette type="map">{"$colorPickerToken$":#FF1111}</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</form>
0 Karma
Get Updates on the Splunk Community!

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...