Opening a popup with Alchemy4Tridion framework

Using A4T to open a popup and keep reusing it.


This post was prompted by a slightly related question on the Tridion Stack Exchange on opening a popup using the Alchemy A4T Framework. I thought I would share a simple way of opening a popup.

in your command.js

The first way is using the following

var itemId = selection.getItem(0);
var url = "${ViewsUrl}popup.html?item=" + itemId,
popup = $popup.create(url, "menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=405,height=180", null);
popup.open();

This may work in the vast majority of cases, but for my use I needed to make sure that if a user opened up a popup by clicking the GUI button it would reuse the same one that was already open rather than opening an infinite number of popups. In order to achieve this you need to store a reference to the popup object in the properties of the Anguilla command.

var itemId = selection.getItem(0);
var url = "${ViewsUrl}popup.html?item=" + itemId;

var onPopupClose = function() {
 $evt.removeEventHandler(this.properties.popupInstance, "unload", this.getDelegate(this.properties.popupCloseHandler));
 this.properties.popupInstance = null;
 this.properties.popupCloseHandler = null;
}

var popup = this.properties.popupInstance;
if(popup)
{
 popup.focus();
}
else
{
 popup = $popup.create(url, "menubar=no,location=no,resizable=no,scrollbars=yes,status=no,width=800,height=350", null);

 this.properties.popupInstance = popup;
 this.properties.popupCloseHandler = onPopupClose;

 $evt.addEventHandler(popup, "unload", this.getDelegate(onPopupClose));

 popup.open();
}

What is happening in the code

So after creating the URL variable the first thing we do is create an anonymous function that we want called when the popup closes, what this does is removes this event handler firstly, and then removes the properties on this object of the popup instance and the close handler.

We get the popup reference from this object and if it exists we move focus to it, if not we create a new popup object and pass a reference to it back to the calling object so we can use it again next time the button is clicked.
Then we assign the onPopupClose function to the popupCloseHandler property, and finally we add an event handler to remove these references and clean it all up if the user closes the window.
and then we open the window.

I`d love to hear your feedback, and hope you find this useful.