Working with Page Templates

About Page Templates

On the Assets and Shared Assets pages, WebCenter Portal provides several built-in page templates. Alternatively, portal designers can create custom page templates to offer more ways to display pages on the screen. If a page template is a shared asset (available to all portals), it is shown on the Assets page of all portals along with portal-specific page templates. Within a portal, you can copy or customize an existing page template.

Note:

Creating and editing a page template is a fairly complex task. While you can develop page templates in WebCenter Portal, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop page templates for portals. When fully developed, the developer can publish page templates directly to WebCenter Portal (the portal server) or to a specific portal for immediate use or for testing. Alternatively, the developer can export the page template to a file and upload the page template to WebCenter Portal later.

For more information, see Developing Page Templates in Developing for Oracle WebCenter Portal.

Every page in a portal has an associated page template that defines the structure and layout of the entire page. To ensure that all pages in a portal look and behave consistently, they all use the same page template, set as the default by the portal manager. In contrast, the page style defines the initial layout of the main content area and may be unique for every page.

Typical elements of a page template include:

Header, content area (different in each page), and footer. The header and footer commonly include brand-specific elements. For example, a header usually includes a logo and possibly a slogan, and a footer usually includes contact and copyright information. The layout of the content area is defined by the page style.
Portal navigation. For example, you might have global navigation in the header and additional navigation on the left side of the page.
Additional links and actions. Portal-specific links and actions may include log in/log out, pop-up menus, global links (such as to send an email to the web administrator or to display a privacy statement).
Conditional elements. For example, some elements on the page might differ depending on whether the user is public or authenticated or depending on the user's role and privileges.

The following figure shows a typical page template, which includes the following elements:

Header at the top of the page.
Navigation structure below the header, or in a sidebar, to link to important resources.
Page content area, which can have its own style and layout as defined by the page style.
Footer at the bottom of the page.

Figure 16-1 Page Template - Basic Structure

Description of "Figure 16-1 Page Template - Basic Structure"

A page template exposes the navigation for a portal along the top of the page, or down the side of the page:

A top navigation page template exposes the portal navigation in header area. Top navigation makes effective use of the horizontal space on the page, and is recommended when there are 7 or fewer top level pages in the portal navigation. This page template design generally has a header, page and footer sections that use panelGroupLayout components, and is an ideal starting point for sites that require a flowing layout (described below).
A side navigation page template exposes the portal navigation in a sidebar on the left side of the page. The vertical nature of side navigation allows for a more lengthy list of navigation items, and is recommended when there are more than 7 top level pages in the portal navigation. Choose a side navigation template for more complex navigations.

Both top navigation and side navigation page templates can have a flowing layout or a stretching layout:

A flowing layout is the most typical layout. Components are arranged side by side or one below the other, displayed using their natural size. When the content of the page extends beyond the size of the browser window, the browser displays scroll bars on the page.
A stretching layout may be a suitable choice when your page content fills a large area, or you want the page content to grow and shrink depending on the size of the browser window. For example, a stretching layout may be suitable when a page contains a table or graph that you want to fill up the whole content area, no matter what size it is. Another example is a page that contains an editing area, where you want the editor to be exactly as tall and wide as the space given to the content area. This layout has a region for the page content, and adds vertical and horizontal scroll bars to the region on the page when the content cannot be contained within the size of the browser window. When scroll bars are added to the page, the navigation area, page header, and page footer remain in view while the content area scrolls.

Each page template works together with a skin to determine the overall look and feel of the pages in your portal. While the page template controls the location and behavior of components on the page, the skin controls the visual appearance of those components, such as the colors, fonts, and various other aspects.

Each page template can define a preferred skin to identify the skin that works best with that page template. When the page template is selected as the default page template for a portal or as the system default, the default skin automatically updates to the page template's preferred skin.

By default, a portal inherits the page template defined for the portal template that you select when you create the portal.

Note:

If the portal template does not specify a page template, the portal uses the default page template specified by the system administrator.

You can optionally select a different page template for an individual portal, overriding the default page template settings.

About the Built-In Page Templates

WebCenter Portal provides several built-in page templates suited to common page design requirements, described in Table 16-1.

At the application level, you cannot directly edit or customize any of the built-in page templates. If you want to alter one of these templates to make it match your requirements, you must create a new page template, selecting the built-in page template from the Copy From list, and then make the required adjustments in the new page template.

Note:

