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!

Enterprise Security Content Update (ESCU) | New Releases

In November, the Splunk Threat Research Team had one release of new security content via the Enterprise ...

Index This | Divide 100 by half. What do you get?

November 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

❄️ Celebrate the season with our December lineup of Community Office Hours, Tech Talks, and Webinars! ...