Thursday, February 17, 2011

How to embed portlet in portlet




I want to create a page with tab panel. There are three tab headers.
Under each tab header, I want content manager update content but he not deal with my tab panel script.

He only update content in each portlet which is configured.
So I embed journal content portlet in a journal content.

<div id="tabs-perolehan" class="ui-tabs-nav">
<ul class="ui-tabs-nav ui-widget-header ui-corner-all">
<li class="ui-corner-top ui-state-default ui-tabs-selected" id="tab-title-1"><a href="#tab-panel-1"><span>TENDER</span></a></li>
<li class="ui-corner-top ui-state-default" id="tab-title-2"><a href="#tab-panel-2"><span>SEBUT HARGA</span></a></li>
<li class="ui-corner-top ui-state-default" id="tab-title-3"><a href="#tab-panel-3"><span>E-BIDDING</span></a></li>
</ul>
<div id="tab-panel-1" class="ui-tabs-panel" style="display: block;">
<div id="embedded-tender">
<runtime-portlet name="56" instance="4411" queryString=""/>
</div>
</div>
<div id="tab-panel-2" class="ui-tabs-panel ui-tabs-hide">
<div id="embedded-sebutharga">
<runtime-portlet name="56" instance="4422" queryString=""/>
</div>
</div>

<div id="tab-panel-3" class="ui-tabs-panel ui-tabs-hide">
<div id="embedded-ebidding">
<runtime-portlet name="56" instance="4433" queryString=""/>
</div>
</div>

</div>

Details:
name="56"; this name belongs to journal content as stated in /WEB-INF/liferay-portlet.xml
instance="xxxx"; We can use any 4 digit number to instance.