I have multiple columns in my table .Fields having values either "Yes" or "No". Yes will be displayed as check-circle icon and No will be displayed as x-circle icon.Whats the missing thing in the below js.
Eg. Wireless and VSP are the fields .Below is the js .
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {
No: 'x-circle',
Yes: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the range field
return cell.field === 'Wireless';
},
render: function($td, cell) {
var icon = 'question';
// Fetch the icon for the value
if (ICONS.hasOwnProperty(cell.value)) {
icon = ICONS[cell.value];
}
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- Wireless %>" title="<%- Wireless %>"></i>', {
icon: icon,
Wireless: cell.value
}));
}
});
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the range field
return cell.field === 'VSP';
},
render: function($td, cell) {
var icon = 'question';
// Fetch the icon for the value
if (ICONS.hasOwnProperty(cell.value)) {
icon = ICONS[cell.value];
}
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('', {
icon: icon,
VSP: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html
Following is a run anywhere dashboard example with both options
Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.
<dashboard script="table_with_icon.js">
<label>Check Mark and Cross Using Simple XML</label>
<init>
<!-- Unicode Characters for Check and Cross -->
<!-- https://emojipedia.org/heavy-check-mark/ -->
<!-- https://emojipedia.org/cross-mark/ -->
<set token="tokCheckGreen">✔️</set>
<set token="tokCrossRed">❌</set>
</init>
<row>
<panel>
<html depends="$alwaysHideCSSPanel$">
<style>
#tableWithUnicodeIcon td{
text-align: center;
}
</style>
</html>
<table id="tableWithUnicodeIcon">
<title>Table with Unicode Icons (Simple XML)</title>
<search>
<query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
LAN=substr(LAN,1,1),
None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
LAN=if((LAN%2)==0,"Yes","No"),
None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None
[| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</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">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
<row>
<panel>
<html depends="$alwaysHideCSSPanel$">
<style>
#tableWithJSIcon td.icon {
text-align: center;
}
#tableWithJSIcon td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
#tableWithJSIcon td.icon .No {
color: red;
}
#tableWithJSIcon td.icon .Yes {
color: #006400;
}
</style>
</html>
<table id="tableWithJSIcon">
<title>Table with JS Icon</title>
<search>
<query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
LAN=substr(LAN,1,1),
None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
LAN=if((LAN%2)==0,"Yes","No"),
None=if((None%2)==0,"Yes","No")
| table sno *</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">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js
:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
console.log("Inside Script");
// Translations from rangemap results to CSS class
var ICONS = {
No: 'x-circle',
Yes: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Only use the cell renderer for the range field
return _(["Wireless", "LAN", "None"]).contains(cell.field);
},
render: function ($td, cell) {
var icon = 'question';
// Fetch the icon for the value
if (ICONS.hasOwnProperty(cell.value)) {
icon = ICONS[cell.value];
}
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
icon: icon,
range: cell.value
}));
}
});
mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
@Nadhiyaa while I will be posting a fix with Simple XML JS extension, I would like to point out that there is another option to add icons to table using Unicode characters in Splunk as well. Refer to one of the questions: https://answers.splunk.com/answers/659050/unicode-characters-in-dashboardssearches.html
Following is a run anywhere dashboard example with both options
Option 1) Using unicode characters in Simple XML Dashboard.
Option 2) Using Simple XML JS Extension to add icon to cell on render.
<dashboard script="table_with_icon.js">
<label>Check Mark and Cross Using Simple XML</label>
<init>
<!-- Unicode Characters for Check and Cross -->
<!-- https://emojipedia.org/heavy-check-mark/ -->
<!-- https://emojipedia.org/cross-mark/ -->
<set token="tokCheckGreen">✔️</set>
<set token="tokCrossRed">❌</set>
</init>
<row>
<panel>
<html depends="$alwaysHideCSSPanel$">
<style>
#tableWithUnicodeIcon td{
text-align: center;
}
</style>
</html>
<table id="tableWithUnicodeIcon">
<title>Table with Unicode Icons (Simple XML)</title>
<search>
<query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
LAN=substr(LAN,1,1),
None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
LAN=if((LAN%2)==0,"Yes","No"),
None=if((None%2)==0,"Yes","No")
| foreach LAN Wireless None
[| eval "<<FIELD>>"=if('<<FIELD>>'=="Yes","$tokCheckGreen$","$tokCrossRed$")]
| table sno *</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">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
<row>
<panel>
<html depends="$alwaysHideCSSPanel$">
<style>
#tableWithJSIcon td.icon {
text-align: center;
}
#tableWithJSIcon td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
#tableWithJSIcon td.icon .No {
color: red;
}
#tableWithJSIcon td.icon .Yes {
color: #006400;
}
</style>
</html>
<table id="tableWithJSIcon">
<title>Table with JS Icon</title>
<search>
<query>| makeresults count=5
| fields - _time
| streamstats count as sno
| eval Wireless=random(), LAN=random(), None=random()
| eval Wireless=substr(Wireless,1,1),
LAN=substr(LAN,1,1),
None=substr(None,1,1)
| eval Wireless=if(Wireless%2==0,"Yes","No"),
LAN=if((LAN%2)==0,"Yes","No"),
None=if((None%2)==0,"Yes","No")
| table sno *</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">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
Following is the JS required for Option 2 as per your Simple XML JS extension approach table_with_icon.js
:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
console.log("Inside Script");
// Translations from rangemap results to CSS class
var ICONS = {
No: 'x-circle',
Yes: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Only use the cell renderer for the range field
return _(["Wireless", "LAN", "None"]).contains(cell.field);
},
render: function ($td, cell) {
var icon = 'question';
// Fetch the icon for the value
if (ICONS.hasOwnProperty(cell.value)) {
icon = ICONS[cell.value];
}
// Create the icon element and add it to the table cell
$td.addClass('icon').html(_.template('<i class="icon-<%-icon%> <%- range %> title="<%- range %>"></i>', {
icon: icon,
range: cell.value
}));
}
});
mvc.Components.get('tableWithJSIcon').getVisualization(function (tableView) {
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});
});
@Nadhiyaa could you please confirm whether one of above options worked for you or not?
Hi
Try this
<dashboard script="table.js">
<label>Icon</label>
<row>
<html>
<head>
<style>
.yes {
background-image: url('/static/app/search/images/yes.png') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
.no {
background-image: url('/static/app/search/images/no.png') !important;
background-repeat: no-repeat !important;
background-size: 20px 20px; !important;
}
</style>
</head>
</html>
</row>
<row>
<panel>
<table id="sample">
<search>
<query>| makeresults
| eval Wireless = "Yes,No,Yes,Yes,No"
| makemv delim="," Wireless
| mvexpand Wireless
| appendcols
[| makeresults
| eval VSP = "No,No,Yes,Yes,Yes"
| makemv delim="," VSP
| mvexpand VSP ]
| appendcols
[| makeresults
| eval Others = "1,2,3,4,5"
| makemv delim="," Others
| mvexpand Others ]
| table Wireless,VSP,Others</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>
java script:table.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 _(['Wireless','VSP']).contains(cell.field);
},
render: function($td, cell) {
var value = cell.value;
if(value=="Yes" )
{
$td.html("<div class='yes'> </div>")
}
else
{
$td.html("<div class='no'> </div>")
}
}
});
var sh = mvc.Components.get("sample");
if(typeof(sh)!="undefined") {
sh.getVisualization(function(tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
});
In this sample, I had placed two images yes.png and no.png under /opt/splunk/etc/apps/search/appserver/static/images/
modify it accordingly to your need.