21 Working with Page Templates

This chapter describes how to work with page templates in WebCenter Portal.

Note:

Creating and editing a page template is a complex task. While you can develop page templates in Portal Builder, the editing capabilities are limited and intended for minor changes only. Oracle recommends that developers use JDeveloper to develop page templates for portals. For existing page templates in WebCenter Portal, a developer can upload them to JDeveloper to further refine and develop them. 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 on through Portal Builder.

For more information, see Section 20.6, "Working with Portal Assets in JDeveloper" and the "Developing Page Templates" chapter in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

This chapter includes the following topics:

Permissions:

To perform the tasks in this chapter on shared page templates, you must have the application-level Create, Edit and Delete Page Templates permission. Users with the Application Specialist role have this permission by default. For more information about application-level permissions, see the "Understanding Application Roles and Permissions" section in Oracle Fusion Middleware Administering Oracle WebCenter Portal.

To perform the tasks in this chapter on portal-level page templates, you must have the portal-level permission Create, Edit, and Delete Assets (standard permissions) or Create, Edit, and Delete Page Templates (advanced permissions). For more information about portal-level permissions, see Section 29.1, "About Roles and Permissions for a Portal."

See Also:

For more information about how to define your portal's look and feel using page templates in conjunction with other assets, see Chapter 60, "Creating a Look and Feel for Portals."

21.1 About Page Templates

In WebCenter Portal, every page has an associated page template that defines the structure and layout of the entire page. Using the same page template for associated pages ensures that those pages look and behave consistently. 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.

  • Navigation. You might have global navigation in the header and additional navigation on the left side of the page.

  • Additional links and actions: 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.

Figure 21-1 shows a typical page template, which includes the following elements:

  1. Header at the top of the page.

  2. Navigation structure below the header, or in a sidebar, to link to important resources.

  3. Page content area, which can have its own style and layout.

  4. Footer at the bottom of the page.

Figure 21-1 Page Template - Basic Structure

Description of Figure 21-1 follows
Description of "Figure 21-1 Page Template - Basic Structure"

A page template can expose 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 seven or fewer top level pages in the portal navigation. This page template design generally has a header, page and footer sections, 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 seven top level pages in the portal navigation. Choose a side navigation template for more complex navigation models.

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.

21.1.1 About Built-in Page Templates in WebCenter Portal

WebCenter Portal provides several built-in page templates suited to common page design requirements, described in Table 21-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 (see Section 21.3, "Creating a Page Template") by selecting the built-in page template from the Copy From list, and then make the required adjustments in the new page template. At the portal level, you can customize the built-in templates for a specific portal, as described in Section 21.7, "Customizing a Shared Page Template for a Portal."

Note:

The built-in page templates are designed to show one or two levels of navigation. If your navigation model 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 model, 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.

For more information about how to visualize a navigation model within a page template, see Section 21.8, "Adding Navigation to a Page Template."

Table 21-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 newest 11.1.1.8.3 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 imbedded in a JAR-based task flow, allowing for easier customization of portal navigation.

  • Faster performance.

Table 21-1 Built-in Page Templates

Name Release Preferred Skin Description

Skyros Side Navigation v2

11.1.1.8.3

Skyros v2

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.

Example of Skyros Side Navigation v2 page template

Skyros Side Navigation (Stretch) v2

11.1.1.8.3

Skyros v2

A stretching page layout with side navigation that offers simplified customization and fewer task flows for faster performance over the earlier Side Navigation (Stretch) template. Page and portal actions are available under an Actions icon at the top right of the page header.

When the page shows scroll bars, the side navigation area, page header, and page footer remain in view as you scroll the contents of the page.

Example of Skyros Side Navigation (Stretch) v2 page template

Skyros Top Navigation v2

11.1.1.8.3

Skyros v2

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 remain in view as you scroll the contents of the page.

Example of Skyros Top Navigation v2 page template

Skyros Top Navigation (Stretch) v2

11.1.1.8.3

Skyros v2

