Web contents are normally used to display static contents, images, etc. In some cases, we may need to give some additional functionalities, other than static content. In this post, we will see how to embed a portlet inside Liferay web content.

Following are the main steps:

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 structure with different fields for web content text, portlet name, portlet instance and query string.

Following is the structure created:

emb1

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

${Web_Content.getData()}

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

Create a web content using newly created structure and embed the portlet

Now we can create a new web content, with required fields which are defined earlier in our web content template. In following example, we have created a sample web content with embedded Liferay’s OOTB Loan calculator portlet(with portlet name 61 and a unique portlet instance ID). This will embed 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 into page. Following is the image of how embedded portlet looks inside our web content.

emb3

Also read:

Note: Version used: Liferay 6.2