Skip Headers
Oracle® Fusion Middleware User Interface Customization Guide for Oracle WebCenter Interaction
10g Release 4 (10.3.3.0.0)

Part Number E14110-03
Go to Documentation Home
Home
Go to Table of Contents
Contents
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

3 Using Adaptive Page Layouts

Adaptive page layouts allow you to change the look and feel of the portal user interface using adaptive tags in standard XHTML. Adaptive page layouts can be used in most areas of the portal. Each page layout type has an associated tag library. The tags in each library only work in the related page layout. The base page library and the standard adaptive tag libraries (pt:common, pt:core, pt:logic, pt:ptdata, pt:ptui, pt:standard and pt:transformer) work on any page with a portal banner and are used in all page layouts.

This chapter provides detailed information on customizing each of the page layout types. For additional information, see the following resources:

Available Adaptive Page Layouts

The following adaptive page layouts are available in Oracle WebCenter Interaction. For more information on customizing these layouts, see the sections that follow.

Page Layout Type Description Library

Base Page

Controls the layout for components that are common to each page (header, footer, navigation).

pt:basepage

Profile Page

Controls the layout for components that are common to each user profile page.

pt:basepage

Login Page

Controls the layout of the login page.

pt:ptui

Portlet Page

Controls the layout for the portlet area of the portal page.

pt:portletpage

Knowledge Directory

Controls the layout for the content area of the Directory.

pt:kdpage

Search Results

Controls the layout for the content area of search results.

pt:searchpage

Portlet Selection

Controls the layout of the pop-up or fly-out editor used to select portlets on a portlet page. Note: In most implementations, there is no reason to modify this page layout.

pt:portletpageeditor

Join Communities

Controls the layout of the pop-up or fly-out editor used to join communities on a portal page.

pt:joincommunitypageeditor

My Account Page

Controls the layout of the My Account page in the portal.

pt:ptui

Error Page

Controls tha layout of the portal error page. These tags can also be used on any portal page to display standard errors.

pt:ptui

iPhone

Controls the layout of portal pages delivered for the iPhone interface.

(standard libraries)


Creating a Base Page Adaptive Page Layout

The Base Page layout defines components that are common to each page (header, footer, navigation, content area). The Profile Page layout is almost identical, but uses a user profile search box instead of the standard search box.

The pt:basepage library includes tags to display all common sections of the portal page.

The example below uses tags from the pt:basepage library to define common page components, and standard adaptive tags to implement portal links and handle logic. For detailed information on standard adaptive tags, including logic tags and data tags for implementing portal links , see the Oracle WebCenter Interaction Web Service Development Guide.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pt="http://www.plumtree.com/xmlschemas/ptui/">
<head>
<title><pt:basepage.title/></title>
<pt:standard.stylesheets/>
<link href="pt://images/plumtree/portal/private/css/mainstyle.css" rel="stylesheet" type="text/css" />
 
<!-- Dojo Initialization, create a custom namespace -->
<script type="text/javascript">
        var djConfig = {
            isDebug: false,
            scopeMap :  [ ["dojo", "alidojo"] ]
         };
</script>
 
<!-- Dojo is used by drag and drop and flyout editor -->
<script type="text/javascript" src="pt://images/plumtree/portal/private/js/dojo.js"></script>
 
<!-- This tag displays the html body tag and initializes page JavaScript. -->
<pt:basepage.pagebody marginwidth="0" marginheight="0" topmargin="0">
<div id="ali-header-nav">
 
<!-- This area is used to build links to portal components displayed in the top bar -->
<pt:basepage.navarea pt:area="TOPBAR"/>
 
... banner actions ....
 
<pt:basepage.navarea pt:area="ABOVEHEADER"/>
<pt:basepage.header/>
 
<!-- This area is used to build links to portal navigation elements -->
<pt:basepage.navarea pt:area="BELOWHEADER"/>
 
... navigation links ... 
 
  <pt:basepage.navarea pt:area="LEFTOFBODY"/>
</div>
<div style="float:right; width:200px;" >
  <pt:basepage.navarea pt:area="RIGHTOFBODY"/>
</div>
<pt:basepage.navarea pt:area="ABOVEBODY"/>
<pt:common.error/>
<pt:basepage.content/>
<pt:basepage.navarea pt:area="BELOWBODY"/>
<pt:basepage.navarea pt:area="ABOVEFOOTER"/>
<pt:basepage.footer/>
<pt:basepage.navarea pt:area="BELOWFOOTER"/>
</pt:basepage.pagebody>
</html>

Creating a Login Page Adaptive Page Layout

Login Page layouts allow you to customize the layout of the portal login page. The outer area (header, footer, navigation areas) is based on the Base Page adaptive layout. Use this layout to customize the entire login page (with no portlets); use the Portal Login portlet if you want users to have access to the portal as a guest.

The pt:ptui library includes tags to define all necessary login elements.

All login tags must be contained within a <pt:ptui.loginform> tag. The following tags are used to implement specific elements within the login form:

Tag Description

ptui:loginusername

Displays the user name text box for the login form.

ptui:loginpassword

Displays the password text box for the login form.

ptui:loginauthsource

Displays the Authentication Source dropdown list. (If AllowDefaultLoginPageAuthsource in portalconfig.xml is set to 3, this tag displays nothing.)

ptui:loginrememberme

Displayts the 'Remember My Password' checkbox. This tag works in two ways:

  • If used without the key attribute, it displays the 'Remember My Password' checkbox.

  • If the 'key' optional attribute is given a value, the tag outputs the name of the inputcontrol as the key parameter's value and displays the body of the html inside it.

This tag displays the above outputs only when 'AllowAutoConnect' in portalconfig.xml is enabled.

ptui:createaccount

Displays a "Create Account" link. If this tag is used as a singleton tag, the text "Create Account" will be used. If opening and closing tags are used, the HTML inside the tag will be displayed as the link. (If the Allow Creation of Self Registered Users option in the Portal Settings section of portal Administration is not enabled, this tag will display nothing. )

ptui:loginoptionsenabled

Optional. Conditionally processes inner content based on the option parameter and relevant portal settings. The following values are allowed in the option attribute: authsource, remembermypassword, and createaccount. For example, if the option attribute is set to remembermypassword and the portal setting for remembermypassword is true, then the HTML inside the tag will be displayed.

ptui:loginbutton

Displays the login button.


Creating a Portlet Adaptive Page Layout

Portlet Page 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.

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 standard adaptive tags to implement portal links and navigation and handle logic. For detailed information on standard adaptive tags, including logic tags and data tags for implementing portal links , see the Oracle WebCenter Interaction Web Service Development Guide.

This example uses the <pt:portletpageeditor.addportletsflyoutdata> tag to add the portlet flyout editor to the portlet page. For details, see Creating a Portlet Selection Adaptive Page Layout.

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 portal image service.

<!-- 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>

Creating a Knowledge Directory Adaptive Page Layout

The Knowledge Directory adaptive page layout defines the content area of the Directory. The outer area (header, footer, navigation areas) is based on the Base Page adaptive layout.

All content in the Directory can be displayed using tags in the pt:kdpage library. The tags in this library can only be used in the Knowledge Directory page layout.

The example below uses tags from the pt:kdpage library to define Directory page components, and logic tags to handle iteration and display. For detailed information on standard adaptive tags, including logic tags, see the Oracle WebCenter Interaction Web Service Development Guide.

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

The first section of the page retrieves the folder data.

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<div id="content" xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
    <pt:kdpage.currentfolderdata pt:id="currentfolder"/>
    <pt:kdpage.paginationdata pt:id="pagination" pt:pageslist="pageslist" pt:pagestodisplay="2"/>
    <pt:logic.variable pt:key="currentfolderlevel" pt:value="$currentfolder.level"/>
    <pt:logic.stringexpr pt:expr="($currentfolderlevel) == 1" pt:key="isrootfolder"/>

After the breadcrumbs section (not shown here), the next section implements the column display. This section defines an index and divid for each column (3 in this example) The code iterates over the subfolders to display each folder in the correct column, using logic tags to divide the subfolder index by the number of columns to determine which column to display each folder. To change the number of columns, you would add or remove folders from the <pt:logic.collection pt:key="foldercolumns"> section and change the divisor in the <pt:logic.intops pt:expr="($subfolderindex) % 3" pt:key="col"/> expression to reflect the correct number of columns.

