Embedding a portlet in web content

 Many people have asked, "How can I embed a portlet in web content". It's actually quite simple, once you know how. So I'll walk you through it.

It;s done via a runtime-portlet tag. The actual syntax looks like this:

<div id="embedded-welcome-portlet">
  <runtime-portlet name="47" instance="4433" queryString=""/>
</div>

(47 is the Hello World portlet)
 
The divs are not necessary, but in order to style the embeded portlet later we need them there.
 
So here is the Structure for the web content with the three pieces of information to pass to the runtime-portlet tag. (If you want, you can use hard coded values in the template of the web content)
 
 
And the template for the web content..
 
 
The template contains...
 
<p>
This is web content, with an embedded portlet!
</p>
 
<div id="embedded-welcome-portlet-$instance-id.getData()">
   <runtime-portlet name="$portlet-id.getData()" instance="$instance-id.getData()" queryString="$query-string.getData()"/>
</div>
 
Where the values from the template are passed in. We're not using the query string for this example.
 
So when rendered, it looks like this...
 
 
And there we have the Hello World portlet in our web content. But I really don't like that frame and title, so lets use CSS to style it.
 
In the web content use the configuration (little wrench) and select "Look and Feel"
 
Then we'll put the CSS under "Advanced Styling" This will use standard portlet CSS styles to change the look. Below is what gets set. Here's where we use the div id to make sure we only style out portlet.

 

 

Then the rendered web content will look like this.

 

But what if you want to use your own portlet? No problem, just use the name it is given by Liferay. In this case we'll use the Web Form portlet since it's not a Liferay built in portlet.

 

 

And now the web content looks like...

 

If the embedded portlet has a configuration option, you can configure it like any portlet to have different values on every page. You can also use the portlet's own Look and Feel to remove the borders or set a custom title. The WebForm portlet does have it's own configuration options (Hello World does not) Unfortunately at this time, you cannot use it's own configuration Look and Feel to style it, as the Web Content that contains it, overrides it's styling. 

 

Since one of the parameters is an instance-id, you can have multiple embedded instances of the same portlet on the page as below.

And there you are! A portlet embedded in web content.

If you're interested in more leave a comment. Thanks for reading.

 

Write a blog post too!

Write a deep dive into how you use Liferay projects in your technology stack. Or let people know useful tips and tricks for a particular functionality. The Liferay community needs you!

Login or Create an account