Creating a Portlet Adaptive Page Layout

Portlet page adaptive layouts allow you to customize the layout of the portlet header as well as how individual portlets are displayed. The outer area (header, footer, navigation areas) is based on the Base Page adaptive layout.

The pt:portletpage library includes tags to define all areas of the portlet section of the portal page.

All portlets on the page must be within a portletregiondisplay tag. This tag defines a container for portlets that specifies where and how portlets inside the region are displayed.
The portletdisplay tag displays an entire portlet (header and content), while the portletdisplaycontent tag displays the content of the portlet without the header.

Portlet data is accessed via the portletregiondata tag. The pt:region parameter can be set to any value, as long as it corresponds with a portletregiondisplay section in the page. The following properties are available for each portlet from the portletregiondata tag:

Property	Description
name	The name of the portlet
objid	The ID of the portlet object in the portal.
index	The index of the portlet in the portlet array.
portletidstring	The string identifier of the portlet.
adminprefurl	A link to the associated administrative preference page for the portlet if one exists.
commprefurl	A link to the associated community preference page for the portlet if one exists.
userprefurl	A link to the associated user preference page for the portlet if one exists.
helpurl	A link to the associated help page for the portlet if one exists.
collapseexpandurl	A link for collapsing or expanding the portlet depending on the collapse state of the portlet
iscollapsed	True if the portlet is collapsed, false if it is expanded.
removeurl	A link to remove the portlet from the current page.
hastitlebar	True if portlet title bar is not suppressed, false otherwise.

The pagenamebreadcrumbsdata tag can be used on MyPages and Community Pages (Knowledge Directory adaptive page layout). This tag contains an ordered list representing the path leading up to the current page. This list contains the name and URL that makes up each breadcrumb.
- On a MyPage, the breadcrumb will display a "Home" link as the parent that leads back to the user's main page, followed by the name of the MyPage that the user is on.
- In Communities, the breadcrumb will display all the Communities/SubCommunities leading up to the page. The breadcrumbs will all be hyperlinks except for the last breadcrumb which represents the current page that the user is on.

Additional tags in the pt:portletpage library can be used to display buttons with access to portlet-specific functionality, including refresh, remove, and collapse/expand.

The example below uses tags from the pt:portletpage library to define portlet page components, and legacy tags to implement portal links and navigation and handle logic.

For an overview of adaptive tags, see About Adaptive Tags.
For an introduction to logic tags, see Logic Adaptive Tag Library (pt:logic).
For an introduction to data tags for implementing portal links, see Data Adaptive Tag Library (pt:ptdata).
This example uses the pt:portletpageeditor.addportletsflyoutdata library to add the portlet flyout editor to the portlet page. The pt:portletpageeditor.sortpropertiesdata tag specifies the portlet sort order. For details on these tags, see the tagdocs.
For a list of tags in the pt:portletpage library, see http://download.oracle.com/docs/cd/E13183_01/en/alui/devdoc/docs6x/api_libraries/tagdocs/ali/6.5/portletpage/tld-summary.html. For a complete list of tags, see the 6.5 tagdocs (http://download.oracle.com/docs/cd/E13183_01/en/alui/devdoc/docs6x/api_libraries/tagdocs/ali/6.5/index.html).

Note: This example has been oversimplified for illustration purposes; for a complete implementation of the portlet page layout, see the portletdefaultlayout.html file in the \imageserver\plumtree\portal\private\pagelayouts folder on your ALI image server.

<!-- Portlet Content Area Begin -->
<span xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>

<pt:portletpage.portletregiondata pt:key="region1" pt:region="1" />
<pt:portletpage.portletregiondata pt:key="region2" pt:region="2" />
<pt:portletpage.portletregiondata pt:key="region3" pt:region="3" />

... breadcrumb display ... 

<!-- Start Page Action Buttons -->
<pt:core.comment><!-- get the Portlet Selection Flyout URL --></pt:core.comment>
<pt:portletpageeditor.sortpropertiesdata pt:id="sortprops" pt:scope="session" pt:defaultsort="1"/>

<pt:portletpageeditor.addportletsflyoutdata pt:id="flyoutLink" pt:sortprops="sortprops" pt:propscope="session" />
<pt:logic.existexpr pt:data="flyoutLink" pt:key="hasFlyout"/>
<pt:logic.if pt:expr="$hasFlyout">
    <pt:logic.iftrue>
      <pt:portletpageeditor.flyoutjs pt:flyoutID="portletSelection" pt:onclick="openFlyout" pt:headerId="ali-header-nav" pt:url="$flyoutLink.url" pt:anchorId="ali-pageEdit-anchor" pt:flyoutAnchorText="$#130.ptmsgs_portalinfrastructure" pt:flyinAnchorText="$#301.ptmsgs_portalcommonmsgs"/>
    </pt:logic.iftrue>
