Dashboards & Visualizations

Java script to have return with wildcards

Rukmani_Splunk
Path Finder

Hi I am using java script to change teh column value color in splunk …

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function (cell) {
              return _('source').contains(cell.field);
          },

i want this with wildcard like this column to have any value before

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function (cell) {
              return _('*source').contains(cell.field);
          },
Labels (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Rukmani_Splunk 

Can you please try this?

canRender: function(cell) {
            var _lst = cell.field.match('.*source') // Provide your matching criteria
            var _other_lst = ['A', 'Version', 'Version_A'] // In case you have additional Column List
            var list = $.merge(_lst ? _lst : [], _other_lst)
            return _(list).contains(cell.field);
        },

 

KV 

View solution in original post

Rukmani_Splunk
Path Finder

Hi  Thanks for your response .. But  it  has not  worked for me.

 

My  table is like

sourcetype      source    time::count 

web file             access        20

 

my   dashboard is like 

dashboard script="table_high2.js" stylesheet="test.css">
<label>test1</label>
<row>
<panel>
<html>
<style>
.css_for_green{
background-color:#65A637 !important;
}
.css_for_yellow{
background-color:#FFFF00 !important;
}
.css_for_red{
background-color:#FF0000 !important;
}
.css_for_grey{
background-color:#EEE000 !important;
}

</style>
</html>
<table id="tableWithColorBasedOnAnotherField">
<search>
<query>index=_internal |stats count by sourcetype,source | rename count as "time::count" </query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">row</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>

 

Java script  based on your input 

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

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
var list = cell.field.match('*count') // Provide your matching criteria

return _(list).contains(cell.field);
},

render: function ($td, cell) {

var val = cell.value;

if (val < 5) {
$td.addClass("range-cell").addClass("css_for_green")
}
else if (val <10) {
$td.addClass("range-cell").addClass("css_for_yellow")
}
else if (val > 20 ) {
$td.addClass("range-cell").addClass("css_for_red")
}

}
});

var sh = mvc.Components.get("tableWithColorBasedOnAnotherField");
if (typeof (sh) != "undefined") {
sh.getVisualization(function (tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}

var sh = mvc.Components.get("tableWithColorBasedOnAnotherField1");
if (typeof (sh) != "undefined") {
sh.getVisualization(function (tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
});

 

Sourcetype 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Rukmani_Splunk 

var list = cell.field.match('.*count')

 instead of 

var list = cell.field.match('*count')

 

It's working for me.

Screenshot 2021-08-21 at 10.21.34 AM.png

KV

 

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Rukmani_Splunk 

Can you please try this?

canRender: function(cell) {
            var _lst = cell.field.match('.*source') // Provide your matching criteria
            var _other_lst = ['A', 'Version', 'Version_A'] // In case you have additional Column List
            var list = $.merge(_lst ? _lst : [], _other_lst)
            return _(list).contains(cell.field);
        },

 

KV 

Rukmani_Splunk
Path Finder

Hi  Thanks a lot for your patience . But  i  get  the  belwo  error when ever  i  check  the developer tools.

"is not defined
at child.canRender "

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Rukmani_Splunk 

Can you please share you code and sample Output of your search?

0 Karma

Rukmani_Splunk
Path Finder

i  havent cleared the history and it  worked  thanks a lot  ..

u r a genius :):):).. i  will  accept  it as solution  .. will  this one for two  fields

 

var test1 = cell.field.match('.*count') // Provide your matching criteria

var test2 = cell.field.match('.*count1')

var list = $.merge(test1 ? test1 : [], test2)

return _(list).contains(cell.field);

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Rukmani_Splunk 

Just replace 

var list = $.merge(test1 ? test1 : [], test2)

with

var list = $.merge(test1 ? test1 : [], test2 ? test2 : [])

 

🙂

KV

 

Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Index This | What travels the world but is also stuck in place?

April 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Realizing the full potential of your Splunk investment requires more than just understanding current usage; it ...

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

As data volumes continue to grow and environments become more distributed, managing and optimizing data ...