topic Customized popup in Dashboards & Visualizations

Customized popup

guilhem — Tue, 09 Apr 2013 13:32:03 GMT

Hi,

I would like to display a popup like the "about splunk " or the "custom time" one when a user click on a field inside my application.

I know how to display a random popup, but I don't want to reimplement everything (lock the background, center the popup, return selected values to the main page etc), so I just want to add a new popup based on, let's say the custom time selection popup.

this topic is close but not really helpfull. Someone here has basically the same need as me.

Does anyone knows how to do it, or where to find information about it?

EDIT: The location of the TimeRangePickerModule is:

share/splunk/search_mrsparkle/modules/search/TimeRangePicker.js

I have found usefull info there, namely the:

new Splunk.Popup();

which creates exactly what I want (a default splunk popup). So my question is: is there a documentation somewhere on the framework? Or do I need to crawl in the *.js, *.conf, *.py to find what I want? (for example how to set up the name of the popup).

EDIT 2

Based on what I have found in the share/splunk/search_mrsparkle/exposed/js/Popup.js code, I have put together a very naive basic popup that just appears with a submit and cancel button. I am still working on adding custom content inside. But I cannot find any docs on it.

var _myPopup;

function createMyPopup()
{
        _myPopup = new Splunk.Popup($('.popupScaffolding'), {
           title : "My Popup",
           pclass : "myPopupClass",
           buttons : [
                {
                   label: 'Cancel',
                   type : 'secondary',
                   callback: cancel
                },
                {
                   label: 'Apply',
                   type : 'primary',
                   callback: handleSaveSubmit
               }
           ]
       });
}


function cancel()
{
        _myPopup.destroyPopup();
        return false;
}

function handleSaveSubmit()
{
        _myPopup.destroyPopup();
        return true;
}

Guilhem

Re: Customized popup

guilhem — Tue, 09 Apr 2013 16:52:12 GMT

I am slowly crawling the Popup.js file, and I have "improved" my popup:

   _myPopup = Splunk.Popup.createEAIForm(window, "My popup", 
    {
            url : Splunk.util.make_url('manager',                                                
            Splunk.util.getCurrentApp(),                                                
            '/saved/eventtypes/_new?action=edit&noContainer=2&viewFilter=modal&eleOnly=1'), 
             title : "My Popup",
            pclass : "myPopupClass",
            buttons :
            [
                    {
                            label: 'Cancel',
                            type : 'secondary',
                            callback: cancel
                    },
                    {
                            label: 'Apply',
                            type : 'primary',
                            callback: handleSaveSubmit
                    }
            ]
    });

I think I have understood that you can't directly inject some html code inside it. It looks like you have to take the layout of the popup from a page (by the url property). I have taken this example from the Popup.js file itself, and I can use it in my page, but there is so many things that I still don't have any clue:

1°) How to create the html content and where to put it for it to be displayed in the popup
2°) How do you pass values back and forth the page <-> popup (how do you save changes done in the popup)
3°) Where can I find documentation on the Popup class (except from inside the code comments)? (I don't know what meansEAIForm, what exactly does the make_url function ...)

If any one could help, it would be greatly appreciated

PS: I have put it inside another answer for clarity, besides it partially answer the question

EDIT:

I was able to answer 1°) : here is the code of my popup:

_myPopup = Splunk.Popup.createEAIForm(window, "My Popup Name",
{
        url : Splunk.util.make_url('app', Splunk.util.getCurrentApp(), 'The view you want your popup to be populated with'),

        title : "My popup",
        pclass : "myPopupClass",
        buttons :
        [
                {
                        label: 'Cancel',
                        type : 'secondary',
                        callback: cancel
                },
                {
                        label: 'Apply',
                        type : 'primary',
                        callback: handleSaveSubmit
                }
        ]
});

I still have a problem (JS error: TypeError: Splunk.EAI.getInstance(...) is null). I am currently investigating.

Hope this helps, but I still don't know how to do n°2.

Re: Customized popup

guilhem — Thu, 11 Apr 2013 13:59:57 GMT

All right I am stucked. The method above is not the right way to go. I must use the new Splunk.Popup, but even if the html code I put inside show in the firebug console, it DOESN'T APPEAR in the popup. That very confusing. I don't know what to do. If anybody has an idea.

btw I'm using splunk 4.3

Re: Customized popup

guilhem — Thu, 11 Apr 2013 14:19:04 GMT

OK, finally I have managed to make this thing work, here is the popup code (there was a problem in the div I used, the css was making the content disappearing) :

   _mypopup = new  Splunk.Popup('<p> TEST TEST  </p>',
    {
            title : "My title",
            pclass : "myPopupClass",
            cloneFlag : false,
            buttons : 
            [
                    {
                            label: 'Cancel',
                            type : 'secondary',
                            callback: cancel
                    },
                    {
                            label: 'Apply',
                            type : 'primary',
                            callback: handleSaveSubmit
                    }
            ]
    });

}

I still don't know how to save the things I will choose from the popup to the main page. If anybody knows how to do, It will save me some time.

Guilhem

Re: Customized popup

guilhem — Mon, 15 Apr 2013 12:55:12 GMT

As this works, I will accept it, but still, I am not satisfied with it.

Re: Customized popup

hvandenb — Wed, 31 Jul 2013 16:36:41 GMT

Have you been able to make it all work into a module? I'm working on something similar and was wondering if you could share the solution. I have been looking at the Active Directory App which uses pop as well. In there is a module called MSADAppChecker which does a pop up based on a set of data.

Re: Customized popup

Tejkumar451 — Mon, 31 Oct 2016 22:15:04 GMT

Can you help me understand regarding the popup. Should we keep the JS for popup separately in a js file and use that in the dashoboard`s xml? sorry I am a newbie and trying to understand. My requirement is just to open a popup after clicking a button and give some info over there, later after clicking close button on the popup , the window should be closed. Please help me!!

Re: Customized popup

cblanton — Wed, 24 Jul 2019 02:53:49 GMT

This is an old question, but leaving this here in case someone else is looking for the solution (like me): https://www.splunk.com/blog/2014/02/24/using-bootstrap-modal-with-splunk-simple-xml.html

Re: Customized popup

cblanton — Wed, 24 Jul 2019 02:55:16 GMT

This is an old question, but here's a solution if someone else is also looking for it: https://www.splunk.com/blog/2014/02/24/using-bootstrap-modal-with-splunk-simple-xml.html