@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();
});
}
}
});
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.
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.
@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...
Hi @premranjithj
Can you please share your sample js and XML code?
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
<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>=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</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();
});
}
}
});
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.
@kamlesh_vaghela thanks much.. little confused didnt checked the id..
Hi @premranjithj
is it worked?
Hi @premranjithj
I have converted this comment into the answer. Please accept and upvote it to help the community.
Happy Splunking
yes worked and accepted the answer. Thanks 🙂
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;
}
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
<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>=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</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();
});
}
}
});