... breadcrumbs section ... 

        <!-- Start Root Folder Display -->
        <pt:logic.if pt:expr="$isrootfolder">
        <pt:logic.iftrue>
                <pt:logic.variable pt:key="displayrelatedresource" pt:value="false"/>
                <div id="ali-kd-main-bar">
                </div>

                <pt:core.comment>This collection contains the meta-data about the 3 subfolder columns.</pt:core.comment>

                <pt:logic.collection pt:key="foldercolumns">
                        <pt:logic.data index="0" divid="ali-kd-main-col1"/>
                        <pt:logic.data index="1" divid="ali-kd-main-col2"/>
            <pt:logic.data index="2" divid="ali-kd-main-col3"/>
                </pt:logic.collection>

                <!-- Displaying Columns Start -->
                <pt:logic.foreach pt:data="foldercolumns" pt:var="foldercolumn">

                        <pt:kdpage.subfoldersdata pt:id="subfolders"/>
                        <pt:logic.collectionlength pt:data="subfolders" pt:key="flength"/>
                        <pt:logic.intexpr pt:expr="($flength) > 0" pt:key="hasfolders"/>

                        <pt:logic.if pt:expr="$hasfolders">
                                <pt:logic.iftrue>

                                        <pt:core.html pt:tag="div" id="$foldercolumn.divid">
                                                <!-- Display Each Folder Start -->
                                                <pt:logic.foreach pt:data="subfolders" pt:var="subfolder">
                                                        <pt:logic.intops pt:expr="($subfolderindex) % 3" pt:key="col"/>
                                                        <pt:logic.intexpr pt:expr="($col) == ($foldercolumn.index)" pt:key="incol"/>
                                                        <pt:logic.if pt:expr="$incol">
                                                                <pt:logic.iftrue>
                                                                        <div class="ali-kd-main-header">
                                                                            <pt:logic.variable pt:key="htmlEncodedName" pt:value="$subfolder.name" pt:encode="1" />
                                                                                <pt:core.html pt:tag="a" href="$subfolder.url" title="$htmlEncodedName">
                                                                                        <pt:logic.value pt:value="$subfolder.name"/>
                                                                                </pt:core.html>
                                                                        </div>
                                                                        <!-- Display Subfolders Folder Start -->
                                                                        <pt:logic.variable pt:key="subsubfolderskey" pt:value="$subfolder.subsubfolderskey"/>
                                                                        <pt:logic.collectionlength pt:data="$subsubfolderskey" pt:key="flength"/>
                                                                        <pt:logic.intexpr pt:expr="($flength) > 0" pt:key="hassubsubfolders"/>
                                                                        <pt:logic.if pt:expr="$hassubsubfolders">
                                                                                <pt:logic.iftrue>
                                                                                        <div class="ali-kd-main-lists">
                                                                                                <ul>
                                                                                                        <pt:logic.foreach pt:data="$subsubfolderskey" pt:var="subsubfolder">
                                                                                                                <pt:core.comment><!-- Only display max 5 subfolder --></pt:core.comment>
                                                                                                                <pt:logic.intexpr pt:expr="($subsubfolderindex) < 5" pt:key="undermax"/>
                                                                                                                <pt:logic.if pt:expr="$undermax">
                                                                                                                <pt:logic.iftrue>
                                                                                                                        <li>
                                                                                                                                <pt:logic.variable pt:key="htmlEncodedName" pt:value="$subsubfolder.name" pt:encode="1" />
                                                                                                                                <pt:core.html pt:tag="a" href="$subsubfolder.url" title="$htmlEncodedName">
                                                                                                                                        <pt:logic.value pt:value="$subsubfolder.name"/>
                                                                                                                                </pt:core.html>
                                                                                                                        </li>
                                                                                                                </pt:logic.iftrue>
                                                                                                                </pt:logic.if>
                                                                                                        </pt:logic.foreach>
                                                                                                </ul>
                                                                                        </div>
                                                                                </pt:logic.iftrue>
                                                                        </pt:logic.if>
                                                                </pt:logic.iftrue>
                                                        </pt:logic.if>
                                                </pt:logic.foreach>
                                                <!-- Display Each Folder End -->
                                        </pt:core.html>

                                </pt:logic.iftrue>
                        </pt:logic.if>
                </pt:logic.foreach>
                <!-- End Display Columns -->
        </pt:logic.iftrue>
        <!-- End Root Folder Display -->

After the sorting and filtering section (not shown here), the next section displays the document list and content.

<!-- Start Document List and content -->
                <div id="ali-kd-content-container">
                        <div id="ali-kd-documents">
                            <div id="ali-kd-docs-showing">
                                <pt:logic.value pt:value="$#1932.ptmsgs_portalbrowsingmsgs"/>
                                <pt:logic.value pt:value="$pagination.start"/>
                                -
                                <pt:logic.value pt:value="$pagination.end"/>
                                <pt:logic.value pt:value="$#811.ptmsgs_portalbrowsingmsgs"/>
                                <pt:logic.value pt:value="$pagination.total"/>
                                <pt:logic.value pt:value="$#1043.ptmsgs_portalbrowsingmsgs"/>
                            </div>

... edit document code ... 

             <!-- Start display documents -->
                                            <pt:logic.foreach pt:data="docs" pt:var="doc">
                            <pt:logic.variable pt:key="htmlEncodedName" pt:value="$doc.name" pt:encode="1" />
                            <tr>
                                <!-- Document Image Icon -->
                                <td><pt:core.html pt:tag="img" src="$doc.imagesrc" alt="$htmlEncodedName"/></td>
                                <td>
                                    <!-- Document Title -->
                                    <p class="ali-kd-docs-title">
                                            <pt:logic.variable pt:key="htmlEncodedName" pt:value="$doc.name" pt:encode="1" />
                                                <pt:core.html pt:tag="a" href="$doc.url" title="$htmlEncodedName"><pt:logic.value pt:value="$doc.name"/></pt:core.html>
                                        </p>
                                        <!-- Document Description -->
                                        <p>
                                                <pt:logic.variable pt:key="description" pt:value="$doc.description"/>
                                            <pt:logic.stringexpr pt:expr="($description) == EMPTY_STRING" pt:key="nodescription"/>
                                            <pt:logic.if pt:expr="$nodescription">
                                                <pt:logic.iftrue>
                                                    <i><pt:logic.value pt:value="$#832.ptmsgs_portalbrowsingmsgs"/></i>
                                                </pt:logic.iftrue>
                                                    <pt:logic.iffalse>
                                                        <pt:logic.value pt:value="$doc.description"/>
                                                </pt:logic.iffalse>
                                            </pt:logic.if>
                                        </p>
                                    <p class="ali-kd-docs-modified">
        
... pagination code ...

                <div id="ali-kd-side">
                        <ul id="ali-kd-subfolder">
                    <pt:kdpage.subfoldersdata pt:id="subfolders"/>
                        <pt:logic.collectionlength pt:data="subfolders" pt:key="flength"/>
                        <pt:logic.intexpr pt:expr="($flength) > 0" pt:key="hasfolders"/>
                        <pt:logic.if pt:expr="$hasfolders">
                                <pt:logic.iftrue>
                                        <pt:logic.value pt:value="$#1931.ptmsgs_portalbrowsingmsgs"/>
                                    <pt:logic.foreach pt:data="subfolders" pt:var="subfolder">
                                        <li>
                                            <pt:logic.variable pt:key="htmlEncodedName" pt:value="$subfolder.name" pt:encode="1" />
                                                        <pt:core.html pt:tag="a" href="$subfolder.url" title="$htmlEncodedName"><pt:logic.value pt:value="$subfolder.name"/></pt:core.html>
                                                </li>
                                        </pt:logic.foreach>
                                </pt:logic.iftrue>
                        </pt:logic.if>
                        </ul>

...related resource display code ...

        </pt:logic.iffalse>
    </pt:logic.if>
</div>
<!-- End documents view -->

