topic Re: Javascript for dashboard not working in Splunk 7 in Dashboards & Visualizations

Javascript for dashboard not working in Splunk 7

jhigginsmq — Mon, 06 Nov 2017 14:27:20 GMT

We have an HTML dashboard that displays some data in a table with custom colour coding and drilldowns applied using jQuery selectors in Javascript. Since upgrading to Splunk 6.6 there have been problems with the colour coding etc. not being applied upon loading. Now after upgrading to 7.0 on our search head the table doesn't display at all; I get "Uncaught Error: VisualisationRegistry has not been populated" in the console in Chrome. I've also tried other browsers and get the same problem.

I believe this is a problem with the TableView visualisation in Splunk 7. I've tried substituting TableView for TableElement (the default name after converting a table in a simple XML dashboard to HTML) in the Javascript itself and the table is now rendered, but there is no colour coding or any sign of the jQuery functions we have being applied at all.

Anyone had similar problems with Javascript dashboards after recent upgrades? Has the support for these visualisations changed or have the dependencies been affected in Splunk 7 or 6.6?

Re: Javascript for dashboard not working in Splunk 7

alacercogitatus — Mon, 06 Nov 2017 14:43:13 GMT

You need to make sure the JS is ready for calls. Add this to your requirejs stack:

splunkjs/ready!

This will make sure the splunkJS is ready and the registry is loaded.

Re: Javascript for dashboard not working in Splunk 7

jhigginsmq — Mon, 06 Nov 2017 15:30:00 GMT

Thanks for that, adding it fixes the issue with the table not displaying but I'm getting the same issue with the jQuery not being applied.

Re: Javascript for dashboard not working in Splunk 7

kamlesh_vaghela — Mon, 06 Nov 2017 16:03:41 GMT

HI @jhigginsmq,

My javascript code is working properly in 6.x & 7.0 both.

Below is my sample code. Can you please try it or compare it with your code?

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['My Column Namwe']).contains(cell.field);
        },
        render: function($td, cell) {
            if(cell.value=="red" || cell.value=="green" || cell.value=="yellow")
            {
                $td.html("<div class='circle_"+cell.value+"'></div>")
            }
            else if(cell.value=="NoData" || cell.value=="null")
            {
                $td.html("<div class='align_center'></div>")
            }
            else
            {
                $td.html("<div class='align_center'>"+cell.value+"</div>")
            }
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["Mytable"];
    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 CustomRangeRenderer());
                tableView.table.render();
            });
        }
    }    
});

Happy Splunking

Re: Javascript for dashboard not working in Splunk 7

niketn — Mon, 06 Nov 2017 16:05:13 GMT

@jhigginsmq, I believe you are using jQuery for Table Row Highlighting based on Table Cell value. I have noticed that post 6.5 this require us to add some delay even after rendering the table otherwise default color overrides the color we want to apply...

Following is an example for adding some delay before applying row color:

     tableView.on('rendered', function() {
         // Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.            
         setTimeout(function(){    
             // Apply class of the cells to the parent row in order to color the whole row
             tableView.$el.find('td.range-cell').each(function() {
                 $(this).parents('tr').addClass(this.className);
             });
         },100);
     });

Refer to one of my answers on similar lines:https://answers.splunk.com/answers/588394/change-the-color-of-rows-in-a-table-based-on-text-1.html

Please try out and confirm. If it does not work you might need to paste what you currently have. Just ensure that every time you modify JSS you refresh/bump your Splunk instance for latest static files to reflect changes. May also need to clear internet browser history.

Re: Javascript for dashboard not working in Splunk 7

jhigginsmq — Mon, 06 Nov 2017 17:01:29 GMT

Adding the delay has fixed it! Thanks we've been going for months with an ugly, colour-less database table.

Re: Javascript for dashboard not working in Splunk 7

jhigginsmq — Mon, 06 Nov 2017 17:02:41 GMT

Thanks, ours looks quite different but good to see another example.

Re: Javascript for dashboard not working in Splunk 7

sfatnass — Wed, 12 Sep 2018 13:36:22 GMT

i have the same problem and i don't find any solution.
nothing work (xml or html) dashboard.
splunk wont execute tableView.on('rendered', function() {
i tryed with the delay but nothing happen 😞

what's happen with splunk 7 ? why is being complicated for splunkjs stack right there

Re: Javascript for dashboard not working in Splunk 7

niketn — Thu, 13 Sep 2018 14:02:43 GMT

@sfatnass the behavior has been same since Splunk 6.6 where setTimeout() is required inside TableView render() function. So the workaround should still hold true. Have you tried debug refresh or bump of environment to ensure that latest JavaScript code is getting pulled? Also can you add some Console Logs outputs to ensure whether code flow is hitting all the code blocks or not?

Re: Javascript for dashboard not working in Splunk 7

sfatnass — Thu, 13 Sep 2018 14:55:03 GMT

@niketnilay yes of course i bump and debug/refresh ^^
when i add setTimeout() nothing change.
and yes i use console.log to show where i am and i found that any render() function not loaded.
but sometime it work but make a lot a lot of time :(.

Re: Javascript for dashboard not working in Splunk 7

niketn — Thu, 13 Sep 2018 15:15:03 GMT

@sfatnass, are you trying Table Row Highlighting? How Many Columns Do you have? Is there Maximum displayed Column (if the number of columns is not fixed)? Are the column Names fixed/static or may change i.e. like Date or something similar?

Finally, have you posted any recent question with the details of what you have and what you want with mock screenshots? Since the post is roughly a year old would you be able to create a new question so that it gets proper attention?

Re: Javascript for dashboard not working in Splunk 7

sfatnass — Fri, 14 Sep 2018 13:45:58 GMT

@niketnilay, i submit an app exemple (xml and html dashboards)
my objectif is simple, if i click on cell "id" i need to highlight the value.

you are able to download/edit the app https://splunkbase.splunk.com/app/4184/

if you have any solution for me i'm interested