The built-in page templates are designed to show one or two levels of navigation. If your navigation includes more than two levels, then only the first one or two levels are displayed when using the built-in page templates. To display further levels of the navigation, you must create your own page template or make a copy of the built-in page template and edit the copy to meet your requirements. .

There are several functions built into the WebCenter Portal page templates:

Login and logout
User profile and user preferences
Edit, create, and manage pages
Home portal
Portals menu
Contact administrator
Copyright message and branding
Search

Note:

The tip text and operation of the Search box is dependent on the version of SES configured. For example, SES 11.2.2.2 displays tip text Search Everything in the Search box. SES 11.1.2.2 does not display any tip text. For more information, see Configuring Search with Oracle SES in a Portal in Using Portals in Oracle WebCenter Portal.

Table 16-1 organizes the built-in page templates chronologically, by release, from newest to oldest. Some of the older page templates are provided for backward compatibility with prior releases, as noted in their descriptions. For new pages, use the latest page templates.

The newer page templates provide the following advantages over the older page templates:

Simplified customization through improved structured use of ADF components.
Fewer task flows, replacing unnecessary task flows with URLs.
Efficient XML with fewer nested layout components and easy-to-understand layout creation.
Inline navigation, rather than embedded in a JAR-based task flow, allowing for easier customization of portal navigation.
Faster performance.

Table 16-1 Built-in Page Templates

Name	Release	Preferred Skin	Description
Mosaic	12.2.1	Mosaic	A responsive page layout with top navigation designed for optimal display on mobile devices (tablet and phone). This template automatically adjusts to the size of the mobile device on which it is viewed, as shown in the illustrations below. The Mosaic and Unicorn page templates use bootstrap and Font Awesome icons, popular for web design. Because this template is designed to be responsive to the display device, pages that use this template do not need device-specific settings or page variants. This template includes four theme color options: green (default), blue, orange, and red. To change the theme color for the pages of a portal, see Changing the Theme Color in the Mosaic Page Template.
Unicorn	12.2.1	Unicorn	A responsive page layout with side navigation designed for optimal display on mobile devices (tablet and phone). This template automatically adjusts to the size of the mobile device on which it is viewed, as shown in the illustrations below. The Mosaic and Unicorn page templates use bootstrap and Font Awesome icons, popular for web design. Because this template is designed to be responsive to the display device, pages that use this template do not need device-specific settings or page variants. This template includes two theme types: classic (default) and flat. To change the theme type for the pages of a portal, see Changing the Theme Type in the Unicorn Page Template. This template uses the `fa-icon` page attribute to specify the icon to display for each page (see Changing a Page Icon in the Unicorn Page Template).
Alta Side Navigation	12.2.1	Alta	A flowing page layout with side navigation that offers simplified customization and fewer task flows for faster performance over the earlier Side Navigation template. Page and portal actions are available under an Actions icon at the top right of the page header. When the browser window shows scroll bars, the side navigation area, page header, and page footer scroll out of view as you scroll the contents of the page.
Alta Top Navigation	12.2.1	Alta	A default page template for flowing layout and top navigation that offers simplified customization and fewer task flows for faster performance over the earlier Top Navigation templates. Page and portal actions are available under an Actions icon at the top right of the page header. When the browser window shows scroll bars, the page header and footer scroll out of view as you scroll the contents of the page.
Skyros Top Navigation	11.1.1.8.0	Skyros	A flowing page layout with top navigation. Page and portal actions are available under an Actions icon at the top right of the page header. When the browser window shows scroll bars, the page header and footer remain in view as you scroll the contents of the page. This page template is very similar to WebCenter Portal Top Navigation, with a different skin. This page template is used for backward compatibility with prior releases where it may have been used to create a custom page template. For new pages, use the newer template Alta Top Navigation.
WebCenter Portal Top Navigation	11.1.1.8.0	WebCenter Portal Skin	A page template with flowing layout and top navigation. Page and portal actions are available under an Actions icon at the top right of the page header. When the browser window shows scroll bars, the page header and footer remain in view as you scroll the contents of the page. This page template is very similar to Skyros Top Navigation, with a different skin. This page template is used for backward compatibility with prior releases where it may have been used to create a custom page template. For new pages, use the newer template Alta Top Navigation.

Changing the Theme Color in the Mosaic Page Template

The Mosaic page template (see Table 16-1) includes four theme color options: green (default), blue, orange, and red. You can change the theme color, then use the revised page template as the default page template for one or all portals.