Creating a Search Results Adaptive Page Layout

The Search Results page layout defines the search results content area. The outer area (header, footer, navigation areas) is based on the Base Page adaptive layout.

The pt:searchpage library includes a set of tags to customize search results display. The <pt:searchpage.searchresultsdata> tag provides all the data needed to display search results. Each result is a DataObject that includes the following variables:

Variable Description

name

The name of the result.

description

The description of the result.

rank

The rank of the result.

resulthref

A gatewayed link to the result.

resultonclick

An onclick handler for result link if a handler exists.

resulttarget

The target window name for result link if a target exists.

icon

The URL to the icon for the result.

iconalttext

Alternate text for the icon associated with the result.

iconwidth

The width of the icon associated with the result, in pixels.

lastmodified

A string in the current locale representing the last modified date.

propertieshref

A link to the properties for the result if a properties link exists.

propertiesonclick

An onclick handler for result link if a properties link exists.

isbestbet

True if the result is a best bet, false otherwise.

isinmultiplefolders

True if the result occurs in more than one Directory folder.

folderpathhref

A link to the Directory folder for the result if one exists.

folderpath

The path to the Directory folder for the result if one exists.

projectname

The name of the Collaboration project containing the result if the result is a Collaboration item.

projectonclick

An onclick handler for the link to the Collaboration project containing the result if the result is a Collaboration item.

lastpublishedby

The name of the last publishing user if the result is a Publisher item.

associatedobjectsonclick

An onclick handler for the link to the associated objects for the result if the result is a Publisher item.


The <pt:searchpage.paginationdata> tag provides variables to handle pagination. The <pt:searchpage.followupformdata> tag generates the data required to create the follow-up search form shown on the results page. Additional tags define specific form elements.

The example below uses tags from the pt:searchpage library to define Search Results components, and logic tags to iterate over results. For detailed information on standard adaptive tags, including logic tags, see the Oracle WebCenter Interaction Web Service Development Guide.

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

<div id="content" xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
        <pt:core.comment>
                <!-- Layout for the search results page.  This layout file renders the portal search results page.
                         It shows a followup search form and results.
                 -->
        </pt:core.comment>
    <pt:searchpage.searchresultsdata pt:id="groupedresults"/>
        <pt:searchpage.searchsummarydata pt:id="summary"
                                                                         pt:groups="groups"
                                                                         pt:spellcorrections="spellcorrections"
                                                                         pt:breadcrumbs="breadcrumbs"
                                                                         pt:properties="properties"
                                                                         pt:collabprojects="collabprojects"
                                                                         pt:portlets="portlets"
                                                                         pt:folders="folders"
                                                                         pt:communities="communities"
                                                                         pt:objecttypes="objecttypes"/>

... search modification and sorting implementation ... 

        <div id="ali-search-results">
            <pt:logic.collectionlength pt:data="groupedresults" pt:key="resultslength"/>
            <pt:logic.intexpr pt:expr="($resultslength) > 0" pt:key="hasResults"/>
            <pt:logic.if pt:expr="$hasResults">
        <pt:logic.iftrue>
            <table id="ali-search-results-table">
            <pt:logic.foreach pt:data="groupedresults" pt:var="resultsgroup">
                <pt:logic.variable pt:key="results" pt:value="$resultsgroup.groupresultskey"/>
                <pt:logic.collectionlength pt:data="$results" pt:key="resultslength"/>
                <pt:logic.intexpr pt:expr="($resultslength) > 0" pt:key="hasResults"/>
                <pt:logic.if pt:expr="$hasResults">
                    <pt:logic.iftrue>
                        <pt:logic.foreach pt:data="$results" pt:var="result">
                            <pt:logic.variable pt:key="htmlEncodedName" pt:value="$result.name" pt:encode="1" />
                            <tr>
                                <td><pt:core.html pt:tag="img" src="$result.icon" alt="$htmlEncodedName"/></td>
                                <td>
                                    <p class="ali-kd-docs-title">
                                        <pt:logic.existexpr pt:data="result.resultonclick" pt:key="hasResultOnclick"/>
                                                <pt:logic.if pt:expr="$hasResultOnclick">
                                                  <pt:logic.iftrue>
                                                <pt:core.html pt:tag="a" href="$result.resulthref" onclick="$result.resultonclick" title="$htmlEncodedName"><pt:logic.value pt:value="$result.name"/></pt:core.html>
                                                  </pt:logic.iftrue>
                                                  <pt:logic.iffalse>
                                                        <pt:logic.existexpr pt:data="result.resulttarget" pt:key="hasResultTarget"/>
                                                        <pt:logic.if pt:expr="$hasResultTarget">
                                                          <pt:logic.iftrue>
                                                                <pt:core.html pt:tag="a" href="$result.resulthref" target="$result.resulttarget" title="$htmlEncodedName"><pt:logic.value pt:value="$result.name"/></pt:core.html>
                                                          </pt:logic.iftrue>
                                                          <pt:logic.iffalse>
                                                                <pt:core.html pt:tag="a" href="$result.resulthref" title="$htmlEncodedName"><pt:logic.value pt:value="$result.name"/></pt:core.html>
                                                          </pt:logic.iffalse>
                                                        </pt:logic.if>
                                                  </pt:logic.iffalse>
                                                </pt:logic.if>
                                    </p>
                                    <p>
                                        <pt:logic.existexpr pt:data="result.description" pt:key="hasDesc"/>
                                                <pt:logic.if pt:expr="$hasDesc">
                                                        <pt:logic.iftrue>
                                                    <pt:core.comment><!-- The description contains HTML from search, and is safe, so we shouldn't HTML encode it. --></pt:core.comment>
                                                    <pt:logic.value pt:value="$result.description" pt:encode="0"/>&nbsp;
                                                        </pt:logic.iftrue>
                                                        <pt:logic.iffalse>
                                                    <i><pt:logic.value pt:value="$#832.ptmsgs_portalbrowsingmsgs"/></i>
                                                        </pt:logic.iffalse>
                                                </pt:logic.if>
                                    </p>
                                    <p class="ali-search-results-modified">
                                        <pt:core.localize pt:id="1918" pt:file="ptmsgs_portalbrowsingmsgs" pt:replace0="$result.lastmodified" />
                                            <pt:logic.existexpr pt:data="result.propertieshref" pt:key="hasPropsLink"/>
                                                <pt:logic.if pt:expr="$hasPropsLink">
                                                        <pt:logic.iftrue>
                                                                    <pt:core.html pt:tag="a" href="$result.propertieshref" onclick="$result.propertiesonclick" title="$#1657.ptmsgs_portalbrowsingmsgs"><pt:logic.value pt:value="$#31.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
                                                        </pt:logic.iftrue>
                                                </pt:logic.if>
                                    </p>
                                </td>
                            </tr>
                        </pt:logic.foreach>
                    </pt:logic.iftrue>
                </pt:logic.if>
            </pt:logic.foreach>
            </table>
        
... page navigation implementation ...

        <pt:logic.iffalse>
            <table id="ali-search-results-table">
                <tr><td>
                    <p><pt:logic.value pt:value="$#848.ptmsgs_portalbrowsingmsgs"/></p>
                </td></tr>
            </table>
            <br />
        </pt:logic.iffalse>
            </pt:logic.if>
    </div>
</div>
</div>

Creating a Portlet Selection Adaptive Page Layout

Portlet Selection page layouts allow you to customize the portlet flyout editor used to add and remove portlets from a page.

The pt:portletpageeditor library contains tags to implement a custom portlet flyout editor (DHTML). Many of the tags in this library are intended for use in adaptive portlet layout pages that include the portlet flyout editor.

The rest of the tags in the library are used to create the flyout editor in the Portlet Selection adaptive page layout.

The example below uses tags from the pt:portletpageeditor library to define portlet flyout editor components, and logic tags to iterate through the portlets displayed in the editor. For detailed information on standard adaptive tags, including logic tags, see the Oracle WebCenter Interaction Web Service Development Guide.

