I have the follinwg code from my .js file
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'Application_Availability';
If I want to add inline icons for multiple fields a my table, how do I get the custom icon renderer to read both Application_Availability column and the Application_Response column. Should it look like the code below? Please help. Thanks!
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'Application_Availability', 'Application_Response';
You need to set a proper conditional statement.
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
var allowedCells = ["Application_Availability","Application_Response" ];
return (allowedCells.indexOf(cell.field) > -1 ) ;
It will take the field name cell.field
, and see if it is located in the array allowedCells
. Update that array to whatever field names apply. If it finds it, it will return true
, if not, it will return false
.
You need to set a proper conditional statement.
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
var allowedCells = ["Application_Availability","Application_Response" ];
return (allowedCells.indexOf(cell.field) > -1 ) ;
It will take the field name cell.field
, and see if it is located in the array allowedCells
. Update that array to whatever field names apply. If it finds it, it will return true
, if not, it will return false
.
I am having issues getting this to work. I have copied my .js and .css files below. I triple checked them but may be I missed something.
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
var allowedCells = ["Application_Availability","Application_Response"] return (allowedCells.indexOf(cell.field)) > -1;
},
render: function($td, cell) {
var count = cell.value;
// Compute the icon base on the field value
var icon;
if(count <= 50) {
icon = 'severe';
} else if(count > 50 && count < 100) {
icon = 'elevated';
} else if(count == 100) {
icon = 'low';
} else {
icon='none';
}
// Create the icon element and add it to the table cell
$td.addClass('icon-inline numeric').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
icon: icon,
text: cell.value
}));
}
});
mvc.Components.get('table1').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomIconRenderer());
// Force the table to re-render
tableView.table.render();
});
});
.css=====================================================
/* Custom Icons */
td.icon {
text-align: center;
}
td.icon i {
font-size: 25px;
text-shadow: 1px 1px #aaa;
}
td.icon .severe {
color: red;
}
td.icon .elevated {
color: yellow;
}
td.icon .low {
color: #006400;
}
/* Row Coloring */
#highlight tr td {
background-color: #c1ffc3 !important;
}
#highlight tr.range-elevated td {
background-color: #ffc57a !important;
}
#highlight tr.range-severe td {
background-color: #d59392 !important;
}
#highlight .table td {
border-top: 1px solid #fff;
}
#highlight td.range-severe, td.range-elevated {
font-weight: bold;
}
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-severe {
color: #ef392c;
}
.icon-inline i.icon-elevated {
color: #ff9c1a;
}
.icon-inline i.icon-low {
color: #5fff5e;
}
You can skip the ternary operator like so:
return allowedCells.indexOf(cell.field) > -1;
bah, you are correct sir. changed!
You've basically implemented if true then true else false endif
😛
I tried using this but no icons are showing up. I have my .js and .css below. Could you please take a look? Thank you so much!