How to get table_icons_rangemap.js visible in more than 1 table in the same dashboard?

[maikelreis]

Hello All,
I downloaded and I'm using Table Icons Rangemap (table_icons_rangemap) dashboard, however I want to use it in more than one table and in this javaScript works only to. I want to be able to view these icon_rangemap in different tables in same Dashboard, is it possible?
I edited js, but it is not working in Splunk

// Translations for en_US
i18n_register({"catalog": {}, "plural": function(n) { return n == 1 ? 0 : 1; }});


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

// Translations from rangemap results to CSS class
var ICONS = {
    severe: 'alert-circle',
    elevated: 'alert',
    low: 'check-circle'
};

var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        // Only use the cell renderer for the range field
        return cell.field === 'range';
    },
    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('table1').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table2').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table3').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table4').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
}); 

mvc.Components.get('table5').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table6').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table7').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
}); 

mvc.Components.get('table8').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table9').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get('table10').getVisualization(function(tableView){
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new RangeMapIconRenderer());
});     

});

Appreciate your help

[niketn]

Table Cell Renderer can be applied to all the tables present in a dashboard dynamically using the solution approach
from one of my recent answer: https://answers.splunk.com/answers/815883/javascript-with-xml-coding.html?childToView=816803#answer-...

[niketn · Accepted solution]

@maikelreis, You need to make sure in your dashboard Simple XML that your tables have corresponding id.
If it is working for one of the tables, its should look like the following in Simple XML...

<table id="table1">
...
...
</table>

Similarly, you should extend for remaining table as well

<table id="table2">
...
...
</table>
<table id="table3">
...
...
</table>
<table id="table4">
...
...
</table>

and so on and so forth.

[maikelreis]

Hello @niketnilay,

Thanks for your reply, I changed my dashboard xml for the way you mentioned and for same reason now icon_rangemap is not working for any table. I dont know if js needs to be changed or there are more references for table1 that Im not finding
Also I added 10 tables in my js, and if I dont add 10 tables in my dashboard it doesnt show any result.

appreciate your help

[niketn]

@maikelreis Have you restarted Splunk after appling your CSS? You would also need to clear Browser history for changes to reflect. For Table Range Icons only two places the table IDs need to match is the XML and CSS file. The corresponding CSS change is generic so no changes required there.

May I also know the Splunk Enterprise version you are using?

[maikelreis]

@niketnilay my splunk version is 6.2.1. I will restart Splunk service and let you know if worked.
I tried _bump but didn`t help,

Thanks

[niketn]

Slight correction for my previous comment "table ids need to match in XML and JS... the CSS changes are generic"

[maikelreis]

@niketnilay thanks for help. I figured out that .js I downloaded from Dashboard examples was looking for table called "range" and my table didn`t have this column, so fixed it and restarted Splunk service, after that I am able to see more than 1 table with same icon_rangemap.

Thanks for help

[niketn]

Great news. Please accept the answer if it has helped you.