How to highlight or change the color of a selected value in a table when clicked by the user?

[kamal_jagga]

Hi,

I have created a dashboard using a form.
I have a table having 3 columns with multiple rows.

Also, i have created a drilldown search below it. The search runs according to value selected (clicked) in above table.
Now, to enhance user experience, I want to highlight/display/change color of value on which the user clicked.

Kindly advise.

[bjoernjensen]

Using custom Javascript with CSS could work here.
Details: http://docs.splunk.com/Documentation/Splunk/6.2.2/Viz/CustomizeSimpleXML

code not tested

CSS

.highlighted-cell {
   background-color: red !important;
}

JS

// row1: since your dashboard is devided by rows (starting with 1), your table should reside in a certain row. 
...
var lastTd=$("#someNotExistentDiv");
$("#row1").find('td').click( function() {
   lastTd.toggleClass("highlighted-cell");
    lastTd=$(this);
    $(this).toggleClass("highlighted-cell");
  } );
...

You have to add both files to $SPLUNK_HOME$/etc/apps/myCoolApp/appserver/static. After adding the files you need to restart Splunk. To make sure changes within a file (splunk already knows, since you restarted splunk) takes place, you could call a debug refresh: within a browser open your equivalent of: http_//SPLUNKSERVER:8000/en-GB/debug/refresh. Moreover to know upon what your dashboard behaves: having the dashboard open, look into the dev-tools of your browser, open the loaded sources (looking for your CSS / JS file) and within that file look at the position of your last changes.