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:

<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>

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 %>"/>
</portlet:renderURL>
 

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 %>"/>

</portlet:renderURL>

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();

dialog.show();

});

}
 

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">
 </portlet:resourceURL>
 <table>
 ...
 <input id="popup" type="button" value="Popup"/>
 <script type="text/javascript">
 var $dialog;
 function <portlet:namespace/>showDialog(html, status,request)
 {
 $dialog.dialog('open');
 $dialog.html(html)
 return false;
 }
 $(document).ready(function() {
 $dialog = $('<div></div>').dialog({
 autoOpen: false,
 title: 'Export Dialog'
 });
 $('#popup').click(function()
 {
 jQuery.ajax(
 {
 url : '<%=resourceURL%>',
 dataType : 'String',
 success : <portlet:namespace/>showDialog,
 data : '<portlet:namespace/>',
 type : 'post'
 }
 );
 }
 );
 });
 </script>  

2.Call serveResource on Backing Portlet using Spring MVC Controller

 @Controller
 public class PopupController {
 ......
 @ResourceMapping
 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

A.portlet.xml

 <portlet>
 <portlet-name>PopupPortlet</portlet-name>
 <portlet-class>org.springframework.web.portlet.DispatcherPortlet</portlet-class>
 <init-param>
 <name>contextConfigLocation</name>
 <value>/WEB-INF/context/popup-portlet.xml</value>
 </init-param>
</portlet> 

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">
<map>
<entry key="view">
<ref bean="popupController"/>
</entry>
         </map>
    </property>
</bean>  

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