A stretching page layout with top navigation that offers simplified customization and fewer task flows for faster performance over the earlier Top Navigation (Stretch) templates. Page and portal actions are available under an Actions icon at the top right of the page header.

When the page shows scroll bars, the page header and footer remain in view as you scroll the contents of the page.

Example of Skyros Top Navigation (Stretch) v2 page template

Skyros Side Navigation (Tablet)

11.1.1.8.0

Skyros

A tablet-friendly page layout with side navigation. There are no page or portal actions available in this template.

When the page shows scroll bars, the side navigation area, page header, and page footer remain in view as you scroll the contents of the page.

Example of Skyros Side Navigation (Mobile) page template

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.

Example of Skyros Top Navigation page template

Skyros Top Navigation (Stretch)

11.1.1.8.0

Skyros

A stretching 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 page shows scroll bars, the page header and footer remain in view as you scroll the contents of the page.

Example of Skyros Top Navigation (Stretch) page template

Skyros Top Navigation (Tablet)

11.1.1.8.0

Skyros

A tablet-friendly flowing page layout with top navigation. There are no page or portal actions available in this template.

This page template shows only one level of navigation.

When the browser window shows scroll bars, the page header and footer scroll out of view as you scroll the contents of the page.

Example of Skyros Top Navigation (Mobile) page template

WebCenter Portal Top Navigation

11.1.1.8.0

WebCenter Portal Skin

A default 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.

Example of WebCenter Portal Top Navigation page template

Collaborative with Top Navigation

11.1.1.6.0

Spaces FX

A page template for collaborative portals, with flowing layout and top navigation.

When the browser window shows scroll bars, the page header and footer scroll out of view as you scroll the contents of the page.

The Actions drop-down menu in this template only includes options for Edit Page and Personalize Pages.

Example of Collaborative with Top Navigation page template

Portal-centric with Top Navigation

11.1.1.6.0

Spaces FX

A page template for portal-centric sites, with flowing layout and top navigation. This page template does not include a footer. 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 scrolls out of view as you scroll the contents of the page.

Example of Portal-centric with Top Navigation page template

Side Navigation (Stretch)

11.1.1.6.0

Spaces FX

A stretching page layout with side navigation. Page and portal actions are available under an Actions menu in the side navigation.

When the page shows scroll bars, the side navigation area, page header, and page footer remain in view as you scroll the contents of the page.

Example of Side Navigation (Stretch) page template

Top Navigation (Stretch)

11.1.1.6.0

Spaces FX

A stretching 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 page shows scroll bars, the page header and footer remain in view as you scroll the contents of the page.

Example of Top Navigation (Stretch) page template

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 Skyros Top Navigation (Stretch).

Fusion Side Navigation

11.1.1.4.0

Fusion FX

A stretching page layout with side navigation. Page and portal actions are available under an Actions menu in the side navigation.

When the page shows scroll bars, the side navigation area, page header, and page footer remain in view as you scroll the contents of the page.

Example of Fusion Side Navigation page template

Fusion Top Navigation

11.1.1.4.0

Fusion FX

A stretching 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 page shows scroll bars, the top navigation area, page header, and page footer remain in view as you scroll the contents of the page.

Example of Fusion Top Navigation page template

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 Skyros Top Navigation.

Side Navigation

11.1.1.4.0

Spaces FX

A flowing page layout with side navigation. Page and portal actions are available under an Actions menu in the side navigation.

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.

Example of Side Navigation page template

Top Navigation

11.1.1.4.0

Spaces FX

A default 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 scroll out of view as you scroll the contents of the page.

Example of Top Navigation page template

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 Skyros Top Navigation.

Public Pages Template

11.1.1.4.0

Spaces FX

A default stretching page layout for public pages. There are no page or portal actions or navigation area in this template.

When the page shows scroll bars, the page header and footer remain in view as you scroll the contents of the page.

Example of Public Pages Template page template


21.2 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. For more information, see Section 20.5.2, "Previewing an Asset."

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. For more information, see Section 21.6, "Setting the Preferred Skin for a Page Template."

This section includes the following topics:

21.2.1 Setting the Default Page Template for a Portal

