How to set colors in cells of a table according to the condition of another cell

How to set colors in cells of a table according to the condition of another cell

In Splunk it’s very easy to set colors in a cell, according to the condition of that cell only. But did you ever thought about something like this, where we can we set colors in cells of a table according to the condition of another cell?

It can be confusing for you so let me explain with an example, suppose two fields are there “min” and “status1”.

Now we are going to set colors in the cells of field “status1” in the basis of the field “min” and our condition is, for the field value “Completed” and “Fatal” it will be always green but in case of “Pending” it will depend on field “min”. Which is described in the below table.

Now, what can we do for these things, confused? Don’t worry you are landed in right place. So let’s start.

At first, we need to append “|1 “,” |2 “,” |5” where “|5” is for Green,” |2” is for Orange, “|1” is for red, according to our given condition i.e. in respect to “min” we going to append with the values of “status1”.

After doing this it will look like this.

In the second step, we need to create java-script and CSS files, dot worry we will do that for you. Those files are given below. ( my.js )

require([

     'underscore',

     'jquery',

     'splunkjs/mvc',

     'splunkjs/mvc/tableview',

     'splunkjs/mvc/simplexml/ready!'

 ], function(_, $, mvc, TableView) {

    

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({

         canRender: function(cell) {

             return _(['status1','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();

             });

         }

     }   

 });

And the CSS file is coming next. ( new.css )

.css_for_1 {

 background-color:red;

 }

 .css_for_3 {

 background-color:orange;

 }

 .css_for_5 {

 background-color:green;

 }

In the third step just put both of these files in the following path.

$SPLUNK_HOME/etc/apps/<app name>/appserver/static

And restart your Splunk server.

In the fourth and final step open the dashboard, click edit and go-to source code then within the dashboard write the file names of you java-script and CSS. also provide the table id which is mentioned in the java-script. as shown in the below figure.

That’s it now the ball is in our coat, save and refresh the page once and changes will be in front of you.

I hope your time is not wasted here, and that’s all about set colors in cells of a table according to the condition of another cell.

Happy Splunking!!