<div xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
<pt:core.comment><!-- this input is required so that IE doesn't strip out the javacript tags when we add it to a div's innerHTML --></pt:core.comment>
<input type='hidden'/>
<pt:portletpageeditor.portletjs pt:add="addPortlet" pt:remove="removePortlet" pt:preview="previewPortlet" pt:invitation="invite" pt:addbundle="addBundle" pt:openbundle="openBundle" pt:orderbyprop="updateOrderByProperty" pt:flyoutID="portletSelection"/>
<pt:core.comment><!-- NOTE: many tags must be initialized at the top so they can be used in the rest of the page. --></pt:core.comment>
<pt:portletpageeditor.portletdata pt:id="portlets"/>
<pt:logic.collectionlength pt:data="portlets" pt:key="plength"/>
<pt:logic.intexpr pt:expr="($plength) > 0" pt:key="hasportlets"/>

<pt:portletpageeditor.portletbrowsemode pt:flyoutID="portletSelection" pt:id="browseMode"/>
<div id="ali-edit-container">
<div id="ali-edit-toolbar">
<div id="ali-edit-cornerleft"></div>
<div id="ali-edit-title"><pt:logic.value pt:value="$#301.ptmsgs_portalcommonmsgs"/></div>
<div id="ali-edit-cornerright"></div>
<div class="ali-portlet-controlone"><a onclick="try {bea.PortalPageDnD.dndToggle(); PTFlyoutportletSelection.openFlyout(); return false;} catch (e) {return true;}" href=""><img src="pt://images/plumtree/portal/private/img/action_portlet_remove.gif" /></a></div>
</div>
<div id="ali-edit-tabs-container">
    <div id="ali-edit-rename">
    <pt:ptdata.currpagedata pt:id="currpage" />
    <pt:logic.foreach pt:data="currpage" pt:var="page" >
      <pt:logic.intexpr pt:expr="($page.classid) == 518" pt:key="isMyPage" />
      <pt:logic.if pt:expr="$isMyPage">
        <pt:logic.iftrue>
          <pt:core.comment><!-- Page data object is a MyPage --></pt:core.comment>
          <pt:portletpageeditor.objectrenamehelper pt:objectname="$page.title" pt:objectid="$page.objectid" pt:classid="$page.classid" pt:in_prefix="page_rename"/>
        </pt:logic.iftrue>
        <pt:logic.iffalse>
          <pt:core.comment><!-- Page data object is a Community Page.  ObjectID is for the community, not the page, sooverride it here. --></pt:core.comment>
          <pt:portletpageeditor.objectrenamehelper pt:objectname="$page.title" pt:objectid="$page.childid" pt:classid="514" pt:in_prefix="page_rename"/>
        </pt:logic.iffalse>
      </pt:logic.if>
      <pt:core.comment><!-- pt:portletpageeditor.objectrenamehelper tag sets the isEditable variable to true or false depending on whether the user has edit access to tha page. --></pt:core.comment>
      <pt:logic.if pt:expr="$isEditable"><pt:logic.iftrue>
        <pt:logic.value pt:value="$#1907.ptmsgs_portalbrowsingmsgs"/>
        <pt:logic.variable pt:key="htmlEncodedTitle" pt:value="$page.title" pt:encode="1" />
        <pt:core.html pt:tag="input" type="text" class="ali-edit-rename-textbox" id="$input_id" value="$htmlEncodedTitle" size="20" maxlength="255"/>
      </pt:logic.iftrue></pt:logic.if>
    </pt:logic.foreach>
    </div>

    <!-- Start "Go To Advanced Editor" Link -->
    <pt:core.comment>Check whether current page is a My Page or Community Page and get the link for the Page Editor.</pt:core.comment>
    <pt:ptdata.currcommunitypagesdata pt:id="currCommPagesData" />
    <pt:logic.existexpr pt:data="currCommPagesData" pt:key="hasCurrCommPagesData"/>
    <pt:ptdata.communityactionsdata pt:id="commActionLinks" />
    <pt:ptdata.mypageactionsdata pt:id="myPageActionLinks" />
    <pt:logic.existexpr pt:data="commActionLinks" pt:key="hasCommActionLinks"/>
    <pt:logic.existexpr pt:data="myPageActionLinks" pt:key="hasMyPageActionLinks"/>
    <pt:logic.variable pt:key="commActionEdit" pt:value="$#308.ptmsgs_portalcommonmsgs"/>
    <pt:logic.variable pt:key="myPageActionEdit" pt:value="$#301.ptmsgs_portalcommonmsgs"/>

        <pt:logic.if pt:expr="$hasCurrCommPagesData">
      <pt:logic.iftrue>
        <pt:core.comment>Loop through list of Community action URLs and find the Edit Link.</pt:core.comment>
        <pt:logic.foreach pt:data="commActionLinks" pt:var="link">
          <pt:logic.stringexpr pt:expr="($link.title) == ($commActionEdit)" pt:key="addCommEditLink" />
          <pt:logic.if pt:expr="$addCommEditLink">
            <pt:logic.iftrue>
              <div class="ali-edit-tabs-right">
                <pt:core.html pt:tag="a" href="$link.url" ><pt:logic.value pt:value="$#1934.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
              </div>
            </pt:logic.iftrue>
          </pt:logic.if>
        </pt:logic.foreach>
      </pt:logic.iftrue>
      <pt:logic.iffalse>
        <pt:core.comment>Loop through list of My Page action URLs and find the Edit Link.</pt:core.comment>
        <pt:logic.foreach pt:data="myPageActionLinks" pt:var="link">
          <pt:logic.stringexpr pt:expr="($link.title) == ($myPageActionEdit)" pt:key="addMyPageEditLink" />
          <pt:logic.if pt:expr="$addMyPageEditLink">
            <pt:logic.iftrue>
              <div class="ali-edit-tabs-right">
                <pt:core.html pt:tag="a" href="$link.url" ><pt:logic.value pt:value="$#1934.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
              </div>
            </pt:logic.iftrue>
          </pt:logic.if>
        </pt:logic.foreach>
      </pt:logic.iffalse>
    </pt:logic.if>
    <!-- End "Go To Advanced Editor" Link -->
