Friday, 14 November 2014

Embedding portlets in a layout

Create New  Liferay Plugin Project.
Enter columns-1-3-1 for the Project name and Columns 1 3 1 for the Display name.
Select Layout Template as your plugin type.
Click Finish.

You will see following file under /columns-1-3-1-layouttpl/docroot/columns-1-3-1.tpl
open that file and write the following code:

 <div class="tworows" id="main-content" role="main">
    <div class="portlet-layout">
        <div class="portlet-column portlet-column-only" id="column-1">
            $processor.processPortlet("states_WAR_PortletModesportlet") //here we need to give a portlet id which you want include Layout
            $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
        </div>
    </div>
    <div class="portlet-layout">
        <div class="aui-w33 portlet-column portlet-column-first" id="column-2">
            $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
        </div>
        <div class="aui-w33 portlet-column" id="column-3">
            $processor.processColumn("column-3", "portlet-column-content")
        </div>
        <div class="aui-w33 portlet-column portlet-column-last" id="column-4">
            $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
        </div>
    </div>
    <div class="portlet-layout">
        <div class="portlet-column portlet-column-only" id="column-5">
            $processor.processColumn("column-5", "portlet-column-content portlet-column-content-only")
        </div>
    </div>
</div>


Click on save
Do ant deploy
Login into portal[localhost:8080] as a admin
Add new page to portal.
Apply Layout[columns-1-3-1] which you have created
Able to see the portlet along with layout in page.

No comments:

Post a Comment