Permissions:

To perform this task, you must be a portal moderator or a portal member with the Manage All or Manage Configuration permission in the portal.

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

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

To use a different page template for the pages in your portal, you can change the default page template setting in portal administration:

For more information, see Section 7.3.2, "Changing the Page Template for a Portal."

21.2.2 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 Manage Configuration permission).

System administrators can select a page template to use as the system, or application-level, default page template. The system default 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 the "Choosing a Default Page Template" section in Oracle Fusion Middleware Administering Oracle WebCenter Portal.

21.3 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 complex task. While you can develop page templates in Portal Builder, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop page templates for portals. For existing page templates in WebCenter Portal, a developer can upload them to JDeveloper to further refine and develop them. 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 on through Portal Builder.

For more information, see Section 20.6, "Working with Portal Assets in JDeveloper"and the "Developing Page Templates" chapter in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

If you choose to create a page template 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:

  1. Navigate to one of the following:

  2. In the left panel, under Structure, click Page Templates.

  3. In the toolbar, click Create (Figure 21-3).

    Figure 21-3 The Create Icon for Creating a Page Template

    Description of Figure 21-3 follows
    Description of "Figure 21-3 The Create Icon for Creating a Page Template"

  4. In the Create New Page Template dialog (Figure 21-4), 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 21-4 The Create New Page Template Dialog

    Description of Figure 21-4 follows
    Description of "Figure 21-4 The Create New Page Template Dialog"

  5. In the Description field, 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.

  6. 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 as described in Section 20.5.4, "Copying an Asset."

  7. 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. For information about publishing a page template, see Section 20.5.3, "Showing and Hiding Assets."

    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 Section 21.4, "Editing a Page Template."

21.4 Editing a Page Template

You can edit a page template in WebCenter Portal using Composer to change the layout and structure as desired.

Note:

Creating and editing a page template is a complex task. While you can develop page templates in Portal Builder, the editing capabilities are limited. Oracle recommends that developers use JDeveloper to develop page templates for portals. For existing page templates in WebCenter Portal, a developer can upload them to JDeveloper to further refine and develop them. 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 on through Portal Builder.

For more information, see Section 20.6, "Working with Portal Assets in JDeveloper"and the "Developing Page Templates" chapter in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

To edit a page template using Composer in Portal Builder:

  1. Navigate to one of the following:

  2. In the left panel, under Structure, click Page Templates.

  3. 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. For more information, see Section 20.4.2, "Editing the Source Code of an Asset."

  4. In Composer, edit the layout and the content of the page template as desired.

    Editing the layout and content of a page template is the same as editing the layout and content of a page. For more information, see:

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

    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. For more information, see Section 21.5, "Adding Portal Components to a Page Template."

    You will probably also want to include a region to contain navigation elements. For more information, see Section 21.8, "Adding Navigation to a Page Template."

  5. Click the Preview tab to see how your page template looks without all the Composer artifacts. Click the Design tab to return to Design view.

  6. Click Save to save your changes.

21.5 Adding Portal Components to a Page Template

Portal components are prepackaged, fully functional application widgets or tags, such as menus and links, that are available for adding to page templates (and to pages). Each component provides a ready-to-go piece of the WebCenter Portal user interface.

Tip:

The components discussed in this section are included out of the box in the Default Page Template Catalog provided for template development. If your portal uses a custom resource catalog for template development, you may need to manually add the portal components to it. For more information, see Section 23.5.1, "Adding a Resource to a Resource Catalog."

The process of adding a portal component to a page template is the same as adding any component to a page template.

Tip:

This section provides information about adding a portal component while the page template is in Design view. For information about adding components while the page template is in a different view, see Section 14.2, "Adding a Component to a Page."