To change the theme color:

Make a copy of the Mosaic page template.
In the copied page template, set the themeColor attribute to one of the follow values:
- body-green
- body-blue
- body-orange
- body-red
Set the revised page template as the default page template for one or all portals.

Changing the Theme Type in the Unicorn Page Template

The Unicorn page template includes two theme types: classic (default) and flat. You can change the theme type, then use the revised page template as the default page template for one or all portals.

To change the theme type:

Make a copy of the Unicorn page template.
In the copied page template, set the themeType attribute to one of the follow values:
- old (default classic theme)
- flat
Set the revised page template as the default page template for one or all portals.

Changing a Page Icon in the Unicorn Page Template

For pages that use the Unicorn page template, you can change the page icons that display in the portal navigation to any Font Awesome icon.

To change the icon for a page that uses the Unicorn page template:

On the portal administration Settings page, verify that the default page template and skin is set to Unicorn.
Open the page in the page editor, then click its menu icon () and select Page Information to display the page management tabs.

Figure 16-2 Selecting Page Information

Description of "Figure 16-2 Selecting Page Information"
On the Advanced tab, click the Options subtab, and specify the following settings:
- New Attribute Name: fa-icon
- New Attribute Value: a Font Awesome icon name (for example, fa-groupor fa-bullhorn)
  
  Figure 16-3 Adding a Page Attribute
  
  Description of "Figure 16-3 Adding a Page Attribute"
Click Add, then Save.
In the portal editor, notice that the left navigation pane in the page template displays the icon set by the fa-icon attribute for the page.

Figure 16-4 New Icon for Page

Description of "Figure 16-4 New Icon for Page"
Click Save.

Setting the Default Page Template

When a user creates a new page in a portal, the portal's default page template is used to determine the structure and layout of the page. This helps to ensure that all pages in a portal have a consistent look and feel. This consistency within pages makes a portal easy to use.

Tip:

To determine which page template to use as the default page template, you can preview page templates.

Page templates work in combination with skins to determine the look and feel of the pages in a portal. When you set the default page template, the default skin is automatically set to the preferred skin for that page template, if it has one.

Note:

If you change the default skin to something other than the page template's preferred skin, the pages in your portal may not look as expected.

Setting the Default Page Template for a Portal

Permissions:

To perform this task, you must be a portal manager or member with Administration: Manage Security and Configuration or Administration: Manage Configuration permission in the portal.

Every portal has a set of default assets, including a default page template. By default, a portal inherits the page template defined for the portal template that you select when you create the portal. If the portal template does not define a default page template, the system default page template is used instead.

Setting the Default Page Template for All Portals

Permissions:

To perform this task, you must be a system administrator (have the Administrator role, or the Portal Server: Manage All or Portal Server: Manage Configuration permission).

System administrators can select a page template to use as the WebCenter Portal application-level default page template. This page template is used for pages in the Home portal and for pages in portals where the portal template used to create the portal did not define a default page template.

For information about how to specify the system default page template, see Choosing a Default Page Templates in Administering Oracle WebCenter Portal.

Setting the Default Page Template for a Portal

Permissions:

To perform this task, you must be a portal manager or member with Administration: Manage Security and Configuration or Administration: Manage Configuration permission in the portal.

For more information about permissions, see About Roles and Permissions for a Portal.

Every portal has a set of default assets, including a default page template. By default, a portal inherits the page template defined for the portal template that you select when you create the portal. If the portal template does not define a default page template, the system default page template is used instead.

To set a different default page template for the pages in your portal, see Changing the Page Template for a Portal.

Setting the Default Page Template for All Portals

Permissions:

To perform this task, you must be a system administrator (have the Administrator role, or the Portal Server: Manage All or Portal Server: Manage Configuration permission).

System administrators can select a page template to use as the WebCenter Portal application-level default page template. This page template is used for pages in the Home portal and for pages in portals where the portal template used to create the portal did not define a default page template.

For information about how to specify the system default page template, see Choosing a Default Page Templates in Administering Oracle WebCenter Portal.

Creating a Page Template

If none of the available page templates meet your requirements, you can create your own. When you create a page template, you use an existing page template as the starting point for the new page template.

Note:

Creating and editing a page template is a fairly complex task. While you can develop page templates in WebCenter Portal as described here, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop page templates for portals. When fully developed, the developer can publish page templates directly to WebCenter Portal (the portal server) or to a specific portal for immediate use or for testing. Alternatively, the developer can export the page template to a file and upload the page template to WebCenter Portal later.

