Can you help me change the table cell background color based on the value?

[DataOrg]

@kamlesh_vaghela please help me in updating the java script.

Here is a post that is related to my query: https://answers.splunk.com/answering/661894/post.html

i tried updating my column name here — return _(['Desc1','Desc2','Desc3']).contains(cell.field) — but it doesn't work.

i have updated the JavaScript to my column value but it doesn't work. Please help in updating the column.

new column name:

presentversion 
7.6.2.3|1
4.1.32|3
3.5.33.2|3
5.6.23|1
3.2.32|5
7.5.33|5

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(['Desc1','Desc2','Desc3']).contains(cell.field);
         },
         render: function($td, cell) {
             var label = cell.value.split("|")[0];
             var val = cell.value.split("|")[1];

             if(val=="1" || val=="3" || val=="5")
             {
                 $td.html("<div class='css_for_"+val+"'>"+label+"</div>")
             }
             else
             {
                 $td.html("<div class='align_center'>"+label+"</div>")
             }
         }
     });

     //List of table IDs to add icon
     var tableIDs = ["my_table"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
             });
         }
     }    
 });

[kamlesh_vaghela · Accepted solution]

Hi @premranjithj

Have you tried to add presentversion on canRender return value?

return_(['Desc1', 'Desc2', 'Desc3','presentversion']).contains(cell.field);

And your related post link not working.

https://answers.splunk.com/answering/661894/post.html

[DataOrg]

@kamlesh_vaghela . below is the link. i try added in the canrender. no luck
https://answers.splunk.com/answers/661894/how-to-color-cell-contents-with-css-and-js.html#answer-661...

[kamlesh_vaghela]

Hi @premranjithj

Can you please share your sample js and XML code?

[DataOrg]

hi @kamlesh_vaghela
|inputlookup App.csv|join ApplicationName[|inputlookup latversion.csv|eval presentversion=cuurentversion|eval cuurentversion=substr(cuurentversion,1,3)]|eval versioncompat=case(cuurentversion>=Latest_Version,1,cuurentversion>=Supported_Version AND Supported_Version <=Latest_Version,2,true(),3)|rangemap field=versioncompat low=0-1 elevated=1.1-2 severe=2.1-3 default=gray |table ApplicationName Supported_Version presentversion range|eval check=case(range=="low",1,range=="elevated",2,true(),3)|eval presentversion=presentversion."|".check

value in the column "presentversion" will be "7.36.21" kind of mutiple decimal value

sample value:
ApplicationName Supported_Version presentversion range check
Server 5.2 7.6.2.3|1 low 1

application version

  <row>
    <panel>
      <table>
        <search id="my_table1">
          <query>|inputlookup App.csv|join ApplicationName[|inputlookup latversion.csv|eval presentversion=cuurentversion|eval cuurentversion=substr(cuurentversion,1,3)]|eval versioncompat=case(cuurentversion&gt;=Latest_Version,1,cuurentversion&gt;=Supported_Version AND Supported_Version &lt;=Latest_Version,2,true(),3)|rangemap field=versioncompat low=0-1 elevated=1.1-2 severe=2.1-3 default=gray |table ApplicationName Supported_Version presentversion range|eval check=case(range=="low",1,range=="elevated",2,true(),3)|eval presentversion=presentversion."|".check</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="count">7</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>
require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(['presentversion'']).contains(cell.field);
         },
         render: function($td, cell) {
             var label = cell.value.split("|")[0];
             var val = cell.value.split("|")[1];

             if(val=="1" || val=="2" || val=="3")
             {
                 $td.html("<div class='css_for_"+val+"'>"+label+"</div>")
             }
             else
             {
                 $td.html("<div class='align_center'>"+label+"</div>")
             }
         }
     });

     //List of table IDs to add icon
     var tableIDs = ["my_table1"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
             });
         }
     }    
 });

[kamlesh_vaghela]

Hi @premranjithj

Few corrections in your code.

in XML:

Give id to table.

OLD Code:

<table> 
<search id="my_table1">

New:

<table id="my_table1"> 
<search >

JavaScript:

Remove extra single quote from canrender method.

Old:
return _(['presentversion'']).contains(cell.field);

New:
return _(['presentversion']).contains(cell.field);

Please try with this correction and let me know the output.

[DataOrg]

@kamlesh_vaghela thanks much.. little confused didnt checked the id..

[kamlesh_vaghela]

Hi @premranjithj
is it worked?

[kamlesh_vaghela]

Hi @premranjithj
I have converted this comment into the answer. Please accept and upvote it to help the community.

Happy Splunking

[DataOrg]

yes worked and accepted the answer. Thanks 🙂

[kamlesh_vaghela]

And make sure you have added css file also.

<dashboard script="myjs.js" stylesheet="mycss.css">

mycss.css

.css_for_1 {
 background-color:red;
 }
 .css_for_3 {
 background-color:orange;
 }
 .css_for_5 {
 background-color:green;
 }

[DataOrg]

hi @kamlesh_vaghela
|inputlookup App.csv|join ApplicationName[|inputlookup latversion.csv|eval presentversion=cuurentversion|eval cuurentversion=substr(cuurentversion,1,3)]|eval versioncompat=case(cuurentversion>=Latest_Version,1,cuurentversion>=Supported_Version AND Supported_Version <=Latest_Version,2,true(),3)|rangemap field=versioncompat low=0-1 elevated=1.1-2 severe=2.1-3 default=gray |table ApplicationName Supported_Version presentversion range|eval check=case(range=="low",1,range=="elevated",2,true(),3)|eval presentversion=presentversion."|".check

value in the column "presentversion" will be "7.36.21" kind of mutiple decimal value

sample value:
ApplicationName Supported_Version presentversion range check
Server 5.2 7.6.2.3|1 low 1

application version

  <row>
    <panel>
      <table>
        <search id="my_table1">
          <query>|inputlookup App.csv|join ApplicationName[|inputlookup latversion.csv|eval presentversion=cuurentversion|eval cuurentversion=substr(cuurentversion,1,3)]|eval versioncompat=case(cuurentversion&gt;=Latest_Version,1,cuurentversion&gt;=Supported_Version AND Supported_Version &lt;=Latest_Version,2,true(),3)|rangemap field=versioncompat low=0-1 elevated=1.1-2 severe=2.1-3 default=gray |table ApplicationName Supported_Version presentversion range|eval check=case(range=="low",1,range=="elevated",2,true(),3)|eval presentversion=presentversion."|".check</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="count">7</option>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>
require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(['presentversion'']).contains(cell.field);
         },
         render: function($td, cell) {
             var label = cell.value.split("|")[0];
             var val = cell.value.split("|")[1];

             if(val=="1" || val=="2" || val=="3")
             {
                 $td.html("<div class='css_for_"+val+"'>"+label+"</div>")
             }
             else
             {
                 $td.html("<div class='align_center'>"+label+"</div>")
             }
         }
     });

     //List of table IDs to add icon
     var tableIDs = ["my_table1"];
     for (i=0;i<tableIDs.length;i++) {
         var sh = mvc.Components.get(tableIDs[i]);
         if(typeof(sh)!="undefined") {
             sh.getVisualization(function(tableView) {
                 // Add custom cell renderer and force re-render
                 tableView.table.addCellRenderer(new CustomRangeRenderer());
                 tableView.table.render();
             });
         }
     }    
 });