To add a portal component to a page template:

  1. Open the page template in Composer.

    For more information, see Section 21.4, "Editing a Page Template."

  2. Click the Design tab to enter Design view, which displays the inline resource catalog.

    Figure 21-5 A Page Template in Composer

    Description of Figure 21-5 follows
    Description of "Figure 21-5 A Page Template in Composer"

  3. In the catalog, navigate to the folder that contains the portal components.

    Tip:

    The presence or location of the portal components depends on how the resource catalog is configured. In the Default Page Template Catalog, you can find portal components under the Portal Components folder.

  4. Drag the icon of the component that you want to add to the target area of the page template.

    Table 21-2 lists all the portal components that are available. For more information about each of these components, see Appendix B, "Portal Components."

    Table 21-2 Reusable Portal Components

    A to Create Po Create Su to Le Lo to Po Pr to U

    About Portal

    Create Subportal

    Login

    Privacy URL

    About WebCenter Portal

    Current User Profile

    Logout

    RSS

    Add to Favorites

    Edit Page

    Mail Members

    Search

    Administration

    Favorites Menu

    Mail Portal Moderators

    Self-Registration

    Change Membership

    Global Help

    Manage Pages

    Share Resource

    Contact Administration

    Home Portal

    Page Links

    Status Indicator

    Copyright Message

    Invite People as Connection

    Parent Portal

    Subscription Preferences

    Create Page

    Join Portal

    Portal Switcher

    Tags

    Create Portal

    Leave Portal

    Print Preview

    User Preferences


    Tip:

    When you add a component to a page template, you must wait for the application status indicator to finish processing before taking additional action.

  5. Optionally, move components on the page by clicking the Actions icon in the component header and choosing the appropriate option, or click the component header and drag it to a new position.

  6. Click the Preview tab to see how your page template looks without all the Composer artifacts. Click the Design tab to return to Design view.

  7. Click Save to save your changes.

21.6 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:

  1. Navigate to one of the following:

  2. In the left panel, under Structure, click Page Templates.

  3. Select the page template for which you want to set the preferred skin.

  4. In the toolbar, click Actions, and then select Edit Properties.

  5. In the Attributes section of the Edit Properties dialog, in the Name field, enter preferredSkin.

  6. 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. For more information, see Section 20.5.1, "Viewing Information About an Asset."

  7. Click OK.

21.7 Customizing a Shared Page Template for a Portal

Shared page templates (that is, those created at the application level) can also be used in portals. For example, a portal designer may create several corporate page templates for use in portals throughout the application. However, you may find that for a particular portal, the application-level template does not quite work and needs a bit of fine tuning.

One option is to create a copy of the page template within your portal and make the changes you require. However, as soon as you create the copy, the new page template is completely separate from the original. Any changes made to the original page template are not cascaded down to your copy.

Alternatively, within your portal you can customize the shared page template. The customizations you make apply only to the page template in the portal in which you perform them. However, the connection to the original page template is retained, so any changes made at the application level are automatically cascaded down to the page template at the portal level.

Note:

You cannot customize any of the out-of-the-box page templates. You must first create a copy of the out-of-the-box page template at the application level and then customize the copied version at the portal level.

To customize a shared page template for a portal:

  1. Navigate to the Assets page for the portal in which you want to customize the page template.

    For more information, see Section 20.2, "Accessing Portal Assets."

  2. In the left panel, under Structure, click Page Templates.

  3. Select the page template that you want to customize.

  4. In the toolbar, click Actions, and then select Customize.

  5. In Composer, customize the layout and content of the page template as desired.

    For more information, see:

  6. Click Save to save your changes.

    To remove portal-level customizations from a shared page template, select the page template on the Assets page and select Restore Default from the Actions menu.

21.8 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:

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

WebCenter Portal provides several built-in navigation task flows to enable you to quickly add navigation to your portal.

Typically, you first add the desired task flow to the page template and then select the navigation model to use to drive the content of the navigation. This is the method described in this section. However, if you are using a custom resource catalog that includes navigation models, you can start by selecting the navigation model and then choosing which task flow to use to visualize that model. Navigation models are not included in the Default Page Template Catalog.