For more information, see Developing Page Templates in Developing for Oracle WebCenter Portal.

If you choose to create a page template in WebCenter Portal, giving you the option to later refine it in JDeveloper, you can do so at the application level or at the portal level. Application-level page templates are available for use in all portals, unless the portal has been specifically excluded. Portal-level page templates are available for use only in the portal in which they are created.

To create a page template:

Navigate to one of the following:
- To create an application-level page template, go to the Shared Assets page.
- To create a portal-level page template, go to the Assets page for the portal in which you want to create it.
In the left panel, under Structure, click Page Templates.
In the toolbar, click Create.

Figure 16-5 Creating a Page Template

Description of "Figure 16-5 Creating a Page Template"
In the Create New Page Template dialog, in the Name field, enter a name for the page template.

The name is displayed in the Assets or Shared Assets page and in lists when selecting a page template. You should make the name as descriptive as possible.

Figure 16-6 Create New Page Template Dialog

Description of "Figure 16-6 Create New Page Template Dialog"
In the Description field, optionally enter a description for the page template.

The description is displayed below the name in the Assets or Shared Assets page and as a tool tip when selecting a page template. You should ensure that the description helps users determine if they want to use this particular page template.
From the Copy From list, select an existing page template to use as the starting point for your new page template.

Tip:

You can also create a copy of an existing page template.
Click Create.

The newly created page template is listed on the Assets or Shared Assets page. The empty check box next to the page template indicates that it is not yet published and hence is not available to other users.

After initial creation, the new page template is identical to the page template selected from the Copy From list. The next step in creating a page template is to edit the layout and content to meet your requirements.

For more information, see Editing a Page Template.

Editing a Page Template

In a portal, you can edit a page template using Structure view of the page editor to fine-tune the layout and content as desired. Note that you can not edit built-in page templates; you can copy a built-in page template to create a new custom page template for a portal, then edit that copy.

Note:

Creating and editing a page template is a complex task. While you can develop page templates in WebCenter Portal as described here, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop page templates for portals. New page templates can also be developed from scratch using JDeveloper. When fully developed, the developer can upload page templates directly to WebCenter Portal (the portal server) for immediate use or for testing. Alternatively, the developer can export the page template to a file and upload the page template to WebCenter Portal later.

For more information, see Developing Page Templates in Developing for Oracle WebCenter Portal.

To edit a page template:

Navigate to one of the following:
- To edit an application-level page template, go to the Shared Assets page.
- To edit a portal-level page template, go to the Assets page for the portal that owns it.
In the left panel, under Structure, click Page Templates.
Click the Edit quick link in the row for the page template that you want to edit.

Tip:

If you prefer, you can edit the source code of the page template directly. In the toolbar, click Actions, then select Edit Source.

Figure 16-7 Edit Link for Page Template

Description of "Figure 16-7 Edit Link for Page Template"
In Structure view of the page editor, edit the layout and the content of the page template as desired.

Figure 16-8 Editing a Page Template

Description of "Figure 16-8 Editing a Page Template"

A page template must include at least one content region (Box component).

To include or modify portal navigation, see Adding Navigation to a Page Template.

WebCenter Portal provides a range of reusable components that provide ready-to-go pieces of the WebCenter Portal user interface, such as a login link or search field.
Click Save to save your changes.

Setting the Preferred Skin for a Page Template

Page templates and skins are designed to work in combination to define the look and feel of the pages in your portal. When you create a page template to define the structure and layout of your pages, you should also create a corresponding skin to define the colors, fonts, and so on, used by that page template. As they are so closely related, you may want to identify the skin that is intended to be used with the page template as the page template's preferred skin.

Note:

When a user identifies a page template as the default for a portal or as the system default, the default skin is automatically set to the preferred skin for that page template, if it has one. If a different default skin is selected, the pages in the portal may not look as expected.

To set a page template's preferred skin:

Navigate to one of the following:
- To set the preferred skin for an application-level page template, go to the Shared Assets page.
- To set the preferred skin for a portal-level page template, go to the Assets page for the portal that owns it.
In the left panel, under Structure, click Page Templates.
Select the page template for which you want to set the preferred skin.
In the toolbar, click Actions, and then choose Edit Properties.
In the Attributes section of the Edit Properties dialog, in the Name field, enter preferredSkin.
In the Value field, enter the skin family of the skin that you want to use as the page template's preferred skin.

