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. 🙂
Web Development Tips by Team Indies 