As well as the task flows described in this section, which you associate with navigation models, WebCenter Portal also provides the Portal Browser task flow, which you can use to enable users to navigate to different portals. For more information, see Chapter 11, "Working with the Portal Browser Task Flow."

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

  1. Open the page template in Composer.

    For more information, see Section 21.4, "Editing a Page Template."

  2. Click the Design tab to enter Design view, which displays the inline resource catalog.

  3. Navigate to the section of the resource catalog that contains the built-in navigation task flows.

    Tip:

    The presence and location of these components 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.

  4. Drag the navigation task flow that you want to add to the target area of the page template, or click the Add link to add the task flow to the topmost area of the page template.

  5. Click the Edit icon for the navigation task flow.

    Figure 21-6 The Edit icon for a Navigation Task Flow

    Description of Figure 21-6 follows
    Description of "Figure 21-6 The Edit icon for a Navigation Task Flow"

  6. In the Component Properties dialog, click the Parameters tab.

  7. From the Navigation drop-down list, select the navigation model that you want to associate with the task flow.

  8. Set any other properties as desired.

    For information about the other properties available for the different navigation task flows, see Section 21.8.2, "Setting Navigation Task Flow Properties."

    For some examples of the effects of these properties, see Section 21.8.2.3, "Using Properties to Configure Navigation Task Flow Instances."

  9. Click OK.

  10. Click Save to save your changes.

21.8.2 Setting Navigation Task Flow Properties

The navigation task flows have associated properties, which users with sufficient properties can access from the Component Properties dialog in Composer (Figure 21-7).

Tip:

For information about accessing the Component Properties dialog, see Section 14.3, "Modifying Components."

Figure 21-7 Navigation Tree Task Flow - Component Properties

Description of Figure 21-7 follows
Description of "Figure 21-7 Navigation Tree Task Flow - Component Properties"

This section provides an overview of the navigation task flow properties and steps you through examples of configuring a task flow instance using property values. This section includes the following topics:

21.8.2.1 About Navigation Task Flow Properties

When you set property values on a navigation task flow, you are affecting only the task flow instance on which the value is set. Other instances of the same task flow are not affected by any such changes.

The properties on the Parameters tab of the Component Properties dialog control the default task flow content. For descriptions of the parameters on this tab, see Section 21.8.2.2, "Navigation Task Flow Properties." For some task flows, parameters on this tab facilitate the wiring of the task flow to page parameters and page definition variables. These properties are unique to the task flow type and are covered in this section. For information about wiring pages and components, see Chapter 19, "Wiring Pages, Task Flows, Portlets, and ADF Components."

Changes to the properties on the Display Options, Style, and Content Style tabs affect the appearance and behavior of the task flow for all users. These properties are common to all task flows. For more information, see Section 14.3, "Modifying Components."

The content of the Events tab depends on the events supported by the task flow. For more information, see Section 14.3.7, "Working with Component Contextual Events."

An Expression Editor is available for entering custom values using Expression Language (EL) expression, allowing properties on the Parameters and Display Options tabs to be determined dynamically based on certain criteria. Click the Expression Editor icon icon next to a property, then select Expression Builder to open the editor. If you need EL assistance, an application developer can provide an EL expression; see the "Expression Language Expressions" appendix in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper

Note:

Wherever you enter EL on the generic Display Options tab in the Component Properties dialog, the entry is automatically validated. If the EL syntax is invalid, an error message appears and the value is neither applied nor saved. Generic display options are those cataloged in Table 14-1.

EL validation is not performed on non-generic display options.

21.8.2.2 Navigation Task Flow Properties

The following tables describe the parameters that are unique to each of the built-in navigation task flows.

Table 21-3 describes the parameters for the Navigation Breadcrumb task flow.

Table 21-3 Navigation Breadcrumb Task Flow Parameters

Parameter Description

Display Style

Specifies whether to display breadcrumbs horizontally or vertically.

Navigation

The navigation model to associate with this task flow.

Show Root

Specifies whether to show the start node in the breadcrumbs.

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 Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."


Table 21-4 describes the parameters for the Navigation Menu task flow.

Table 21-4 Navigation Menu Task Flow Parameters

Parameter Description

Navigation

The navigation model to associate with this task flow.

Second Level Style

The style for rendering the second level of navigation items.

