Tuesday, December 3, 2013

Open Liferay Portlet in AUI Dialog/PopUp


Objective:

Open liferay  portlet in AUI Dialog/ PopUp.

We can open any portlet in AUI dialog in liferay portal. This is very helpful in many real time scenarios

Download OpenPortletAuiDialog portlet from following location

You can find source and war file


Note: 

Portlet developed in Liferay 6.1GA2 EE version

If you want deploy in CE version you just do changes in liferay-plugin-package.properties

Liferay 6.1 EE version

name=OpenPortletAuiDialg
module-group-id=liferay-ee
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=EE
liferay-versions=6.1.20


Liferay 6.1 CE version

name = OpenPortletAuiDialg
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.1.1

Procedure for deploy portlet:

You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.

Once portlet is deployed successfully you can see the portletX and PortletY in sample category.

Add PortletX to any page and then click on button you can see PortletY in AUI Dialog and you can perform some action in PorletY.

Note:

Before use this portlet read entire article and then test the portlet

When we open portlet in dialog we need consider the following points
  • Add the tag  <add-default-resource/> in liferay-portlet.xml file
  • Add portlet id to portlet.add.default.resource.check.whitelist
  • Make sure window sate should be pop_up/exclusive
  • AUI Dialog should be Iframe Type


Add the tag <add-default-resource/> in liferay-portlet.xml file

We need to add this xml tag in liferay-portlet.xml file. This tag is used to adding the  portlet to page dynamically.

If we not add this tag liferay-portlet.xml then portlet won’t be load into the dialog.

Note:

Carefully add tag in appropriate position because in liferay portlet xml file have some sequence to each tag. This is we can add after tag
<css-class-wrapper>portlety-portlet</css-class-wrapper>.

Add portlet id to.add.default.resource.check.whitelist property in portal-ext.properties file.

We need to mention our portlet id in portlet.add.default.resource.check.whitelist other wise portlet not allowed to load in dialog or pop up.

Already this list has some default portlets we need to add our portlet id as comma separate.

By default liferay have some security checks so we need specify above property so that portlet can be loaded into pop up or dialogs.

Example:

portlet.add.default.resource.check.whitelist=3,56_INSTANCE_0000,
58,82,86,87,88,103,113,145,164,166,170,177,
userpreferences_WAR_StockCurrencyWeatherNewsportlet

Here our custom portlet id is:
userpreferences_WAR_StockCurrencyWeatherNewsportlet

Note:

This scenario happened when we want to embed portlet in theme then we need to use above property in portal-ext.properties file

Make sure widow sate should be pop_up/execlusive

When we going to open portlet in pop ups or AUI dialog then portlet window state should be pop_up or exclusive

These two sates are meant for this specific purposes.

AUI Dialog should be Iframe Type

When we open portlet in Dialog we need to perform some action after port let is loaded that is why needed to choose Iframe AUI dialog.

We can also use normal AUI dialog but all actions in portlet should be performed by Ajax call.

The following is example code for open Portlet in AUI dialog /Pop up


<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://liferay.com/tld/security" prefix="liferay-security" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<div>
<h1>Iframe Dialog Please click on button  and see Portlet Y is open In AUI Dialog....
</h1><br/>
<aui:button value="Click Me I will Open PortletY" id="openPortletY" name="openPortletY"></aui:button>
</div>
<aui:script>
AUI().use('aui-base','aui-dialog','aui-io','liferay-portlet-url','aui-dialog-iframe',function(A) {
A.one('#<portlet:namespace/>openPortletY').on('click', function(event){
    var url =Liferay.PortletURL.createRenderURL();   
    url.setPortletId("PortletY_WAR_OpenPortletAuiDialgportlet_INSTANCE_S4Rs"); 
    url.setWindowState('pop_up');  
    var dialog = new A.Dialog({
    title: 'I Opened PortletY',
    centered: true,
    modal: true,
    width: 500,
    height: 400,
    }).plug(A.Plugin.DialogIframe, {
    uri:url,
    iframeCssClass: 'dialog-iframe',
    }).render();

});
});
</aui:script>


For detailed information about AUI Dialogs Please go through following linke



In the Example I have developed 2 portlets PortletX and PortletY

I am going to open PortletY in AUI Dialog from PortletX

I will explain two scenarios here

  1. Drag and Drop the PortletX in any Portal Page
  2. Embed Portlet in Theme


Drag and Drop the PortletX in any Portal Page

When we add port let in page then clicks on button then portletY is opened in AUI Dialog for this we need to add following xml tag in liferay-portlet.xml

That is <add-default-resource>true</add-default-resource> in liferay-portlet.xml

Embed Portlet in Theme:

When we going to embed portlet in Theme then we need add xml tag and portet Id should be in portlet.add.default.resource.check.whitelist  property list

Example:

We want to open PortletY in AUI Dialog and portletX embed in theme then we need to do following steps

add following in lifera-portlet.xml

<portlet>
                        <portlet-name>PortletY</portlet-name>
                        <icon>/icon.png</icon>
                        <instanceable>false</instanceable>
                        <header-portlet-css>/css/main.css</header-portlet-css>
                        <footer-portlet-javascript>/js/main.js
                        </footer-portlet-javascript>
                        <css-class-wrapper>portlety-portlet</css-class-wrapper>
                        <add-default-resource>true</add-default-resource>