</div>
<pt:core.comment><!-- pt:portletpageeditor.objectrenamehelper tag sets the isEditable variable to true or false depending on whether the user has edit access to tha page. --></pt:core.comment>
<pt:logic.if pt:expr="$isEditable"><pt:logic.iftrue>
    <div id="ali-edit-portlets">
        <div id="ali-edit-search-container">
            <div id="ali-edit-portlets-text"><pt:logic.value pt:value="$#1908.ptmsgs_portalbrowsingmsgs"/></div>
        </div>
        <div id="ali-edit-sorting-bar">
            <pt:logic.if pt:expr="$browseMode"><pt:logic.iffalse>
            <div id="ali-edit-sort">
                <form name="sort">
                        <pt:logic.value pt:value="$#1936.ptmsgs_portalbrowsingmsgs"/>
                    <select onchange="updateOrderByProperty(options[selectedIndex].value); return false;">
                    <pt:portletpageeditor.currsortpropid pt:id="currsortpropid"/>
                    <pt:logic.foreach pt:data="sortprops" pt:var="curr">
                        <pt:logic.stringexpr pt:expr="($curr.id) == ($currsortpropid)" pt:key="iscurrpropid"/>
                        <pt:logic.if pt:expr="$iscurrpropid">
                        <pt:logic.iftrue>
                            <pt:core.html pt:tag="option" selected="true" value="$curr.id"><pt:logic.value pt:value="$curr.title"/></pt:core.html>
                        </pt:logic.iftrue>
                        <pt:logic.iffalse>
                            <pt:core.html pt:tag="option" value="$curr.id"><pt:logic.value pt:value="$curr.title"/></pt:core.html>
                        </pt:logic.iffalse>
                        </pt:logic.if>
                    </pt:logic.foreach>
                    
                    </select>
                </form>
            </div>
            </pt:logic.iffalse></pt:logic.if>
            <div id="ali-edit-portlets-search"><pt:portletpageeditor.portletsearchform pt:name="portletSearch" pt:id="portletSearch" pt:submit="submitPortletSearch" pt:flyoutID="portletSelection" pt:defaulttext="$#1914.ptmsgs_portalbrowsingmsgs">
              <pt:logic.concat pt:key="portletsearchonfocus" pt:value1="if (this.value == '" pt:value2="$#1914.ptmsgs_portalbrowsingmsgs"/><pt:logic.concat pt:key="portletsearchonfocus" pt:value1="$portletsearchonfocus" pt:value2="') this.value='';"/>
              <pt:logic.value pt:value="$#715.ptmsgs_portalbrowsingmsgs"/> <pt:core.html pt:tag="input" type="text" class="edit-portlets-search-box" name="in_tx_query" value="$#1914.ptmsgs_portalbrowsingmsgs" size="20" onkeydown="return handleSearchEvent(event);" onfocus="$portletsearchonfocus"/><pt:core.html pt:tag="input" name="Search" type="button" onClick="return submitPortletSearch();" value="$#1913.ptmsgs_portalbrowsingmsgs" class="edit-portlets-search-button"/>
            </pt:portletpageeditor.portletsearchform></div>
            <pt:logic.if pt:expr="$browseMode"><pt:logic.iffalse>
                  <div id="ali-edit-browse-portlets"><a href="#" onclick="openFolder(1);return false;"><pt:logic.value pt:value="$#1917.ptmsgs_portalbrowsingmsgs"/></a></div>
                </pt:logic.iffalse></pt:logic.if>
        </div>
        
            <div id="ali-edit-breadcrumb-container">
            <pt:core.comment><!-- Browse All Folders (Switching to browse mode opens root folder [ID 1]) --></pt:core.comment>
            <pt:logic.variable pt:value="false" pt:key="isrootfolder"/>
            <pt:logic.if pt:expr="$browseMode"><pt:logic.iftrue>
            <!-- Start breadcrumbs path -->
              <pt:portletpageeditor.browsebreadcrumbsdata pt:id="breadcrumbs"/>
              <div id="ali-edit-breadcrumb"><ul>
                    <pt:logic.foreach pt:data="breadcrumbs" pt:var="breadcrumb">
                            <pt:logic.variable pt:key="breadcrumburl" pt:value="$breadcrumb.url"/>
                            <pt:logic.stringexpr pt:expr="($breadcrumburl) == EMPTY_STRING" pt:key="iscurrentfolder"/>
                            <pt:logic.if pt:expr="$iscurrentfolder"><pt:logic.iftrue>
                              <li><pt:logic.value pt:value="$breadcrumb.name"/></li>
                              <pt:logic.intexpr pt:expr="($breadcrumb.id) == 1" pt:key="isrootfolder"/>
                            </pt:logic.iftrue><pt:logic.iffalse>
                              <pt:logic.concat pt:key="openFolder" pt:value1="openFolder(" pt:value2="$breadcrumb.id"/>
                              <pt:logic.concat pt:key="openFolder" pt:value1="$openFolder" pt:value2="); return false;"/>
                              <pt:logic.variable pt:key="htmlEncodedName" pt:value="$breadcrumb.name" pt:encode="1" />
                              <li><pt:core.html pt:tag="a" href="#" onclick="$openFolder" title="$htmlEncodedName"><pt:logic.value pt:value="$breadcrumb.name"/></pt:core.html></li>
                            </pt:logic.iffalse></pt:logic.if>
                            <pt:logic.separator><li>></li></pt:logic.separator>
                    </pt:logic.foreach>
              </ul></div>
            </pt:logic.iftrue></pt:logic.if>
            </div>
            <!-- End breadcrumbs path -->

            <pt:logic.if pt:expr="$browseMode"><pt:logic.iftrue>
                    <pt:core.comment><!-- Figure out if page is in browse mode and has subfolders --></pt:core.comment>
                    <pt:portletpageeditor.browsesubfoldersdata pt:id="subfolders"/>
                    <pt:logic.collectionlength pt:data="subfolders" pt:key="flength"/>
                    <pt:logic.intexpr pt:expr="($flength) > 0" pt:key="hasfolders"/>
            </pt:logic.iftrue></pt:logic.if>

            <!-- Start Root Folder Display -->
            <pt:logic.if pt:expr="$browseMode"><pt:logic.iftrue>
            <pt:logic.if pt:expr="$isrootfolder"><pt:logic.iftrue>
            <pt:core.comment><!-- folder info has been determined above. --></pt:core.comment>
            <pt:logic.if pt:expr="$hasfolders"><pt:logic.iftrue>
            <div id="ali-edit-table-container">
                <table id="ali-edit-browse-table">
                    <pt:logic.foreach pt:data="subfolders" pt:var="subfolder">
                                <pt:logic.intops pt:expr="($subfolderindex) % 3" pt:key="col"/>
                                <pt:logic.intexpr pt:expr="($col) == 0" pt:key="addTR"/>
                                <pt:logic.if pt:expr="$addTR"><pt:logic.iftrue>
                                    <tr>
                                </pt:logic.iftrue></pt:logic.if>
                        <td class="ali-edit-browse-folder"><img src="pt://images/plumtree/portal/private/img/icon_folder_24px.gif" alt="folder"></td>
                        <td class="ali-edit-browse-description"><p class="ali-edit-portlets-title">
                            <pt:logic.concat pt:key="openFolder"pt:value1="openFolder(" pt:value2="$subfolder.id"/>
                                <pt:logic.concat pt:key="openFolder" pt:value1="$openFolder" pt:value2="); return false;"/>
                                <pt:logic.variable pt:key="htmlEncodedName" pt:value="$subfolder.name" pt:encode="1" />
                                <pt:core.html pt:tag="a" href="#" onclick="$openFolder" title="$htmlEncodedName">
                                <pt:logic.value pt:value="$subfolder.name"/>
                                </pt:core.html>
                        </p></td>
                        <pt:logic.intexpr pt:expr="($col) == 2" pt:key="endTR"/>
                                <pt:logic.if pt:expr="$endTR"><pt:logic.iftrue>
                                    </tr>
                                </pt:logic.iftrue></pt:logic.if>
                    </pt:logic.foreach>
                        <tr>
                            <td colspan="6">
                            <div id="ali-edit-close">
                                    <pt:core.html name="Close" pt:tag="input" type="button" class="edit-portlets-close-button" id="ali-closeButton" value="$#1945.ptmsgs_portalbrowsingmsgs" onclick="try {bea.PortalPageDnD.dndToggle(); PTFlyoutportletSelection.openFlyout(); return false;} catch (e) {return true;}"/>
                            </div>
                        </td>
                    </tr>
                    </table>
                </div>
            </pt:logic.iftrue></pt:logic.if>
            </pt:logic.iftrue></pt:logic.if>
            </pt:logic.iftrue></pt:logic.if>
            <!-- End Root Folder Display -->

            <!-- End Browse Mode Display -->

    <pt:logic.variable pt:value="true" pt:key="show3columns"/>
    <pt:logic.if pt:expr="$browseMode"><pt:logic.iftrue>
            <pt:logic.if pt:expr="$isrootfolder"><pt:logic.iffalse>
                    <pt:logic.if pt:expr="$hasfolders"><pt:logic.iftrue>
                            <pt:logic.variable pt:value="false" pt:key="show3columns"/>
                    </pt:logic.iftrue></pt:logic.if>
            </pt:logic.iffalse></pt:logic.if>
    </pt:logic.iftrue></pt:logic.if>

    <pt:core.comment>This collection and variable contain the metadata about the portlet columns.</pt:core.comment>
    <pt:logic.collection pt:key="columns">
            <pt:logic.data index="0" divid="ali-edit-portlets-column1"/>
            <pt:logic.data index="1" divid="ali-edit-portlets-column2"/>
            <pt:logic.if pt:expr="$show3columns"><pt:logic.iftrue>
                    <pt:logic.data index="2" divid="ali-edit-portlets-column3"/>
            </pt:logic.iftrue></pt:logic.if>
    </pt:logic.collection>
    <pt:logic.collectionlength pt:data="columns" pt:key="portletmod"/>

    <div id="ali-edit-table-container">
        <!-- Start browse mode folder display (except for root landing page) -->
        <pt:logic.if pt:expr="$browseMode"><pt:logic.iftrue>
            <pt:logic.if pt:expr="$isrootfolder"><pt:logic.iffalse>
                    <pt:core.comment><!-- folder info has been determined above. --></pt:core.comment>
                    <pt:logic.if pt:expr="$hasfolders"><pt:logic.iftrue>
                    <table id="ali-edit-browse-table">
                        <pt:logic.foreach pt:data="subfolders" pt:var="subfolder">
                            <pt:logic.intops pt:expr="($subfolderindex) % 3" pt:key="col"/>
                            <pt:logic.intexpr pt:expr="($col) == 0" pt:key="addTR"/>
                            <pt:logic.if pt:expr="$addTR"><pt:logic.iftrue>
                                <tr>
                            </pt:logic.iftrue></pt:logic.if>
                            <td class="ali-edit-browse-folder"><img src="pt://images/plumtree/portal/private/img/icon_folder_24px.gif" alt="folder"></td>
                            <td class="ali-edit-browse-description"><p class="ali-edit-portlets-title">
                                <pt:logic.concat pt:key="openFolder"pt:value1="openFolder(" pt:value2="$subfolder.id"/>
                                <pt:logic.concat pt:key="openFolder" pt:value1="$openFolder" pt:value2="); return false;"/>
                                <pt:logic.variable pt:key="htmlEncodedName" pt:value="$subfolder.name" pt:encode="1" />
                                <pt:core.html pt:tag="a" href="#" onclick="$openFolder" title="$htmlEncodedName">
                                <pt:logic.value pt:value="$subfolder.name"/>
                                </pt:core.html>
                            </p></td>
                            <pt:logic.intexpr pt:expr="($col) == 2" pt:key="endTR"/>
                            <pt:logic.if pt:expr="$endTR"><pt:logic.iftrue>
                                </tr>
                            </pt:logic.iftrue></pt:logic.if>
                        </pt:logic.foreach>
                    </table>
                    </pt:logic.iftrue></pt:logic.if>
            </pt:logic.iffalse></pt:logic.if>
        </pt:logic.iftrue></pt:logic.if>
        <!-- End browse mode folder display (except for root landing page)  -->
        <pt:core.comment><!-- No portlets to display. --></pt:core.comment>
        <pt:logic.if pt:expr="$hasportlets"><pt:logic.iffalse>
                <pt:logic.if pt:expr="$isrootfolder"><pt:logic.iffalse>
                    <table id="ali-edit-table">
                        <tr>
                            <td class="ali-edit-table-description"><pt:logic.value pt:value="$#1939.ptmsgs_portalbrowsingmsgs"/></td>
                        </tr>
                        <tr>
                            <td colspan="6">
                            <div id="Div1">
                                    <pt:core.html name="Close" pt:tag="input" type="button" class="edit-portlets-close-button" id="ali-closeButton" value="$#1945.ptmsgs_portalbrowsingmsgs" onclick="try {bea.PortalPageDnD.dndToggle(); PTFlyoutportletSelection.openFlyout(); return false;} catch (e) {return true;}"/>
                            </div>
                        </td>
                    </tr>
                    </table>
                </pt:logic.iffalse></pt:logic.if>
        </pt:logic.iffalse>
        <pt:logic.iftrue>

        <table id="ali-edit-table">
            <pt:logic.foreach pt:data="columns" pt:var="column">
                <tr>
                    <pt:core.comment>In each column, loop over all the portlets to find the ones for this column.</pt:core.comment>
                    <pt:logic.foreach pt:data="portlets" pt:var="portlet">
                        <pt:logic.intops pt:expr="($portletindex) % ($portletmod)" pt:key="col"/>
                        <pt:logic.intexpr pt:expr="($col) == ($column.index)" pt:key="incol"/>
                        <pt:logic.if pt:expr="$incol">
                        <pt:logic.iftrue>
                            <pt:logic.stringexpr pt:expr="($portlet.type) == bundle" pt:key="isbundle"/>
                            <pt:logic.if pt:expr="$isbundle"><pt:logic.iftrue><pt:core.comment><!-- This is a portlet bundle --></pt:core.comment>
                                <pt:logic.concat pt:key="onclickadd" pt:value1="addBundle(" pt:value2="$portlet.id"/>
                                <pt:logic.concat pt:key="onclickadd" pt:value1="$onclickadd" pt:value2=");"/>
                                <pt:logic.variable pt:key="onclickremove" pt:value="$onclickadd"/>
                            </pt:logic.iftrue>
                            <pt:logic.iffalse><pt:core.comment><!-- This is a portlet --></pt:core.comment>
                                <pt:logic.concat pt:key="onclickremove" pt:value1="removePortlet(" pt:value2="$portlet.id"/>
                                <pt:logic.concat pt:key="onclickremove" pt:value1="$onclickremove" pt:value2=");"/>

                                <pt:logic.concat pt:key="onclickadd" pt:value1="addPortlet(" pt:value2="$portlet.id"/>
                                <pt:logic.concat pt:key="onclickadd" pt:value1="$onclickadd" pt:value2=");"/>
                            </pt:logic.iffalse></pt:logic.if>
                            <pt:logic.concat pt:key="src1" pt:value1="pt://images/plumtree/portal/private/img/icon_portlet_" pt:value2="$portlet.type"/>
                            <pt:logic.concat pt:key="src" pt:value1="$src1" pt:value2=".gif"/>
                            <pt:logic.variable pt:key="swapsrc" pt:value="pt://images/plumtree/portal/private/img/icon_portlet_chosen.gif"/>
                            <pt:logic.stringexpr pt:expr="($portlet.isonpage) == true" pt:key="isonpage"/>
                            <pt:logic.if pt:expr="$isonpage"><pt:logic.iftrue>
                                <pt:logic.variable pt:key="swapsrc" pt:value="$src"/>
                                <pt:logic.variable pt:key="src" pt:value="pt://images/plumtree/portal/private/img/icon_portlet_chosen.gif"/>
                                <pt:logic.variable pt:key="onclickstring" pt:value="$onclickremove"/>
                            </pt:logic.iftrue>
                            <pt:logic.iffalse>
                                <pt:logic.variable pt:key="onclickstring" pt:value="$onclickadd"/>
                            </pt:logic.iffalse></pt:logic.if>
                            <pt:logic.concat pt:key="onclickimg" pt:value1="$onclickstring" pt:value2=" return false;"/>
                            <pt:logic.concat pt:key="divid" pt:value1="portlet" pt:value2="$portlet.id"/>
                            <pt:logic.stringexpr pt:expr="($portlet.mandatory) == true" pt:key="ismandatory"/>
                            <pt:logic.if pt:expr="$ismandatory"><pt:logic.iftrue>
                                <td><pt:core.html pt:tag="img" id="$divid" src="$src" border="0"/></td>
                            </pt:logic.iftrue><pt:logic.iffalse>
                                <td><pt:core.html pt:tag="a" href="#" onclick="$onclickimg" onclickstring="$onclickstring"><pt:core.html pt:tag="img" id="$divid" src="$src" swapsrc="$swapsrc" border="0"/></pt:core.html></td>
                            </pt:logic.iffalse></pt:logic.if>
                            <td class="ali-edit-table-description"><p class="ali-edit-portlets-title"><pt:logic.value pt:value="$portlet.name"/></p>
                                <pt:core.comment><!-- The description contains HTML from search, and is safe, so there is no need to HTML encode it. --></pt:core.comment>
                                <p><pt:logic.value pt:value="$portlet.description" pt:encode="0"/></p>
                                <p>
                                    <pt:logic.stringexpr pt:expr="($portlet.type) == bundle" pt:key="isbundle"/>
                                    <pt:logic.if pt:expr="$isbundle"><pt:logic.iftrue><pt:core.comment><!-- This is a portlet bundle - include add/open links --></pt:core.comment>
                                        <pt:logic.concat pt:key="addurl" pt:value1="addBundle(" pt:value2="$portlet.id"/>
                                        <pt:logic.concat pt:key="addurl" pt:value1="$addurl" pt:value2="); return false;"/>
                                        <pt:core.html pt:tag="a" href="#" onclick="$addurl"><pt:logic.value pt:value="$#1273.ptmsgs_portalbrowsingmsgs"/></pt:core.html>

                                        <pt:logic.concat pt:key="openurl" pt:value1="openBundle(" pt:value2="$portlet.id"/>
                                        <pt:logic.concat pt:key="openurl" pt:value1="$openurl" pt:value2="); return false;"/>
                                        - <pt:core.html pt:tag="a" href="#" onclick="$openurl"><pt:logic.value pt:value="$#1915.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
                                        <p class="ali-edit-portlets-modified"><pt:core.localize pt:id="1918" pt:file="ptmsgs_portalbrowsingmsgs" pt:replace0="$portlet.lastmodified" /></p>
                                    </pt:logic.iftrue>
                                    <pt:logic.iffalse><pt:core.comment><!-- This is a portlet - include add/remove/preview/invite links --></pt:core.comment>
                                        <pt:logic.if pt:expr="$ismandatory"><pt:logic.iffalse>
                                            <pt:logic.if pt:expr="$isonpage"><pt:logic.iftrue>
                                                <pt:logic.variable pt:key="addstyle" pt:value="display:none;"/>
                                                
                                                <pt:logic.variable pt:key="removestyle" pt:value="display:visible;"/>
                                            </pt:logic.iftrue>
                                            <pt:logic.iffalse>
                                                <pt:logic.variable pt:key="addstyle" pt:value="display:visible;"/>
                                                <pt:logic.variable pt:key="removestyle" pt:value="display:none;"/>
                                            </pt:logic.iffalse></pt:logic.if>
                                            <pt:logic.concat pt:key="addid" pt:value1="add-portlet" pt:value2="$portlet.id"/>
                                            <pt:logic.concat pt:key="removeid" pt:value1="remove-portlet" pt:value2="$portlet.id"/>

                                            <pt:logic.concat pt:key="removeurl" pt:value1="removePortlet(" pt:value2="$portlet.id"/>
                                            <pt:logic.concat pt:key="removeurl" pt:value1="$removeurl" pt:value2="); return false;"/>
                                            <pt:core.html pt:tag="a" href="#" onclick="$removeurl" id="$removeid" style="$removestyle"><pt:logic.value pt:value="$#1910.ptmsgs_portalbrowsingmsgs"/></pt:core.html>

                                            <pt:logic.concat pt:key="addurl" pt:value1="addPortlet(" pt:value2="$portlet.id"/>
                                            <pt:logic.concat pt:key="addurl" pt:value1="$addurl" pt:value2="); return false;"/>
                                            <pt:core.html pt:tag="a" href="#" onclick="$addurl" id="$addid" style="$addstyle"><pt:logic.value pt:value="$#1909.ptmsgs_portalbrowsingmsgs"/></pt:core.html> -
                                        </pt:logic.iffalse></pt:logic.if>

                                        <pt:logic.stringexpr pt:expr="($portlet.previewenabled) == true" pt:key="previewEnabled"/>
                                        <pt:logic.if pt:expr="$previewEnabled"><pt:logic.iftrue>
                                            <pt:logic.concat pt:key="previewid" pt:value1="preview-portlet" pt:value2="$portlet.id"/>
                                            <pt:logic.concat pt:key="previewurl" pt:value1="previewPortlet(" pt:value2="$portlet.id"/>
                                            <pt:logic.concat pt:key="previewurl" pt:value1="$previewurl" pt:value2=", '"/>
                                            <pt:logic.concat pt:key="previewurl" pt:value1="$previewurl" pt:value2="$portlet.type"/>
                                            <pt:core.comment><!-- We can't just do this.getAttribute('onpage'), because that doesn't work in IE. --></pt:core.comment>
                                            <pt:logic.concat pt:key="previewurl" pt:value1="$previewurl" pt:value2="', this.attributes.isonpage.nodeValue); return false;"/>
                                            <pt:core.html pt:tag="a" href="#" onclick="$previewurl" id="$previewid" isonpage="$portlet.isonpage"><pt:logic.value pt:value="$#1911.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
                                        </pt:logic.iftrue></pt:logic.if>

                                        <pt:logic.intexpr pt:expr="($portlet.invitationid) != -1" pt:key="invitationEnabled"/>
                                        <pt:logic.if pt:expr="$invitationEnabled"><pt:logic.iftrue>
                                            <pt:logic.concat pt:key="inviteurl" pt:value1="invite(" pt:value2="$portlet.invitationid"/>
                                            <pt:logic.concat pt:key="inviteurl" pt:value1="$inviteurl" pt:value2="); return false;"/>
                                            - <pt:core.html pt:tag="a" href="#" onclick="$inviteurl"><pt:logic.value pt:value="$#1912.ptmsgs_portalbrowsingmsgs"/></pt:core.html>
                                        </pt:logic.iftrue></pt:logic.if>
                                        <p class="ali-edit-portlets-modified"><pt:core.localize pt:id="1918" pt:file="ptmsgs_portalbrowsingmsgs" pt:replace0="$portlet.lastmodified" /></p>
                                    </pt:logic.iffalse></pt:logic.if>
                                </p>
                            </td>
                        </pt:logic.iftrue>
                        </pt:logic.if>
                    </pt:logic.foreach>
                </tr>
            </pt:logic.foreach>
            <tr>
                <td colspan="6">
                    <div id="ali-edit-close">
                        <pt:core.html name="Close" pt:tag="input" type="button" class="edit-portlets-close-button" id="ali-closeButton" value="$#1945.ptmsgs_portalbrowsingmsgs" onclick="try {bea.PortalPageDnD.dndToggle(); PTFlyoutportletSelection.openFlyout(); return false;} catch (e) {return true;}"/>
                    </div>
                    <pt:core.comment><!-- In an AJAX flyout, so wrap the pagination URLs in an AJAX method. --></pt:core.comment>
                    <pt:portletpageeditor.paginationdata pt:id="pagination" pt:pageslist="pageslist" pt:pagestodisplay="2" pt:flyoutID="portletSelection"/>
                    <div id="ali-edit-portlets-pagenav">
                        <ul>
                          <pt:logic.existexpr pt:data="pagination.previousurl" pt:key="linkToPrevious"/>
                          <pt:logic.if pt:expr="$linkToPrevious"><pt:logic.iftrue>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="paginate('" pt:value2="$pagination.previousurl"/>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="$paginatefunc" pt:value2="'); return false;"/>
                              <li><pt:core.html pt:tag="a" href="#" onclick="$paginatefunc" title="$#34.ptmsgs_portalbrowsingmsgs"><pt:logic.value pt:value="$#207.ptmsgs_portalinfrastructure"/></pt:core.html></li>
                            </pt:logic.iftrue><pt:logic.iffalse>
                              <li><pt:logic.value pt:value="$#207.ptmsgs_portalinfrastructure"/></li>
                          </pt:logic.iffalse></pt:logic.if>
                          
                          <pt:logic.existexpr pt:data="pagination.firstpageurl" pt:key="displayFirstPageLink"/>
                          <pt:logic.if pt:expr="$displayFirstPageLink"><pt:logic.iftrue>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="paginate('" pt:value2="$pagination.firstpageurl"/>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="$paginatefunc" pt:value2="'); return false;"/>
                              <li class="ali-edit-number"><pt:core.html pt:tag="a" href="#" onclick="$paginatefunc">1</pt:core.html></li>
                          </pt:logic.iftrue></pt:logic.if>

                          <pt:logic.collectionlength pt:data="pageslist" pt:key="pageslength"/>
                          <pt:logic.intops pt:expr="($pageslength) - 1" pt:key="lastIndex"/>
                          <pt:logic.foreach pt:data="pageslist" pt:var="page">
                            <pt:logic.intexpr pt:expr="($pageindex) == 0" pt:key="firstDisplayedPage"/>
                            <pt:logic.if pt:expr="$firstDisplayedPage"><pt:logic.iftrue>
                              <pt:logic.intexpr pt:expr="($page.number) > 2" pt:key="displayElipses"/>
                              <pt:logic.if pt:expr="$displayElipses"><pt:logic.iftrue>
                                <li><pt:logic.value pt:value="$#137.ptmsgs_infrastructure"/></li>
                              </pt:logic.iftrue></pt:logic.if>
                                </pt:logic.iftrue></pt:logic.if>
                            <pt:logic.existexpr pt:data="page.url" pt:key="linkToPage"/>
                            <pt:logic.if pt:expr="$linkToPage"><pt:logic.iftrue>
                                <pt:logic.concat pt:key="paginatefunc" pt:value1="paginate('" pt:value2="$page.url"/>
                                <pt:logic.concat pt:key="paginatefunc" pt:value1="$paginatefunc" pt:value2="'); return false;"/>
                                <li class="ali-edit-number"><pt:core.html pt:tag="a" href="#" onclick="$paginatefunc"><pt:logic.value pt:value="$page.number"/></pt:core.html></li>
                              </pt:logic.iftrue><pt:logic.iffalse>
                                <li class="ali-edit-number-off"><pt:logic.value pt:value="$page.number"/></li>
                            </pt:logic.iffalse></pt:logic.if>
                            <pt:logic.intexpr pt:expr="($pageindex) == ($lastIndex)" pt:key="lastDisplayedPage"/>
                                <pt:logic.if pt:expr="$lastDisplayedPage"><pt:logic.iftrue>
                                  <pt:logic.intops pt:expr="($pagination.lastpage) - 1" pt:key="secondToLastPage"/>
                                  <pt:logic.intexpr pt:expr="($page.number) < ($secondToLastPage)" pt:key="displayElipses"/>
                                  <pt:logic.if pt:expr="$displayElipses"><pt:logic.iftrue>
                                    <li><pt:logic.value pt:value="$#137.ptmsgs_infrastructure"/></li>
                              </pt:logic.iftrue></pt:logic.if>
                                </pt:logic.iftrue></pt:logic.if>
                          </pt:logic.foreach>
                                
                          <pt:logic.existexpr pt:data="pagination.lastpageurl" pt:key="displayLastPageLink"/>
                          <pt:logic.if pt:expr="$displayLastPageLink"><pt:logic.iftrue>
                            <pt:logic.concat pt:key="paginatefunc" pt:value1="paginate('" pt:value2="$pagination.lastpageurl"/>
                            <pt:logic.concat pt:key="paginatefunc" pt:value1="$paginatefunc" pt:value2="'); return false;"/>
                            <li class="ali-edit-number">
                              <pt:core.html pt:tag="a" href="#" onclick="$paginatefunc"><pt:logic.value pt:value="$pagination.lastpage"/></pt:core.html>
                            </li>
                          </pt:logic.iftrue></pt:logic.if>

                          <pt:logic.existexpr pt:data="pagination.nexturl" pt:key="linkToNext"/>
                          <pt:logic.if pt:expr="$linkToNext"><pt:logic.iftrue>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="paginate('" pt:value2="$pagination.nexturl"/>
                              <pt:logic.concat pt:key="paginatefunc" pt:value1="$paginatefunc" pt:value2="'); return false;"/>
                              <li><pt:core.html pt:tag="a" href="#" onclick="$paginatefunc" title="$#35.ptmsgs_portalbrowsingmsgs"><pt:logic.value pt:value="$#208.ptmsgs_portalinfrastructure"/></pt:core.html></li>
                            </pt:logic.iftrue><pt:logic.iffalse>
                              <li><pt:logic.value pt:value="$#208.ptmsgs_portalinfrastructure"/></li>
                          </pt:logic.iffalse></pt:logic.if>
                        </ul>
                    </div>
                </td>
            </tr>    
        </table>
        </pt:logic.iftrue></pt:logic.if>
    </div>
    <div id="ali-edit-footer">
    <div id="ali-edit-botleft"></div>
    <div id="ali-edit-botright"></div>
    </div>
    </div>
