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!

Build Your First SPL2 App!

Watch the recording now!.Do you want to SPL™, too? SPL2, Splunk's next-generation data search and preparation ...

Exporting Splunk Apps

Join us on Monday, October 21 at 11 am PT | 2 pm ET!With the app export functionality, app developers and ...

[Coming Soon] Splunk Observability Cloud - Enhanced navigation with a modern look and ...

We are excited to introduce our enhanced UI that brings together AppDynamics and Splunk Observability. This is ...