Introduction:
Some time we may need requirement to show portlet inside Web Content or Liferay Journal Content.
Liferay have feature to embedded portlet in web content. We have simple xml tag that will embed portlet in web content portlet.
We can embed portlet in web content in two ways
- Using <runtime-portlet/> xml tag
- Using Portlet sharing java script code snippet
Using <runtime-portlet/> xml tag
The following is simple tag which can embed portlet in web content.
<div id="my-embedded-portlet"> <runtime-portlet name="47" instance="av33" queryString=""/> </div> The above tag have following attributes Name: this is portlet name or portlet Id. Instance: this is minimum 4 characters alpha numeric string which anything. query String: this will uses to pass some additional parameters using query string mode |
Tip to know portlet Id and Instance Id for any portlet
Step: 1
Drag and drop desired portlet in any page
Step: 2
Go to portlet configuration
The following sample portlet which reside in page.
Step: 3
Find sharing tab and click on sharing then you can some java script code there you can see portlet id and instance id.
The following screen shows portlet id and instance id
Steps to Embedding portlet in web content
Step: 1
Drag and Drop the web content display portlet in any page
The following is blank web content display portlet in page
Step: 2
In the blank web content portlet you can find toggle button +addlink and click on add link
Now provide web content title and in the Html editor (CK Editor) click on source button to add < runtime- portlet/> tag in the content editor
Step: 3
Now add run time portlet tag and pass portlet name/id and if portlet is instanceable then pass instance id as attributes
Assume we are going to add asset publisher portlet so this portlet is instanceable. We already know how to find portlet id and instance id
The following screen shows add portlet run time tag in web content
Finally click on publish button so that web content will be published and we can see asset publisher portlet in web content portlet.
The following screen shows asset publisher portlet inside web content display portlet
Using Portlet sharing java script code snippet
Liferay have default feature to share every portlet in anywhere in other websites. Liferay have provided java script code snippet to share portlet in other websites.
This is simple java script snippet and we can use in any html page so that we can see portlet. This portlet will be render as iframe in the page.
The following is steps to use Portlet sharing snippet in web content and to show portlet
Step: 1
Drag and drop desired portlet in any page
Step: 2
Go to portlet configuration
Step: 3
Find sharing tab and click on sharing then you can some java script code snippet and copy the code snippet
Step: 4
Drag and Drop the web content display portlet in any page
The following is blank web content display portlet in page
Step: 5
In the blank web content you can find toggle button +add link click on add link
Now give Web content name and in the Html editor (CK Editor) click on source button to portlet sharing java script code snippet
Step: 6
Add the portlet sharing java script code snippet in web content editor that is we already copy
Finally click on publish button so that web content will be published and we can see asset publisher portlet in web content portlet.
The following screen shows asset publisher portlet inside web content display portlet.
Note:
When we want share portlet and want to use portlet in other places we need consider following things
We need to add following xml tag in portlet liferay-portlet.xmlfile
<add-default-resource>true</add-default-resource> <system>true</system> |
Also need to consider following property (if required add portlet id in the 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 |
More about Portlet ID and Instance Id
Generating Portlet ID for Plugin portlet for 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 portlet 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.
Author
0 comments:
Post a Comment