</pt:logic.if>

<pt:core.comment><!-- add javascript for collapsing and expanding portlets --></pt:core.comment>
<pt:portletpageeditor.collapseexpandjs pt:onclick="sendCollapseExpandRequest" pt:flyoutID="portletSelection1" />

... page action implementation ....

<table width="100%" height="100%" style="clear:left;">
    <tr>
        <td class="columnOne" valign="top">
  <!-- Vertical Region One -->
  <pt:portletpage.portletregiondisplay class="portletRegion" pt:region="1" pt:direction="v">
    <pt:logic.foreach pt:data="region1" pt:var="curr">
      <pt:logic.variable pt:key="titleBarData" pt:value="$curr.hastitlebar"/>
      <pt:logic.stringexpr pt:expr="($titleBarData) == false" pt:key="suppressTitleBar" />

      <pt:logic.variable pt:key="portletDivStyle" pt:value="ali-portlet-regionone "/>
      <pt:logic.if pt:expr="$curr.ismandatory">
      <pt:logic.iffalse>
        <pt:logic.concat pt:key="portletDivStyle" pt:value1="$portletDivStyle" pt:value2="dndPortlet"/>
      </pt:logic.iffalse>
      </pt:logic.if>

      <pt:core.html pt:tag="div" class="$portletDivStyle" id="$curr.portletidstring">


      <pt:logic.if pt:expr="$curr.iscollapsed"><pt:logic.iffalse>
        <pt:logic.variable pt:key="containerclass" pt:value="ali-portlet-container"/>
      </pt:logic.iffalse><pt:logic.iftrue>
        <pt:logic.variable pt:key="containerclass" pt:value="ali-portlet-container-collapsed"/>
      </pt:logic.iftrue></pt:logic.if>
        <pt:core.html pt:tag="div" class="$containerclass">
        <pt:logic.if pt:expr="$suppressTitleBar">
        <pt:logic.iftrue>
          <!-- Suppress portlet toolbar -->
          <div class="ali-portlet-toolbar">
            <div class="ali-portlet-cornerleft"></div>
            <div class="ali-portlet-cornerright"></div>
          </div>
        </pt:logic.iftrue>
        <pt:logic.iffalse>
        <!-- Display Portlet Header -->
        <div class="ali-portlet-toolbar">
          <div class="ali-portlet-cornerleft"></div>
          <div class="ali-portlet-cornerright"></div>
          <div class="ali-portlet-controlone"><pt:portletpage.portletremovebuttondisplay pt:datavar="curr" pt:scope="tag"/></div>
          <div class="ali-portlet-controlone"><pt:portletpage.portletcollapseexpandbuttondisplay pt:datavar="curr" pt:onclick="sendCollapseExpandRequest" pt:scope="tag"/></div>
          <div class="ali-portlet-controlone"><pt:portletpage.portletpreferencebuttondisplay pt:datavar="curr" pt:scope="tag"/></div>
          <div class="ali-portlet-controlone"><pt:portletpage.portlethelpbuttondisplay pt:datavar="curr" pt:scope="tag"/></div>
          <div class="ali-portlet-controlone"><pt:portletpage.portletrefreshbuttondisplay pt:datavar="curr" pt:scope="tag"/></div>
          <div class="ali-portlet-title"><pt:logic.value pt:value="$curr.name"/></div>
        </div>
        </pt:logic.iffalse>
        </pt:logic.if>
        <!-- Display Portlet Content Body -->
        <div class="ali-portlet-content">
          <pt:portletpage.portletcontentdisplay pt:datavar="curr" pt:colindex="0" pt:scope="tag"/>
        </div>
        <div class="ali-portlet-footer">
          <div class="ali-portlet-botleft"></div>
          <div class="ali-portlet-botright"></div>
        </div>
      </pt:core.html>
      </pt:core.html>
    </pt:logic.foreach>
  </pt:portletpage.portletregiondisplay>
    </td>
    <td class="columnTwo" valign="top">

... portlet regions 2 and 3 ....  
      </td>
    </tr>
</table>

</span>

For details on configuring adaptive page layouts in the portal, see the AquaLogic Interaction Administrator Guide.

Parent topic: About Adaptive Page Layouts (ALI 6.5)

AquaLogic User Interaction Development Guide

Creating a Portlet Adaptive Page Layout