Skip to main content

Is there a way to trigger a popup from javascript?

Couple things you could do, either create a new snippet for each button, popupWindow2, popupWindow3, etc. Or depending on your use could pass different variables from each place you have the HTML onclick action to your page include, and have it the end result be different from each variable. Same as if you have a page include component added declaratively, you can pass page parameters to your page include in your xml string in your popupWindow snippet. I’ll post an example later today.


So if you adjust your popupWindow snippet to the following:


function popupWindow() {


var popupXMLString = '<popup title="triple 6" width="70%">' + '<components>' +'<includepanel type="skuid" uniqueid="sk-4MOStR-047" pagename="Create A Widget" module=""/>' +'querystring="type=' +typeVariable+'</components>' +'</popup>'; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }

Then you can adjust your html to the following


To create a widget of type Jedi:



To create a widget of type Empire



You can also pass multiple page parameters to your page include, for example if you have a type and an amount:


function popupWindow() {
var popupXMLString = '<popup title="triple 6" width="70%">' + '<components>' +'<includepanel type="skuid" uniqueid="sk-4MOStR-047" pagename="Create A Widget" module=""/>' +'querystring="type=' +typeVariable++'&amp;amp;amount='+amountVariable '</components>' +'</popup>'; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }

Then you can have html that looks like:



Note that you can use Skuid merge syntax to pass in fields from whatever context your html onclick is, or you could even reference any model’s field via {{{$Model.Widgets.data.0.Amount__c}}}


FWIW, another cool trick is moving the onclick code into a custom render snippet, so if you wanted it on several fields in a table, you could just maintain one custom render snippet with your onclick action.


Hope that helps. Let me know if you have any other questions.


Nate, sorry just re-read your post more carefully, you want to change the entire page include for each one:


function popupWindow() {

var popupXMLString = ‘’ + ‘’ +‘’ +‘’ +‘’; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); popup = skuid.utils.createPopupFromPopupXML(popupXML); }


Then your html would be:


For a page called CreateAWidget



or for a page called CreateAnAccount



Hi Jack, the last option here did not work. I have created 3 separate js in-line resources and it seems to always choose the last  js in the javascript window. Any ideas?


Jack, The unique Id I referenced was from the old pop up button referencing the page includes. Since I am not using a pop up button, I’m using my custom html button, what other way can I locate the unique Id?


Jack, I got it! 

I referenced the correct page this time, so it was the unique Id and creating a snippet for each button as you mentioned. 

Thank you!