Valid values are: Do Not Display, 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 Menu with Sub-Menus is selected.

  • This property is available only if the Style property is not Menu or Menu with Sub-Menus.

Show Icons

Specifies whether to render icons for each resource.

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 Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."

Note: The Navigation Menu task flow is limited to showing a maximum of two levels of resources.

Style

The style for rendering the first level of resources.

Valid values are Tabs, Bar, Buttons, Choice, List, Menu, Menu with Sub-Menus

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 Menu with Sub-Menus is selected.

  • If a navigable item is rendered using the Menu with Sub-Menus style, the item is rendered twice, once as a drop-down menu, and once as a link to the item itself.


Table 21-5 describes the parameters for the Navigation Tree task flow.

Table 21-5 Navigation Tree Task Flow Parameters

Parameter Description

Navigation

The navigation model to associate with this task flow.

Show Icons

Specifies whether to render icons for each resource.

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 with the Style property set to Collapsed Tree. If the Style property is set to 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.

Valid values are:

  • Do Not Show Root—Do not render the start node

  • Show Root—Render the start node

  • Show Root As Box—Render the start node as the header in a box

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 Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."

Style

The style of the navigation.

Valid values are:

  • Collapsed Tree—Render the given levels (as specified by the Show Levels property) as initially collapsed

  • Expanded Tree—Render all tree nodes, expanded to show all children

  • List—Render a flat list of top-level resources. If any of the top-level resources are folders, the content of those folders are provided in drop-down menus.

Note: Selecting the List option overrides the Show Levels and Show Root properties.


21.8.2.3 Using Properties to Configure Navigation Task Flow Instances

This section includes the following topics:

21.8.2.3.1 Sample Navigation Model

The following sections use examples based on the sample navigation model shown in Figure 21-8.

Figure 21-8 The Sample Navigation Model

Description of Figure 21-8 follows
Description of "Figure 21-8 The Sample Navigation Model"

21.8.2.3.2 Selecting the Start Path for Your Navigation

To select the start path for your navigation:

  1. Create your navigation model, as described in Section 22.3, "Creating a Navigation Model."

  2. Add the Navigation Menu task flow to your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  3. In the Parameters tab of the Component Properties dialog, next to the Start Path field, click the Select Path icon.

  4. 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 our banking application example, if this option is selected, when the user navigates to the Current Accounts page, the navigation looks as shown in Figure 21-9.

      Figure 21-9 Start at the Currently Selected Page Path

      Description of Figure 21-9 follows
      Description of "Figure 21-9 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 our banking application example, if this option is selected with the value of 1, when the user navigates to the Personal Banking page, and then the Current Accounts page, the navigation starts at the first level of this path, that is, Personal Banking Figure 21-10.

      Figure 21-10 Start at Specified Level of the Currently Selected Page Path

      Description of Figure 21-10 follows
      Description of "Figure 21-10 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.

21.8.2.3.3 Rendering Navigation as a Tree

To render your navigation model as a tree:

  1. Create your navigation model, as described in Section 22.3, "Creating a Navigation Model."

  2. Add the Navigation Tree task flow to your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  3. Select the Start Path for the navigation when it is rendered on the page, as illustrated in Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."

  4. 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.

  5. 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:

  6. From the Style drop-down list, select what style to use for the tree.

    • Collapsed Tree displays the tree initially collapsed according to the levels specified by the Show Levels property.

    • Expanded Tree displays the tree with all levels completely expanded.

    • List displays the tree as a flat list of the top-level resources. If any of the top-level resources are folders, they are displayed as drop-down menus that display the contents of the folders.

      Using our banking example, if the start node is Personal Banking, a tree navigation with the List style looks like Figure 21-14.

      Figure 21-14 List Style Tree with No Folders

      Description of Figure 21-14 follows
      Description of "Figure 21-14 List Style Tree with No Folders"

      However, if the start node is Current Account (which contains two folders), it looks like Figure 21-15.

      Figure 21-15 List Style Tree with Folders

      Description of Figure 21-15 follows
      Description of "Figure 21-15 List Style Tree with Folders"

  7. Select Show Icons to display the icons associated with the navigation items in the tree (Figure 21-16).

