When developing portlets in Liferay there are two ways to implement pop-ups. We can use a Floating Div or the traditional new browser Window without the toolbars. Each of them has got their advantages so we will have to decide which one fits us better. For example, if you are using a pop up with a form, you won't be able to send files attached to the form if you are using a floating div.

In this article there are some tips to develop both types of pop-ups.

Floating Div Pop-Up #

Liferay provides a class called Expanse.Popup to implement this type of pop ups. Here is how this type of pop up would look like:

One advantage of this type of pop up is that they are invisible to pop up blockers (although that could change as they get smarter). This javascript code will make an asynchronous call to the url we give it and will place the content in our page. Below there is an example which will load the url 'url' in a pop up called 'our title':

var popup = new Expanse.Popup(
				{
					header: 'our title',
					position:[150,150],
					modal:true,
					width:500,
					height:300,
					xy: ['center', 100],
					url: 'url',
					urlData: {
						parameter1: 'value1',
                                                parameter2: 'value2'
					}
				}
			);

It's important to note that if the url is a portlet url it must have the windowState parameter set to LiferayWindowState.EXCLUSIVE, because we just want the content produced by the portlet and not the extra portlet decoration produced by the portal.

To implement a button or link to close the pop up use the following code:

Expanse.Popup.close(this);

This type of pop-up is used in several Liferay core portlets like the image gallery (show pictures), journal (edit template) or my communities (publish to live). Look at them for further examples of usage.

Window Pop up #

This type of pop ups will load in a new window. In order to do that we must set the windowState parameter in the portlet url to LiferayWindowState.POP_UP. This windowState will produce that the result of calling a portlet url will be shown in another window, like a real pop up. There are no visual effects asociated, it's a different window.

However, from this window we can still make javascript calls to the parent page javascript functions as the javascript object opener refers to the parent window. There is an example below:

<input type="button" value="select" onClick="
	var organizationWindow = window.open('
			<portlet:renderURL 
				windowState="<%= LiferayWindowState.POP_UP.toString() %>">
				<portlet:param name="struts_action" value="/enterprise_admin/select_organization" />
		 		<portlet:param name="tabs1" value="organizations" />
			</portlet:renderURL>',
			 'title',
			'directories=no, height=640, location=no, menubar=no, resizable=yes, 
                                                                               scrollbars=yes, status=no, toolbar=no, width=680');
	 
	organizationWindow.focus();" />

If we want to close the pop up we just need to do the following:

 window.close(); 

If we want to close the parent page we can do the following:

opener.close(); 

This is used in several portlets like the image gallery (show slideShow), enterprse admin (select organizations for users...)

Floating Div Pop-up in 6.1 #

In 6.1, Liferay uses pop-ups extensively. Here is the code you can simply put in your jsp to load a portlet or any other content asynchronously (Ajax) using Alloy.

<aui:script>

Liferay.provide(
	window,
	'showSiteManagement',
	function() {
		var A = AUI(); 	
		var portletURL="<%= themeDisplay.getURLManageSiteMemberships().toString() %>";
		var dialog = new A.Dialog(
			{
				destroyOnClose: true,
				modal: false,
				title: 'My title',
				width: 900
			}
		).plug(
			A.Plugin.IO,
				{
					uri: portletURL.toString()
				}
		).render();
	},
	['aui-dialog']
); 
</aui:script>

Now, making a simple javascript call to the "showSiteManagement()" will open a floating window and load in the portles content. However as you will see, this does not work so very well if your portlet has actions and url. Any action/urls will result in reload of the whole page.

For those cases Liferay has another tool witch opens an IFrame inside the Alloy Dialog. The result looks the same however it works much better for displaying portlets and such.

<aui:script>
	Liferay.provide(
		window,
		'showSiteManagement',
		function() {
			var instance = this;

			var url='<%= themeDisplay.getURLManageSiteMemberships().toString() %>';

				Liferay.Util.openWindow(
					{
						cache: false,
						dialog: {
							align: Liferay.Util.Window.ALIGN_CENTER,
							after: {
								render: function(event) {
									this.set('y', this.get('y') + 50);
								}
							},
							width: 820
						},
						dialogIframe: {
							id: 'siteManagementIframe',
							uri: url
						},
						title: 'Site Management',
						uri: url
					}
				);
		},
		['liferay-util-window']
	);
	</aui:script>

In both cases I have used the "themeDisplay.getURLManageSiteMemberships().toString()" to get the URL to the portlet. However this code can be used to render a JSP page.

<portlet:renderURL var="somePageURL" windowState="<%= LiferayWindowState.POP_UP.toString() %>">
	<portlet:param name="jspPage" value="/jsp/some/page.jsp"/>
	<portlet:param name="redirect" value="<%= currentURL %>"/>
</portlet:renderURL>

Or this to render another portlet, you can generate an URL like this :

		var url = Liferay.PortletURL.createRenderURL();
                url.setPortletId("3");
                url.setWindowState("pop_up");

PS! In this last code : 1) Not all portlets can be viewed without being white-listet. 2) To use createRenderURL, you must add this 'liferay-portlet-url' to the last parameter of Liferay.provide