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 PortletYin 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.propertiesfile 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.xmlfile 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.whitelistas comma separate with existed values and which should be overridden by using portal-ext.propertiesfile
- 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
0 comments:
Post a Comment