Hi,
I have the JS and CSS created to highlight the row based on my search result. Instead of highlighting the row, I have done encircling the row with blue color to show that is the data for the chosen filter.
Issue:
Initially when the dashboard is loaded and when I chose the filter the row encircling doesn't work but after flipping(choosing different option) the filter option it works fine.
Could you please let me know do I need to add anything to the below JS to fix the issue to get the row encircling when the dashboard loads initially.
JS:
/* TODO: jink to replace theme_utils with that from core */
require.config({
paths: {
theme_utils: '../app/simple_xml_examples/theme_utils'
}
});
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'theme_utils',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, themeUtils) {
var isDarkTheme = themeUtils.getCurrentTheme && themeUtils.getCurrentTheme() === 'dark';
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the ACK_DATE_TIME and the ACK_BY field
return _(['posting_date', 'Chosen_Row', 'chosen_row']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Apply interpretation for number of historical searches
if (cell.field === 'Chosen_Row') {
if (value === 'Yes') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'chosen_row' | cell.field === 'Chosen_Row') {
if (value === 'Yes') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value);
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
if(isDarkTheme){
tableView.$el.find('td.timestamp').each(function() {
$(this).parents('tr').addClass('dark');
});
}
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
mvc.Components.get('highlight1').getVisualization(function(tableView) {
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
if(isDarkTheme){
tableView.$el.find('td.timestamp').each(function() {
$(this).parents('tr').addClass('dark');
});
}
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
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: orangered;
}
td.icon .low {
color: #006400;
}
/* Row Coloring for selected posting_date */
#highlight tr.range-severe td {
border: solid rgba(0,164,253,.6) !important;
border-width: 4px 0px 4px 1px !important;
font-weight: bold;
}
#highlight1 tr.range-severe td {
border: solid rgba(0,164,253,.6) !important;
border-width: 4px 0px 4px 1px !important;
font-weight: bold;
}
/* Row Coloring */
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
color: #ef392c;
}
.icon-inline i.icon-alert {
color: #ff9c1a;
}
.icon-inline i.icon-check {
color: #5fff5e;
}
/* Dark Theme */
td.icon i.dark {
text-shadow: none;
}
/* Row Coloring */
#highlight tr.dark td {
background-color: #5BA383 !important;
}
#highlight tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
}
#highlight1 tr.dark td {
background-color: #5BA383 !important;
}
#highlight1 tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight1 tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight1 .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
}
@spkriyaz refer to one of the issues mentioned for Splunk 6.6+ which required in lag for table rendered function call: https://community.splunk.com/t5/All-Apps-and-Add-ons/Splunk-Dashboard-Examples-Table-Row-highlightin...
You would need to add a small setTimeout() for the tableView.on('rendered', function() { , function call. Please try out and confirm!
Hi @niketn ,
I tried applying the setTimeout() function to my JS but it doesn't work. Could you please check is there anything I missed in the below JS and CSS.
JS:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'theme_utils',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, themeUtils) {
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for both the ACK_DATE_TIME and the ACK_BY field
return _(['posting_date', 'Chosen_Row', 'chosen_row']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;
// Apply interpretation for number of historical searches
if (cell.field === 'Chosen_Row') {
if (value === 'Yes') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Apply interpretation for number of realtime searches
if (cell.field === 'chosen_row' | cell.field === 'Chosen_Row') {
if (value === 'Yes') {
$td.addClass('range-cell').addClass('range-severe');
}
}
// Update the cell content
$td.text(value);
}
});
mvc.Components.get('highlight').getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
mvc.Components.get('highlight1').getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
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: orangered;
}
td.icon .low {
color: #006400;
}
/* Row Coloring for selected posting_date */
#highlight tr.range-severe td {
border: solid rgba(0,164,253,.6) !important;
border-width: 4px 0px 4px 1px !important;
font-weight: bold;
}
#highlight1 tr.range-severe td {
border: solid rgba(0,164,253,.6) !important;
border-width: 4px 0px 4px 1px !important;
font-weight: bold;
}
/* Row Coloring */
.icon-inline i {
font-size: 18px;
margin-left: 5px;
}
.icon-inline i.icon-alert-circle {
color: #ef392c;
}
.icon-inline i.icon-alert {
color: #ff9c1a;
}
.icon-inline i.icon-check {
color: #5fff5e;
}
/* Dark Theme */
td.icon i.dark {
text-shadow: none;
}
/* Row Coloring */
#highlight tr.dark td {
background-color: #5BA383 !important;
}
#highlight tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
}
#highlight1 tr.dark td {
background-color: #5BA383 !important;
}
#highlight1 tr.range-elevated.dark td {
background-color: #EC9960 !important;
}
#highlight1 tr.range-severe.dark td {
background-color: #AF575A !important;
}
#highlight1 .table .dark td {
border-top: 1px solid #000000;
color: #F2F4F5;
}