Liferay Popup’s

When developing a portlet in liferay sometimes there will be need to display content, page or even a portlet in popups. Liferay provides its inbuilt methods to have the facility of popups. In this article I will explain you the same and some other ways to use popups using Jquery and Ajax in liferay.

 Liferay Popup using Ajax + Alloy

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. This will open an iFrame inside the alloy:

               Liferay.provide(window,'showSiteManagement',function() {
                      var instance = this;
                      var url='<%= themeDisplay.getURLManageSiteMemberships().toString() %>';
                            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

I have used the “themeDisplay.getURLManageSiteMemberships().toString()” to get the URL to the portlet. However this below 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 %>"/>

Using the popup without Alloy
Add the below code in your controller:

<portlet:renderURL var="somePageURL" windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>">

<portlet:param name="jspPage" value="/jsp/some/page.jsp"/>

<portlet:param name="redirect" value="<%= currentURL %>"/>


Add the below script in your jsp page

<script type="text/javascript">

function showPopup() {

AUI().use('aui-dialog', 'aui-io', 'event', 'event-custom', function(A) {

var dialog = new A.Dialog({

title: 'Popup Title',

centered: true,

draggable: true,

modal: true

}).plug(A.Plugin.IO, {uri: '<%= somePageURL %>'}).render();;



Liferay popup using Jquery

Follow the below steps to integrate jquery with liferay:
1. Add the following content into your jsp page  

 <portlet:resourceURL var="resourceURL">
 <input id="popup" type="button" value="Popup"/>
 <script type="text/javascript">
 var $dialog;
 function <portlet:namespace/>showDialog(html, status,request)
 return false;
 $(document).ready(function() {
 $dialog = $('<div></div>').dialog({
 autoOpen: false,
 title: 'Export Dialog'
 url : '<%=resourceURL%>',
 dataType : 'String',
 success : <portlet:namespace/>showDialog,
 data : '<portlet:namespace/>',
 type : 'post'

2.Call serveResource on Backing Portlet using Spring MVC Controller

 public class PopupController {
 public String renderResource(@RequestParam(value = "action") String action,
 @RequestParam(value = "refresh", required = false) boolean refresh, ResourceRequest request) throws PortletException,
 IOException {
return "popupJspName";

3.Supporting xml files



B. popup-portlet.xml

 <bean id="popupController"/>
<bean id="portletModeHandlerMapping" class="org.springframework.web.portlet.handler.PortletModeHandlerMapping">
 <property name="defaultHandler" ref="popupController"/>
      <property name="portletModeMap">
<entry key="view">
<ref bean="popupController"/>

We are done….. Enjoy using popups with liferay. 🙂

Speak Your Mind

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: