How to embed a portlet to web content – Liferay 6.2

We use the Liferay web contents to display static contents, images, etc. In some cases, we may need to give some additional functionalities other than static content. We may want to embed a portlet inside the Liferay web content so we can display dynamic content.

In this post, we will see how to add a portlet inside Liferay web content.

Version details: Liferay 6.2

Create web content structure and template

Even though creating a web content structure and template is not necessary to embed a portlet, but gives us an option to pass required parameters from predefined web content structure. We will create a new Liferay structure component with different fields for web content text, portlet name, portlet instance, and query string.

The below image shows the created structure.

emb1

Create a web content template and render the Liferay structure component defined fields. Modify the scripts field as shown below. Here, we are using the <runtime-portlet> tag to embed the portlet into web content. By this, Liferay will render the mentioned portlet into our web content. (We have used Velocity as template language)

<div id="embedded-portlet">
<pre>
${Web_Content.getData()}
<runtime-portlet instance='${Instance-id.getData()}' name='${portlet-id.getData()}' querystring='${Query_String.getData()}'>
</runtime-portlet>
</pre>
</div>

<div id="embedded-portlet">&nbsp;</div>

Create web content and embed the portlet

We can create new web content with required fields that are defined earlier in our web content template.

In the following example, we created a sample web content with the embedded Liferay’s OOTB Loan calculator portlet(with portlet name 61 and a unique portlet instance ID). This portlet will add the portlet inside our web content.

emb2

We can hide the portlet border from Look and Feel > Portlet Configuration and set the Show borders property value to No.

Finally, add the created web content to the page. Following is the image of how the embedded portlet looks inside our web content.

emb3

Conclusion

In this article, we learned how to include a portlet inside Liferay web content.