Tip:

The skin family is provided on the Show Properties dialog for the skin.
Click OK.

Adding Navigation to a Page Template

One of the key parts of a page template is the navigation visualization. This determines how the navigation looks and behaves in your portal.

Best Practice:

You can add navigation visualization to a page, but typically you add it to a page template so that it can be defined in one place and propagated consistently across the whole portal.

This section includes the following topics:

Adding a Built-in Navigation Task Flow to a Page Template

WebCenter Portal provides three built-in navigation task flows that you can add to page templates:

Navigation Breadcrumb task flow—Breadcrumb navigations display a series of horizontal or vertical links that show users their current position in the navigation hierarchy. Breadcrumbs are particularly useful for deep hierarchies, say four levels or more, and when users might want to get back to a specific place.

Figure 16-9 The Navigation Breadcrumb Task Flow

Description of "Figure 16-9 The Navigation Breadcrumb Task Flow"
Navigation Menu task flow—Menu navigations display navigational links as a series of tabs, menus, bars, buttons, choices, or as a list. Menu navigation is appropriate when linking to WebCenter Portal pages, portals, and documents, and where the number of items is known, such that there is enough room to display all the options that are available.

Figure 16-10 The Navigation Menu Task Flow

Description of "Figure 16-10 The Navigation Menu Task Flow"
Navigation Tree task flow—Tree navigations display navigational links in a hierarchical structure and often contain multiple-level hierarchies. Tree navigations can provide relatively simple access to a complex structure and quite often appear in a left pane in page templates.

Figure 16-11 The Navigation Tree Task Flow

Description of "Figure 16-11 The Navigation Tree Task Flow"

To add a built-in navigation task flow to a page template:

Open the page template in Structure view in the page editor.
In the hierarchical list of page components, select the component in which to place the navigation task flow.

Tip:

You can also select a component by clicking it in the WYSIWYG section of the page. A selected component is outlined in blue.
Click the Add content into the selected component icon to open the resource catalog.

Figure 16-12 Resource Catalog in Structure View of Page Template

Description of "Figure 16-12 Resource Catalog in Structure View of Page Template"
Navigate to the section of the resource catalog that contains the built-in navigation task flows.

Tip:

The presence and location of these task flows depends on how the resource catalog is configured. In the Default Page Template Catalog, you can find the built-in navigation task flows under the Navigations folder.
Modify the navigation task flow as required.
Click Save to save your changes.

Working with Navigation Task Flow Properties

The navigation task flows have associated properties, which users with sufficient properties can access from the Component Properties dialog in Structure View in the page editor (Figure 16-13).

Figure 16-13 Navigation Tree Task Flow - Component Properties

Description of "Figure 16-13 Navigation Tree Task Flow - Component Properties"

Setting Navigation Task Flow Properties

To set properties on a navigation task flow (Navigation Breadcrumb, Navigation Menu, and Navigation Tree), see Setting Component Properties in Structure View.

Navigation Task Flow Properties

This section describes the parameters that are unique to each of the built-in navigation task flows.

Table 16-2 describes the parameters for the Navigation Breadcrumb task flow. For steps to set parameter values, see Rendering Navigation as Breadcrumbs.

Table 16-2 Navigation Breadcrumb Task Flow Parameters

Parameter	Description
`Navigation`	Displays the name of the navigation model.
`Start Path`	The level in the navigation model at which to start the navigation. You can enter a path or an EL expression or click the Select Path icon to select the start node. Valid values are: Start at the Currently Selected Page Path Start at This Level of the Currently Selected Page Path Select Page Path For more information, see Selecting the Navigation Start Path.
`Show Root`	Specifies whether to show the start node in the breadcrumbs.
`Display Style`	Enter `horizontal` or `vertical`

Table 16-3 describes the parameters for the Navigation Menu task flow.

Table 16-3 Navigation Menu Task Flow Parameters

