Dashboards & Visualizations

Using javascript (Modal) for pop-up in dashboard

soumdey0192
Explorer

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-...

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..??

Tags (1)
0 Karma
1 Solution

thomasroulet
Path Finder

Hello,

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

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

by

 ], 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.

View solution in original post

soumdey0192
Explorer

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

0 Karma

thomasroulet
Path Finder

Hello,

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

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

by

 ], 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.

sarvesh_11
Communicator

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.

0 Karma

soumdey0192
Explorer

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..

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...