Blogs
Ray Augé
Recently I was asked how to do this! Well, it's rather simple (providing you understand the limitations of accessing portlets without permission, and portlets that are not allowed to be loaded dynamically; a.k.a. add-default-resource, and so on).
Here goes!
First I created a simple web content structure/type with the following definition:
<root> <dynamic-element name='portlet-id' type='text' index-type='' repeatable='false'></dynamic-element> <dynamic-element name='parameters' type='text' index-type='' repeatable='true'> <dynamic-element name='value' type='text' index-type='' repeatable='false'></dynamic-element> </dynamic-element> </root>
Then I created the following web content template:
<script type="text/javascript" charset="utf-8">
AUI().ready('aui-dialog','aui-dialog-iframe','liferay-portlet-url', function(A) {
var url = Liferay.PortletURL.createRenderURL();
url.setPortletId("${portlet-id.data}");
url.setWindowState('pop_up');
#foreach ($parameter IN $parameters.getSiblings())
url.setParameter("${parameter.data}", "${parameter.value.data}");
#end
window.myDialog = new A.Dialog(
{
title: 'My Dialog',
width: 640,
centered: true
}
).plug(
A.Plugin.DialogIframe,
{
uri: url.toString(),
iframeCssClass: 'dialog-iframe'
}
).render();
});
</script>
As you can see there is a place for setting the portletId to craete an URL for, as well as a repeated section for assigning parameters to the url.
Creating an article with the Portlet Id value of 3 results in a dialog opening with the search portlet.
You can expand this simple example into whatever you like. The Alloy Dialog plugin is very rich and the Liferay.PortletURL library provides a complete API for creating all of the PortletURL types defined by the portlet spec.
Enjoy!
Related Assets...
More Blog Entries...
