topic Re: Using javascript (Modal) for pop-up in dashboard in Dashboards & Visualizations

Using javascript (Modal) for pop-up in dashboard

soumdey0192 — Thu, 22 Aug 2019 09:37:39 GMT

I am trying to use the idea in the below link to make a pop-up window in my dashboard.

reference link : https://www.hurricanelabs.com/splunk-tutorials/splunk-custom-modal-view-creation-part-1-revealing-a-path-toward-enhanced-visibility-and-functionality

But unfortunately, for even a simple xml dashboard, I am not able to get the pop-up at all (I am not even sure if the javascript is loading)

Below are the codes...

Simple xml dashboard :

<dashboard script="app.js">
<label>Modal Demo</label>
<row>
<panel>
  <table id="master">
    <title>Master</title>
    <search>
      <query>index=_internal | stats count by sourcetype</query>
      <earliest>-60m@m</earliest>
      <latest>now</latest>
    </search>
    <option name="drilldown">row</option>
  </table>
</panel>

app.js : (placed inside $SPLUNK_HOME$/apps/retail/appserver/static)

require.config({
paths: {
ModalView: '../app/retail/ModalView'
}
});

require([
'underscore',
'backbone',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'ModalView',
'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, mvc, ModalView) {

//get an instance of the master table
var master = mvc.Components.get('master');

master.on("click", function(e) {
     e.preventDefault();
    if (e.field === "sourcetype") {
        e.preventDefault();
        //pass the value of the item we clicked on to the title variable
        var _title = e.data['click.value'];
        var modal = new ModalView({ title : _title });
        modal.show();
    }
 });

});

ModalView.js (placed inside $SPLUNK_HOME$/apps/retail/appserver/static/components )

define([
'underscore',
'backbone',
'jquery',
'splunkjs/mvc/searchmanager'
], function(_, Backbone, $, SearchManager) {

var modalTemplate = "" +
            "<div class=\"modal-header\"><h3><%- title %></h3><button class=\"close\">Close</button></div>" +
            "<div class=\"modal-body\"></div>" +
            "<div class=\"modal-footer\"></div>" +
            "</div>" +
            "<div class=\"modal-backdrop\"></div>";

var ModalView = Backbone.View.extend({

    defaults: {
        /*default values if none are given i.e the modal’s title*/
        title: 'Not Set'
    },
    initialize: function(options) {
        /* Where initial values passed in to an instance
           of this view will be handled */
           //the options parameter allows us to pass values to our view
        this.options = options;
        //this checks for values in the default object or if a title was
        //actually passed through the options parameter
        this.options = _.extend({}, this.defaults, this.options);
        this.template = _.template(modalTemplate);
        //for testing purposes we will log out the title
        console.log('Hello from Modal View: ' + this.options.title);
    },

    events: {
        /* events such as the click of a button */
    },

    render: function() {
        /* renders the view */
        /* Define the data object where we specifically set 
 the title value here it is what we pass into the new instance of 
 the this view in app.js
 */
 var data = { title : this.options.title }
 //take our data object and pass it to our template
 this.$el.html(this.template(data));
 return this;
    },

    show: function() {
        /* actually shows the modal window*/
         //append the modal to the document.body and call this view’s
        //render function
        $(document.body).append(this.render().el);
    },

   close: function() {
        /* handles the closing of the modal window */
          this.unbind();
          this.remove();
    }
});

//return the modal in order to access it
return ModalView;
});

Can somebody please help me in this regard..??

Re: Using javascript (Modal) for pop-up in dashboard

thomasroulet — Wed, 30 Sep 2020 01:51:43 GMT

Hello,

a little mistake on line 14 in app.js :
Replace

 ], function(_, Backbone, mvc, ModalView) {

 ], function(_, Backbone, mvc, tableview, ModalView) {

after this correction, don't forget to use the _bump to reload changes from static files : http://$SPLUNK_URI$/en-US/_bump

You will be able to view some change on click, but you will have to continue to adapt the script and css to obtain a better result.

Re: Using javascript (Modal) for pop-up in dashboard

soumdey0192 — Thu, 22 Aug 2019 11:49:30 GMT

Hi All,

After some R&D I found out what was causing the issue and to my surprise it was such a simple one that I sat down with hands on my head for few minutes... 😛

So for the folks, following the question, here is the simplest of solution ever can be...

Solution : "Clear your browser cache every time you make changes to the JS file" 😛

The answers to the below post, set me in the right direction (Not taking any credits for the solution)

https://answers.splunk.com/answers/504283/why-is-my-javascript-code-not-working-in-my-dashbo.html

Thanks

Re: Using javascript (Modal) for pop-up in dashboard

soumdey0192 — Thu, 22 Aug 2019 11:51:30 GMT

Thanks @thomasroulet for you inputs... I just found out the solution after some R&D and yes it is the exact same thing that you posted in your answer.

I also have posted my own answer..

Re: Using javascript (Modal) for pop-up in dashboard

sarvesh_11 — Mon, 06 Dec 2021 08:40:26 GMT

What if the context in modal pop-up is not table, wat function shall i be using for a html form?

On button click i want to pop-up a html form.