Parameter	Description
`Navigation`	Displays the name of the navigation model.
`Second Level Style`	The style for rendering the second level of navigation items. Valid values are: `donotdisplay`, `tabs`, `bar`, `buttons`, `choice`, `list` Notes: If the resource being rendered is non-navigable, for example, a folder, then it cannot be displayed as a tab, bar, button, choice, or list. It can be displayed only if the style `menu` or `menumenu` is selected. This property is available only if the Style property is not `menu` or `menumenu`.
`Start Path`	The level in the navigation model at which to start the navigation. You can enter a path or an EL expression or click the Select Path icon to select the start node. Valid values are: Start at the Currently Selected Page Path Start at This Level of the Currently Selected Page Path Select Page Path For more information, see Selecting the Navigation Start Path. Note: The Navigation Menu task flow is limited to showing a maximum of two levels of navigation items.
`Style`	The style for rendering the first level of navigation items. Valid values are `tabs`, `bar`, `buttons`, `choice`, `list`, `menu`, `menumenu` Notes: If the resource being rendered is non-navigable, for example, a folder, then it cannot be displayed as a tab, bar, button, choice, or list. It can be displayed only if the style `menu` or `menumenu` is selected. If a navigable item is rendered using the `menumenu` style, the item is rendered twice, once as a drop-down menu, and once as a link to the item itself.
`Show Icons`	Specifies whether to render icons for each resource.

Table 16-4 describes the parameters for the Navigation Tree task flow.

Table 16-4 Navigation Tree Task Flow Parameters

Parameter	Description
`Navigation`	Displays the name of the navigation model.
`Start Path`	The level in the navigation model at which to start the navigation. You can enter a path or an EL expression or click the Select Path icon to select the start node. Valid values are: Start at the Currently Selected Page Path Start at This Level of the Currently Selected Page Path Select Page Path For more information, see Selecting the Navigation Start Path.
`Show Levels`	The number of levels shown when the tree is initially rendered. Valid values are: `1`—Show top level nodes only; all other nodes are initially collapsed `2`—Expand the first level of child nodes `3`—Expand the second level of child nodes `all`—Expand all nodes Note: This option applies only if the tree is rendered as a `collapsed` tree. If the tree is rendered as an `expanded` tree then all nodes are shown expanded regardless of the value of this property.
`Show Root`	Specifies whether to render the start node in the tree.
`Style`	The style of the navigation. Valid values are: `collapsed`—Render the given levels (as specified by the Show Levels property) as initially collapsed `expanded`—Render all tree nodes, expanded to show all children `list`—Render a flat list of top-level navigation items. If any of the top-level navigation items are folders, the content of those folders are provided in drop-down menus. Note: Specifying the `list` option overrides the Show Levels and Show Root properties.
`Show Icons`	Specifies whether to render icons for each resource.

Configuring Navigation Task Flows

The following sections use examples based on the sample navigation shown in Figure 16-14:

Figure 16-14 Sample Navigation

Description of "Figure 16-14 Sample Navigation"

Selecting the Navigation Start Path

To select the start path for your navigation:

Add a navigation task flow to the page template used by the portal, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Open the task flow Parameters properties (see Setting Navigation Task Flow Properties), and next to the Start Path parameter, click the Select Path icon.
In the Select Start Path dialog, select:
- Start at the Currently Selected Page Path to use the currently selected page as the starting point of the navigation. This populates the Start Path property with the following EL expression:
```
#{navigationContext.navigationModel['modelPath=path'].currentSelection.prettyUrl}
```
  where path is the path to the navigation model XML file (omitting the trailing .xml); for example:
```
#{navigationContext.navigationModel['modelPath=/oracle/webcenter/portalapp/navigations/myNavigation'].currentSelection.prettyUrl}
```
  In the sample navigation shown in Figure 16-14: If this option is selected, when the user navigates to the Current Account page, the navigation looks as shown in Figure 16-15.
  
  Figure 16-15 Start at the Currently Selected Page Path
  
  Description of "Figure 16-15 Start at the Currently Selected Page Path"
- Start at This Level of the Currently Selected Page Path to use the nth level of the path to the currently selected page as the starting point of the navigation (where n is the number specified in the field next to this option). This populates the Start Path property with the following EL expression:
```
#{navigationContext.navigationModel['modelPath=path'].currentSelection.prettyUrlPath[level]}
```
  where path is the path to the navigation model XML file (omitting the trailing .xml) and level is the number specified in the field.
  
  In the sample navigation shown in Figure 16-14: If this option is selected with the value of 1, when the user navigates to the Personal Banking page, and then the Current Account page, the navigation starts at the first level of this path (that is, Personal Banking) as shown in Figure 16-16.
  
  Figure 16-16 Start at Specified Level of the Currently Selected Page Path
  
  Description of "Figure 16-16 Start at Specified Level of the Currently Selected Page Path"