</pt:logic.iftrue><pt:logic.iffalse>
    <div id="ali-edit-portlets">
        <div id="ali-edit-search-container">
            <div id="ali-edit-portlets-text"><pt:logic.value pt:value="$#1946.ptmsgs_portalbrowsingmsgs"/></div>
        </div>
        <div id="ali-edit-footer">
        <div id="ali-edit-botleft"></div>
        <div id="ali-edit-botright"></div>
        </div>
    </div>
</pt:logic.iffalse></pt:logic.if>
</div>
</div>

Creating a Community Selection Adaptive Page Layout

Community Selection layouts allow you to customize the Join Communities flyout editor used to join communities from a portal page.

The pt:joincommunitypageditor library contains the <pt:joincommunitypageeditor.addcommunitiesflyoutdata> tag to add a custom community selection flyout editor (DHTML) to a portal page.

The rest of the tags in the library are used to create the flyout editor in the Community Selection adaptive page layout.

These tags are used in the same order as the Portlet Selection adaptive page layout; for an example implementation, see the previous section. For an example of a Community Selection page layout, see the templates included with the portal installation.

Creating a My Account Adaptive Page Layout

The My Account tags in the pt:ptui library allow you to create a customized My Account page or use My Account data within other adaptive page layouts.

The example below uses tags from the pt:ptui brary to define My Account components, and logic tags to iterate through the setting items. For detailed information on standard adaptive tags, including logic tags, see the Oracle WebCenter Interaction Web Service Development Guide.

