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
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>.
<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
- Drag and Drop the PortletX in any Portal Page
- 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
- Single Instance Portlets
- 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
Posts