- Select Page Path to use a specific page as the starting point of the navigation. This populates the Start Path property with the path to the selected page.

Rendering Navigation as a Tree

To render your navigation as a tree:

Add the Navigation Tree task flow to the page template used by the portal, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Open the task flow Parameters properties (see Setting Navigation Task Flow Properties), and select the Start Path for the navigation when it is rendered on the page, as illustrated in Selecting the Navigation Start Path.
From the Show Levels drop-down list, select how many levels to expand when the tree is initially rendered with the Collapsed Tree style.

Note:

If the navigation is rendered using the Expanded Tree style, this option is ignored and the navigation is rendered will all nodes fully expanded.
From the Show Root drop-down list, select whether to display the start node in the tree.
For example, if the start node is Current Account, select:
- Show Tree Root to include the Current Account node in the tree (Figure 16-17).
  
  Figure 16-17 Show Tree Root
  
  Description of "Figure 16-17 Show Tree Root"
- Do Not Show Root to not include the Current Account node (Figure 16-18).
  
  Figure 16-18 Do Not Show Root
  
  Description of "Figure 16-18 Do Not Show Root"
- Show Root As Box to include the Current Account node as the header of a box that contains the rest of the navigation (Figure 16-19).
  
  Figure 16-19 Show Root As Box
  
  Description of "Figure 16-19 Show Root As Box"
Specify the Style to use for the tree.
- collapsed displays the tree initially collapsed according to the levels specified by the Show Levels property.
- expanded displays the tree with all levels completely expanded.
- list displays the tree as a flat list of the top-level navigation items. If any of the top-level navigation items are folders, they are displayed as drop-down menus that display the contents of the folders.
  
  In the sample navigation shown in Figure 16-14: If the start node is Personal Banking, a tree navigation with the List style looks like Figure 16-20.
  
  Figure 16-20 List Style Tree with No Folders
  
  Description of "Figure 16-20 List Style Tree with No Folders"
  
  However, if the start node is Current Account (which contains two folders), it looks like Figure 16-21.
  
  Figure 16-21 List Style Tree with Folders
  
  Description of "Figure 16-21 List Style Tree with Folders"
Select Show Icons to display the icons associated with the navigation items in the tree (Figure 16-22).

Figure 16-22 Show Icons

Description of "Figure 16-22 Show Icons"

Rendering Navigation as a Menu

To render your navigation as a menu:

Add the Navigation Menu task flow to the page template used by the portal, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Open the task flow Parameters properties (see Setting Navigation Task Flow Properties), and select the Start Path for the navigation when it is rendered on the page, as illustrated in Selecting the Navigation Start Path.
For theStyle parameter, specify how you want to display the first level of navigation items in the menu. In the sample navigation shown in Figure 16-14, we can illustrate the different options for this property:
- tabs
  
  Figure 16-23 Tabs Menu Navigation Style
  
  Description of "Figure 16-23 Tabs Menu Navigation Style"
- bar
  
  Figure 16-24 Bar Menu Navigation Style
  
  Description of "Figure 16-24 Bar Menu Navigation Style"
- buttons
  
  Figure 16-25 Buttons Menu Navigation Style
  
  Description of "Figure 16-25 Buttons Menu Navigation Style"
- choice
  
  Figure 16-26 Choice Menu Navigation Style
  
  Description of "Figure 16-26 Choice Menu Navigation Style"
- list
  
  Figure 16-27 List Menu Navigation Style
  
  Description of "Figure 16-27 List Menu Navigation Style"
- menu
  
  Figure 16-28 Menu Navigation Style
  
  Description of "Figure 16-28 Menu Navigation Style"
For the Second Level Style parameter, specify the style to use for the second level of navigation items: donotdisplay, tabs, bar, buttons, or choice, list.

Note:

Menu navigations can render only two levels of navigation items.
Select Show Icons to display the icons associated with the navigation items in the menu.

Rendering Navigation as Breadcrumbs

To render your navigation as breadcrumbs:

Add the Navigation Breadcrumb task flow to the page template used by the portal, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Open the task flow Parameters properties (see Setting Navigation Task Flow Properties), and select the Start Path for the navigation when it is rendered on the page, as illustrated in Selecting the Navigation Start Path.
Select Show Root to display the start node in the breadcrumbs.
For the Display Style parameter, specify whether to display the breadcrumbs vertically (vertical) or horizontally (horizontal) . For example, Figure 16-29 shows breadcrumbs displayed horizontally.

