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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...