21.8.2.3.4 Rendering Navigation as a Menu

To render your navigation model as a menu:

  1. Create your navigation model, as described in Section 22.3, "Creating a Navigation Model."

  2. Add the Navigation Menu task flow to your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  3. Select the Start Path for the navigation when it is rendered on the page, as illustrated in Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."

  4. From the Style drop-down list, select how you want to display the first level of navigation items in the menu. Using our sample banking application, we can illustrate the different options for this property:

  5. From the Second Level Style drop-down list, select the style to use for the second level of resources in the navigation.

    Note:

    Menu navigations can render only two levels of resources.

  6. Select Show Icons to display the icons associated with the navigation items in the menu.

21.8.2.3.5 Rendering Navigation as Breadcrumbs

To render your navigation model as breadcrumbs:

  1. Create your navigation model, as described in Section 22.3, "Creating a Navigation Model."

  2. Add the Navigation Breadcrumb task flow to your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  3. Select the Start Path for the navigation when it is rendered on the page, as illustrated in Section 21.8.2.3.2, "Selecting the Start Path for Your Navigation."

  4. Select Show Root to display the start node in the breadcrumbs.

  5. From the Display Style drop-down list, select whether to display the breadcrumbs vertically or horizontally, for example Figure 21-23 shows breadcrumbs displayed horizontally.

    Figure 21-23 Horizontal Breadcrumbs

    Description of Figure 21-23 follows
    Description of "Figure 21-23 Horizontal Breadcrumbs"

    Figure 21-24 shows breadcrumbs displayed vertically.

    Figure 21-24 Vertical Breadcrumbs

    Description of Figure 21-24 follows
    Description of "Figure 21-24 Vertical Breadcrumbs"

21.8.2.3.6 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 model, 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 our banking example.

To link navigation task flows:

  1. Create your navigation model, as described in Section 22.3, "Creating a Navigation Model."

  2. Add the Navigation Menu task flow to a region along the top of your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  3. Add the Navigation Tree task flow to a region along the side of your application's page template, as described in Section 21.8.1, "Adding a Built-in Navigation Task Flow to a Page Template."

  4. Hover the mouse over the Navigation Menu task flow and, in the menu that pops up, click the Edit icon (wrench) for the task flow.

    Tip:

    Ensure that you click the Edit icon for the task flow and not the one for the region that contains the task flow.

  5. In the Component Properties dialog, click the Parameters tab.

  6. 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 the "Expression Language Expressions" appendix in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

  7. In the Start Path parameter, enter / to start at the root of the navigation model.

  8. From the Style drop-down list, select Tabs.

  9. From the Second Level Style drop-down list, select Do Not Display.

    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.

  10. Click OK.

  11. Hover the mouse over the Navigation Tree task flow and, in the menu that pops up, click the Edit icon (wrench) for the task flow.

  12. In the Component Properties dialog, click the Parameters tab.

  13. 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.

  14. Next to the Start Path field, click the Select Path icon.

  15. 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.

  16. 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.

  17. Click OK.

  18. Save and close the page template.

    Figure 21-25 shows how the above procedure might work for our banking example. Selecting the Personal Banking tab at the top of the page displays the rest of the navigation model (from Personal Banking down) on the side of the page.

    Figure 21-25 Linking Navigation Task Flows

    Description of Figure 21-25 follows
    Description of "Figure 21-25 Linking Navigation Task Flows"

21.8.3 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 a navigation model 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 a navigation model 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 a navigation model in a vertical collapsed tree format.

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

21.8.4 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 fairly complex task. As such 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 Section 20.6, "Working with Portal Assets in JDeveloper."

For information about specific considerations for creating page templates in JDeveloper for use in WebCenter Portal, see the "Working with WebCenter Portal Resources" chapter in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

For information about how to programmatically add navigation UI to your page templates using JDeveloper, see the "Visualizing Portal Navigation" section in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

21.9 Managing a Page Template

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