topic Re: Color individual table cell based on value in All Apps and Add-ons

Color individual table cell based on value

sc0tt — Thu, 03 Oct 2013 14:57:02 GMT

I know that I can color an entire row using the table rowClass param in Sideview like so

<param name="rowClass">$row.fields.range$</param>

and then creating custom css

.Table tr.high td { background-color:#e67918; color:#fff; }
but is there a way to color an individual cell based on a value?

Edit: To expand this question based on the below answers by gpradeepkumarreddy

I think I am missing something. Based on the suggestions below I have the following javascript in /apps/MyApp/appserver/static/application.js but I do not see any classes added to the table.

if ((Splunk.util.getCurrentView() == "live_dashboard") && Splunk.Module.SimpleResultsTable) {
Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
    onResultsRendered: function($super) {
        var retVal = $super();

this.myCustomHeatMapDecorator();
        return retVal;
    },

myCustomHeatMapDecorator: function () {

//Your code goes here
var sessions = (tds[1].innerText) ? tds[1].innerText : tds[1].textContent;
    if(sessions>1000){ //threshold to color
        {
        tr.find("td:nth-child(2)").addClass("colorRed"); //colorRed is a custom css class for a table cell
        }
    }
//end

}

Re: Color individual table cell based on value

pradeepkumarg — Thu, 03 Oct 2013 15:40:13 GMT

You can achieve this by having custom java script code in application.js

my_app/appserver/static/js/application.js

var text = (tds[0].innerText) ? tds[0].innerText : tds[0].textContent;

if(text>10){ //threshold to color
{
tr.find("td:nth-child(1)").addClass("colorRed"); //colorRed is a custom css class for a table cell
}

application.css

td.colorRed{
    background-color:#CC3333;
    color: #000000;
    text-align: center 
}

Re: Color individual table cell based on value

LukeMurphey — Fri, 04 Oct 2013 06:08:33 GMT

Sure, check out this answer: http://answers.splunk.com/answers/83206/color-in-a-table-based-on-values.

Its pretty easy, just drop a bit of Javascript, then do your rendering via stylesheets.

Re: Color individual table cell based on value

sc0tt — Fri, 04 Oct 2013 06:28:01 GMT

Thanks, I'll check this method out as well.

Re: Color individual table cell based on value

sc0tt — Fri, 04 Oct 2013 16:06:45 GMT

Many thanks. However, I'm having some trouble getting this to work. What does the "nth-child(1)" refer to?

Re: Color individual table cell based on value

sc0tt — Fri, 04 Oct 2013 17:38:21 GMT

I'm unable to get the application.js to load. I have it in my_app/appserver/static/js/application.js and I've restarted splunkweb. Any ideas?

Re: Color individual table cell based on value

sc0tt — Fri, 04 Oct 2013 17:40:09 GMT

I was able to get this to work as described, thanks.

Re: Color individual table cell based on value

pradeepkumarg — Fri, 04 Oct 2013 18:33:24 GMT

if ((Splunk.util.getCurrentView() == "my_view") && Splunk.Module.SimpleResultsTable) {
    Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
        onResultsRendered: function($super) {
            var retVal = $super();
            
            this.myCustomHeatMapDecorator();
            return retVal;
        },      
            
myCustomHeatMapDecorator: function () {

//Your code goes here

}

Make sure you refer your current view in the place of my_view

 nth-child(1)

is the first td element in a given tr

You'll have to modify that based on your need.

Re: Color individual table cell based on value

nick — Fri, 04 Oct 2013 18:41:44 GMT

SplunkWeb only really looks on the filesystem for application.js when it's restarted. If there is one there when it restarts, it will try and serve it. If there was not one there when it restarted last, it will steadfastly ignore it. So I think just restart SplunkWeb and your code will start getting loaded. Also note that restarting just splunkweb (splunk restart splunkweb) will not cause anyone to lose auth. In fact the interruption in connectivity will be so brief that most users probably wont even notice it.

Re: Color individual table cell based on value

nlapier2 — Fri, 04 Oct 2013 20:23:13 GMT

I have the same question as sc0tt, but I was unable to successfully implement this answer. It it compatible with Sideview's Table module? I tried replacing every instance of SimpleResultsTable with Table to no avail. Are there any other substitutions I would need to make?

Re: Color individual table cell based on value

LukeMurphey — Fri, 04 Oct 2013 20:31:24 GMT

@nlapier2: which version of Splunk are you using?

Re: Color individual table cell based on value

nlapier2 — Fri, 04 Oct 2013 20:31:55 GMT

I haven't been able to get this solution working. If I just have tr.addClass("colorRed"), it will work as specified and color the entire row red. But when I add in the "td:nth-child(x)" to make tr.find("td:nth-child(x)").addClass("colorRed") it doesn't highlight anything. Am I missing something?

Re: Color individual table cell based on value

nlapier2 — Fri, 04 Oct 2013 20:33:49 GMT

Version 6.

Re: Color individual table cell based on value

nick — Fri, 04 Oct 2013 20:42:25 GMT

Actually, the particular answer we're commentiog on here will not work. The HTML of the modules is not on the page when application.js is loaded, and to do any custom JS here properly you have to do more work that is missing from this code sample, to basically patch/insert yourself into the rendering logic of the module.

Re: Color individual table cell based on value

nick — Fri, 04 Oct 2013 20:43:35 GMT

Yes, the custom JS solution here is tailored just for the SimpleResultsTable module. Sit tight and I will write back soon with an official answer to do this with Table and a customBehavior thereupon. Actually there is a whole feature to do this in Table coming, with no custom code, but that won't release until at least Sideview Utils 3.0 so pretend I didn't say anything.

Re: Color individual table cell based on value

nlapier2 — Fri, 04 Oct 2013 20:47:25 GMT

Thanks, really appreciate it.

Re: Color individual table cell based on value

sc0tt — Fri, 04 Oct 2013 22:20:04 GMT

@nlapier2 I am using Version 6 as well. I had to modify the CSS to get it to work.

.SimpleResultsTable table.simpleResultsTable tr td[field="range"][data-value="high"] { background-color: #C42323; color: #CCCCCC; font-weight: bold; }

@nick is it possible to do this based on numerical comparisons as well (ie data-value>"100")?

Re: Color individual table cell based on value

sc0tt — Sat, 05 Oct 2013 09:13:46 GMT

So the method described by gpradeepkumarreddy will not work unless I modify the Sideview table module?

Re: Color individual table cell based on value

nick — Sat, 05 Oct 2013 15:39:25 GMT

The earlier code sample posted is a rough sketch of the sort of code to use. And the example posted later using customHeatMapDecorator will only work with SimpleResultsTable, NOT Table. In the next version of Sideview Utils you will be able to give your Table modules:

<param name="columns.myFieldName.class">$myClassField$</param> <param name="hiddenFields">myClassField</param>

and then the "myFieldName" column will get the value of the myClassField field as a class. You won't need any custom javascript at all. Can you wait a week or two? I can also email you a tar to use as a beta.

Re: Color individual table cell based on value

sc0tt — Sat, 05 Oct 2013 16:15:30 GMT

Thanks for the clarification. It sounds like the new Table modules will be a very welcomed feature. A beta version of it would be awesome.