<span xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
        <table align="left" border="0" cellpadding="5" cellspacing="0" width="100%">
                        <tr class="dirHeaderBg">
                                <td colspan="1" align="left" valign="top">
                                        <span class="dirHeader">
                                                <pt:logic.value pt:value="$#1604.ptmsgs_portalbrowsingmsgs"/>
                                        </span>
                                </td>
                        </tr>
                <pt:ptui.myaccountdata pt:id="mylinks" />
                <pt:logic.foreach pt:data="mylinks" pt:var="mylink">
                        <tr>
                                <td colspan="1" class="menuText">
                                        <pt:core.html pt:tag="a" href="$mylink.url" title="$mylink.name"><pt:logic.value pt:value="$mylink.name"/></pt:core.html>
                                        <br/>
                                        <pt:logic.value pt:value="$mylink.description"/>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <br/>
                                </td>
                        </tr>
                </pt:logic.foreach>
        </table>
</span>

Creating an Error Page Adaptive Page Layout

The Error tags in the pt:ptui library allow you to create a customized Error page or use error data within other adaptive page layouts. These tags display the error text, which can be formatted as desired. If these tags are displayed on a page, errors will no longer be displayed in the normal error location.

The example below uses tags from the pt:ptui brary to define error display, and additional adaptive tags to access images and portal message strings. For detailed information on standard adaptive tags, see the Oracle WebCenter Interaction Web Service Development Guide.