</portlet>

Add portlet id in portal-ext.properties file with following property list


portlet.add.default.resource.check.whitelist=3,56_INSTANCE_0000,
58,82,86,87,88,103,113,145,164,166,170,177,
PortletY_WAR_OpenPortletAuiDialgportlet


The following is code for Embed portlet in theme

When we want embed portlet in side theme we need to add following code in portal_noram.vm file of theme which is templates directory of theme


<div>
#set ($VOID = $velocityPortletPreferences.setValue("portlet-setup-show-borders", "false"))
#set ($VOID = $theme.runtime("PortletY_WAR_OpenPortletAuiDialgportlet","",
$velocityPortletPreferences.toString())) 
</div>


When we embed portlet theme then consider following tag too. This also need to add in liferay-portlet.xml file of the port let going to open in AUI dialog.

<system>true</system>

Example:

<portlet>
                        <portlet-name>PortletY</portlet-name>
                        <icon>/icon.png</icon>
                        <instanceable>false</instanceable>
                        <header-portlet-css>/css/main.css</header-portlet-css>
                        <footer-portlet-javascript>/js/main.js
                        </footer-portlet-javascript>
                        <css-class-wrapper>portlety-portlet</css-class-wrapper>
                        <add-default-resource>true</add-default-resource>
                       <system>true</system>
</portlet>

Note:

When we work with any action like render or action in side PortletY should be window state pop_up/execlusive.


Generate Portlet Id

We have two types of portlet

  1. Single Instance Portlets
  2. Multi Insttance Portlets


Single Instance Portlets

Single instance portlet can be added only one to each liferay page. From the following tag we can decide portlet is single instance.

Add the following tag in liferay-portlet.xml file and values should be false.

<instanceable>false</instanceable>

When we add the tag then we can see only one portlet for each page.

Make sure tag position of tag in liferay-portlet.xml file

Example:

<portlet>
                        <portlet-name>PortletY</portlet-name>
                        <icon>/icon.png</icon>
                        <instanceable>false</instanceable>
                        <header-portlet-css>/css/main.css</header-portlet-css>
                        <footer-portlet-javascript>
                                    /js/main.js
                        </footer-portlet-javascript>
                        <css-class-wrapper>portlety-portlet</css-class-wrapper>
                        <add-default-resource>true</add-default-resource>
</portlet>

Generating Portlet ID to single instance portlet

The Portlet Id pattern is following


PortletName_WAR_PluginPortletCotextName


Portlet Name:

You can find the portler Name in portlet.xml file as the tag 
<portlet-name>PortletX</portlet-name>

_WAR_

 This constant string for any plug-in portlet

Plug-in Portlet Context Name:

This is context of your plug-in portlet after deployment.

This name you can find in build.xml file of your portlet

The following is Example:

 build.xml file as follows

<?xml version="1.0"?>
<!DOCTYPE project>
<project name="OpenPortletAuiDialg-portlet" basedir="." default="deploy">
            <import file="../build-common-portlet.xml" />
</project>

Example of portlet Id for single instance portlet:


PortlrtY_WAR_ OpenPortletAuiDialg-portlet



Multi Instance Portlets

When portlet is multi instance then we can more portlets to one page.

We need to add following tag in liferay-portlet.xml file and values should be true

<instanceable>true</instanceable>

When we add the tag then we can add same portlet for multiple in the page.

Make sure tag position in liferay-portlet.xml file

Example:

<portlet>
                        <portlet-name>PortletY</portlet-name>
                        <icon>/icon.png</icon>
                        <instanceable>true</instanceable>
                        <header-portlet-css>/css/main.css</header-portlet-css>
                        <footer-portlet-javascript>
                                    /js/main.js
                        </footer-portlet-javascript>
                        <css-class-wrapper>portlety-portlet</css-class-wrapper>
                        <add-default-resource>true</add-default-resource>
</portlet>

Generating Portlet Id to single instance portlet

The Portlet Id pattern like


PortletName_WAR_PluginPortletCotextName_
INSTANCE_4CharectesAlphaNumeriString


Portlet Name

You can find the portlet Name in portlet.xml file as the tag
<portlet-name>PortletX</portlet-name>

_WAR_

This constant string for any plug-in portlet

Plug-in Portlet Context Name:

This is context of your plugin portlet after deployment.
This name you can find in build.xml file of your portlet.

_INSTANCE_

 This is another constant string for multiple instance portlets.

4 or more Characters Alpha Numeric String(your choice):

 Any string which consist of alphabets and numeric character

Example as follows

vD3e

Example Portlet Id for Multiple Instance Portlet:


PortletX_WAR_OpenPortletAuiDialgportlet_INSTANCE_vD3B


Note:

To make unique id for portlet  they have used  such pattern.

Important Points:

  • To open portlet in AUI dialog we need to add tag <add-default-resource/> in liferay-portlet.xml and value should be true
  • If we embed portlet in theme and we use AUI dialog to open portlet then we need to add portlet id to list of portlet.add.default.resource.check.whitelist as comma separate with existed values and which should be overridden by using portal-ext.properties file
  • We have two kinds of portlets single instance and multi instance and portlet id generated with different pattern for each type.
  • When we open portlet in AUI Dialog then portlet window state should be pop_up/exclusive for each URL it may be render URL or action URL.


Portlet Screen




Reference Links









 Author: Meera Prince