Figure 16-29 Horizontal Breadcrumbs

Description of "Figure 16-29 Horizontal Breadcrumbs"

Figure 16-30 shows breadcrumbs displayed vertically.

Figure 16-30 Vertical Breadcrumbs

Description of "Figure 16-30 Vertical Breadcrumbs"

Linking Navigation Task Flows

You may want to include more than one area of navigation in your portal. For example, you might want to include tabs along the top of the page, displaying the top level of your navigation, and a second tree structure down the side of the page. You can link the navigation task flows together so that the tree navigation reflects the selected navigation item in the tabbed menu.

The following procedure shows how to do this using the sample navigation shown in Figure 16-14.

To link navigation task flows:

Add the Navigation Menu task flow to the page template used by the portal, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Add the Navigation Tree task flow to a region along the side of your portal's page template, as described in Adding a Built-in Navigation Task Flow to a Page Template.
Open the Navigation Menu task flow Parameters properties (see Setting Navigation Task Flow Properties), and from the Navigation drop-down list, select the desired navigation model, or enter an EL expression. If you need EL assistance, an application developer can provide an EL expression; see Expression Language Expressions in Developing for Oracle WebCenter Portal.
For the Start Path parameter, enter / to start at the root of the navigation model.
For the Style parameter, enter tabs.
For the Second Level Style parameter, specify donotdisplay.

This restricts this part of the navigation to display only the top level of the navigation model. The rest of the navigation model is displayed in the tree navigation.
Click OK.
Hover the mouse over the Navigation Tree task flow and click the View Actions menu, then select Parameters.
In the Parameters dialog, from the Navigation drop-down list, select the same navigation model as is used for the Navigation Menu task flow, or enter the same EL expression.
Next to the Start Path field, click the Select Path icon.
In the Select Start Path dialog, select Start at the Currently Selected Page Path and click OK.

This ensures that the tree navigation displays the navigation for whatever has been selected in the menu navigation.
From the Show Root drop-down list, select Do Not Show Root.

The root of the navigation model is displayed in the tabs at the top of the page, so there is no need to duplicate it here.
Click OK.
Save and close the page template.

Figure 16-31 shows how the above procedure might work for In the sample navigation shown in Figure 16-14. Selecting the Personal Banking tab at the top of the page displays the rest of the navigation (from Personal Banking down) on the side of the page.

Figure 16-31 Linking Navigation Task Flows

Description of "Figure 16-31 Linking Navigation Task Flows"

Downloading Additional Navigation Task Flows

Additional navigation task flows are available for download from Oracle Technology Network at:

http://www.oracle.com/technetwork/middleware/webcenter/samples-196325.zip

The ZIP file contains the following navigation task flows:

List Navigation—Renders portal navigation in a vertical list format. Folders and their items are rendered as drop-down menus. Empty folders are not rendered.
Menu with Links Navigation—Renders portal navigation in a horizontal menu format. For top level navigation items, folders are rendered as drop-down menus, navigable links with no children are rendered as a top level link. Empty folders are not rendered.
Tree Navigation—Renders portal navigation in a vertical collapsed tree format.

Download the ZIP file and extract its contents locally. You can then upload one or more of the archive files to your application, as described in Uploading an Asset. The task flows are then available in the resource catalog under Integration, Task Flows.

Designing Advanced Navigation Visualization

The navigation task flows provided by WebCenter Portal enable you to quickly visualize your navigation in your application. However, you may find that these task flows do not quite match your navigation requirements. If you find this is the case, you can use JDeveloper to edit the page templates you create in WebCenter Portal and add the navigation UI directly to the templates using the navigation EL APIs provided by WebCenter Portal. You can then upload these edited page templates back into WebCenter Portal. You can also create your page templates entirely in JDeveloper before uploading them to WebCenter Portal. The WebCenter Portal built-in page templates were created in this way.

Note:

Designing advanced navigation visualization in a page template is a complex task. Therefore, the implementation of advanced navigation visualization should be completed by an experienced Web Developer.

The steps to download and upload page templates from WebCenter Portal are described in Working with Portal Assets in JDeveloper.

For information about specific considerations for creating page templates in JDeveloper for use in WebCenter Portal, see Developing Page Templates in Developing for Oracle WebCenter Portal.

Managing a Page Template

The following options are available on the Assets or Shared Assets page to enable you to manage page templates.