<span xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'>
        <pt:ptui.error>
                <table border="0" cellpadding="5" cellspacing="0" width="100%">
                        <tbody>
                                <tr class="alertBg">
                                        <td colspan="1" class="alertErrorTitle" align="center" width="80">
                                                <pt:core.html pt:tag="img" src="pt://images/plumtree/portal/public/img/icon_error.gif" alt="$#624.ptmsgs_portalbrowsingmsgs" border="0" height="20" width="20"/>
                                        </td>
                                        <td colspan="1" class="alertErrorTitle" align="left" width="100%">
                                                <span class="alertErrorTitle" >                                               
                                                        <pt:logic.value pt:value="$#624.ptmsgs_portalbrowsingmsgs"/>
                                                        <pt:logic.value pt:value=" - "/>                                                      
                                                        <pt:ptui.errortext/>
                                                        <pt:logic.value  pt:encode="0" pt:value="<!--"/>  
                                                                <pt:logic.value pt:value="$#1949.ptmsgs_portalbrowsingmsgs" />                                                           
                                                                <pt:ptui.errorextendedmessage/>                                                                      
                                                        <pt:logic.value pt:encode="0" pt:value="-->" />                                                        
                                                </span>
                                        </td>
                                        <td colspan="1" align="right" width="0">
                                                <!-- Comment -->
                                        </td>                                
                                </tr>                        
                        </tbody>
                </table>
        </pt:ptui.error>
</span>

Creating an iPhone Adaptive Page Layout

iPhone adaptive page layouts use the same tags as the adaptive page layouts described in the previous sections, but reference a different style sheet and JavaScript file. For examples of iPhone layouts, see the iphone* templates provided with the portal installation.