Embedding a portlet in Web Content/Liferay Article

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

1. Using <runtime-portlet/> xml tag
2. 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 +add link 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.xml file

<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

Meera Prince

Liferay Top Contributor Award Winner

http://www.liferaysavvy.com