Dashboards & Visualizations

How to add a lense icon to multiple tables with the same Javascript?

swaro_ck
Path Finder

Hi,

Inspired from this post: https://community.splunk.com/t5/Dashboards-Visualizations/How-can-i-re-use-Java-scripts-form-one-tab... I modifed my Javascript to add a lense icon in two tables. Same fieldname "Metrics" same icon "lupe.png" but 2 different tables. With Splunk 8.1 it's working without any error.

swaro_ck_1-1668428281886.png

After the upgrade to 8.2.9 I get now this error message by accessing the App but the lens icons are still shown in both tables.

swaro_ck_0-1668427783608.png

The output from the developer console:

TypeError: Cannot read property 'getVisualization' of undefined at eval (eval at <anonymous> ...

table_lupe.js

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomIconRenderer1 = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Metrics';
        },
        render: function($td, cell) {
            var icon = 'lupe';
            // Create the icon element and add it to the table cell
                $td.addClass('icon').html(_.template('<div class="myicon <%- icon%>"></div>', {
                icon: icon,
            }));
        }
    });
    var CustomIconRenderer2 = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Metrics';
        },
        render: function($td, cell) {
            var icon = 'lupe';
            // Create the icon element and add it to the table cell
                $td.addClass('icon').html(_.template('<div class="myicon <%- icon%>"></div>', {
                icon: icon,
            }));
        }
    });
    mvc.Components.get('lupe1').getVisualization(function(tableView1){
        // Register custom cell renderer, the table will re-render automatically
        tableView1.addCellRenderer(new CustomIconRenderer1());
    });
    mvc.Components.get('lupe2').getVisualization(function(tableView2){
        // Register custom cell renderer, the table will re-render automatically
        tableView2.addCellRenderer(new CustomIconRenderer2());
    });
});

 

 

table_lupe.css

 

/* Custom Icons */

td.icon {
    text-align: center;
}

td.icon .lupe {
    background-image: url('lupe.png') !important;
    background-size:20px 20px;
}

td.icon .myicon {
    width: 20px;
    height: 20px;
    margin-left: auto;
    margin-right: auto
}

 

 

Maybe some one can help me find whats the problem.

Thank you.

 

Labels (4)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@swaro_ck 

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Metrics';
        },
        render: function($td, cell) {
            var icon = 'lupe';
            // Create the icon element and add it to the table cell
                $td.addClass('icon').html(_.template('<div class="myicon <%- icon%>"></div>', {
                icon: icon,
            }));
        }
    });
    var tableIDs = ["lupe1", "lupe2"];
    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 CustomIconRenderer());
            });
        }
    }
});

 

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

View solution in original post

swaro_ck
Path Finder

Thanks for your quick reply, works perfectly!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@swaro_ck 

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Metrics';
        },
        render: function($td, cell) {
            var icon = 'lupe';
            // Create the icon element and add it to the table cell
                $td.addClass('icon').html(_.template('<div class="myicon <%- icon%>"></div>', {
                icon: icon,
            }));
        }
    });
    var tableIDs = ["lupe1", "lupe2"];
    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 CustomIconRenderer());
            });
        }
    }
});

 

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

Get Updates on the Splunk Community!

Discover Powerful New Features in Splunk Cloud Platform: Enhanced Analytics, ...

Hey Splunky people! We are excited to share the latest updates in Splunk Cloud Platform 9.3.2408. In this ...

Splunk Classroom Chronicles: Training Tales and Testimonials

Welcome to the "Splunk Classroom Chronicles" series, created to help curious, career-minded learners get ...

Access Tokens Page - New & Improved

Splunk Observability Cloud recently launched an improved design for the access tokens page for better ...