Вы находитесь на странице: 1из 66
An Oracle Red Paper January 2012 Configuring a Contemporary User Experience in PeopleSoft Applications Portal

An Oracle Red Paper January 2012

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

An Oracle Red Paper January 2012 Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Introduction

1

Disclaimer

1

Structure of This Red Paper

2

Related Materials

2

Overview

4

Who Should Read This Paper?

4

Before You Begin

4

Common Terms

4

Branding

5

Branding Overview

5

Creating a Portal Header Definition

7

Customizing the Homepage Tab Layout

15

Customizing Pagelet Layout and Behavior

16

Customizing the WorkCenter Layout

20

Customizing the Workspace Branding Theme

23

Pagelet Wizard Pagelets

26

Pagelet Wizard Overview

26

Creating Navigation Collection Based Accordion Style Pagelets

28

Creating News Publication Based Slide Show Pagelets

30

Creating HTML Pagelets with Rich Content

32

Navigation Collections

35

Navigation Collection Overview

35

Customizing Navigation Collection Styles

36

Creating Navigation Collection Pagelets

40

PeopleSoft Application Integration

42

Configuring Unified Navigation

42

Consuming Content Provider Pagelets

46

Collaboration

48

Collaboration Overview

49

Using Collaborative Workspaces

49

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Viewing Managed Content in the Content WorkCenter Page

51

Appendix A – Code Examples

52

Sample Header Layout Object

53

Sample Homepage Layout Object

54

Sample WorkCenter Layout Object

55

Accordion Style Menu Pagelet XSL

56

Slide Show Pagelet XSL

60

Validation and Feedback

61

Customer Validation

61

Field Validation

61

Authors

61

Revision History

62

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Introduction

This red paper is a practical guide for technical users, installers, system administrators, and programmers who implement, maintain, or develop applications for your PeopleSoft system. In this red paper, we discuss guidelines on how to configure a contemporary user experience in PeopleSoft Applications Portal, including the PeopleSoft Pure Internet Architecture and portal configuration. This document does not cover configuring batch processes.

Much of the information in this document originated within the Oracle Global Support Center and is therefore based on “real-life” problems that have been encountered in the field. Although this document does not address every conceivable problem that one could encounter with PeopleSoft Applications Portal configuration, the issues that appear in this document are the problems that prove to be the most common or troublesome.

Disclaimer

This material has not been submitted to any formal Oracle test and is published as is. It has not been the subject of rigorous review. Oracle assumes no responsibility for its accuracy or completeness. The use of this information or the implementation of any of these techniques is a customer responsibility and depends on the customer's ability to evaluate and integrate them into the customer's operational environment. While each item may have been reviewed by Oracle for accuracy in a specific situation, there is no guarantee that the same or similar results will be obtained elsewhere. Customers attempting to adapt these techniques to their own environments do so at their own risk.

Information in this red paper was developed in conjunction with use of the products specified and is limited in application to those specific hardware and software products and levels.

Oracle may have patents or pending patent applications covering subject matter in this document. The furnishing of this document does not give you any license to these patents.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Structure of This Red Paper

This red paper provides guidance on how to configure a contemporary user experience using PeopleSoft Applications Portal.

Oracle updates this document as needed so that it reflects the most current feedback from the field. Therefore, the structure, headings, content, and length of this document may vary with each posted version. To see if the document has been updated since you last downloaded it, compare the date of your version to the date of the version that is posted on My Oracle Support.

Related Materials

This paper is not a general introduction to PeopleSoft Applications Portal and is written for experienced IT professionals with a good understanding of the PeopleSoft Pure Internet Architecture. To take full advantage of the information in this document, you should have a basic understanding of system administration, basic Internet architecture, integration technologies, relational database concepts and SQL, and how to use PeopleSoft applications.

This document does not replace the PeopleTools 8.4x or 8.5x PeopleBooks. Before you read this document, you should become familiar with the PeopleSoft Pure Internet Architecture information in the PeopleTools PeopleBooks to ensure that you have a well-rounded understanding of the technology.

Note. Much of the information in this document may eventually be incorporated into subsequent versions of the PeopleBooks.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

The following guides discuss many of the fundamental concepts that are related to the PeopleSoft Pure Internet Architecture:

PeopleTools PeopleBook: Getting Started with PeopleTools

PeopleTools PeopleBook: System and Server Administration

PeopleTools PeopleBook: PeopleSoft Application Designer Developer’s Guide

PeopleTools PeopleBook: PeopleSoft Integration Broker

PeopleTools PeopleBook: PeopleSoft Integration Broker Administration

PeopleTools PeopleBook: PeopleCode API Reference

PeopleTools Installation for your database platform

PeopleTools Hardware and Software Requirements

Additionally, you should be familiar with the documentation that is delivered with Oracle Tuxedo, Jolt, and WebLogic.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Overview

Many customers use PeopleSoft Applications Portal as the gateway for their enterprise applications that aggregates both PeopleSoft and external content. This red paper provides guidance on how to provide a richer and more compelling user experience using PeopleSoft Applications Portal features.

This chapter includes the following topics:

Who should read this paper?

Before you begin

Common terms

Who Should Read This Paper?

For PeopleSoft Applications Portal, administration refers to the process of implementing and setting up an application for a company and its employees and using the administrative features of the application.

Typically, administrative users configure and administer the application. An administrative user can be either an Oracle Consulting Services representative or the designated members of your implementation team who are familiar with the PeopleSoft Applications Portal product and your organization’s business requirements. This guide assumes at least that level of knowledge and describes how to configure the PeopleSoft Applications Portal.

Before You Begin

Before you begin, you must install the PeopleSoft Applications Portal 9.1 Feature Pack 1 or later environment on PeopleTools 8.52 or later, although some of the features described in this red paper may also work in earlier PeopleSoft Applications Portal releases or PeopleTools releases.

Common Terms

The following table provides definitions for some of the common terms that are used in this guide.

TABLE [1]. COMMON TERMS

TERM

DEFINITION

Applications Portal

PeopleSoft Applications Portal (formerly known as PeopleSoft Enterprise Portal or Community Portal) is a separately licensed product that can serve as the gateway of the enterprise or the rest of the world. It provides seamless and simple integration of PeopleSoft applications, as well as numerous collaboration and Web 2.0 features such as branding, content management, discussions, feeds, tagging, blogs, wikis, and others. A limited use license of the PeopleSoft Applications Portal comes with PeopleTools 8.50 and above, so that application can use its collaboration features such as Workspaces and related content services free of charge.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Branding

Branding is one of the core features of the PeopleSoft Applications Portal. It enables enterprises to provide an attractive look and feel that is intuitive and reflects the unique branding, presentation, and appearance that each enterprise or institution would like to display to its communities. With the branding feature, various branding themes can be applied to portals, portal sites, and collaborative workspaces for specific user audiences. This provides the benefit of sharing a single PeopleSoft Applications Portal database to meet the portal needs of the enterprise.

This chapter includes the following topics:

Branding overview

Creating a portal header

Customizing the homepage tab layout

Customizing pagelet layout and behavior

Customizing the WorkCenter layout

Customizing the workspace branding theme

For more details regarding the various branding features, please refer to the following PeopleBook sections:

Understanding Branding Theme Development and Deployment chapter of PeopleSoft Applications Portal 9.1 PeopleBook: Branding.

Using Predefined Homepage HTML Objects section in the Modifying Portal Interface chapter of the PeopleTools PeopleBook: Portal Technologies.

Describing Branding Considerations section in the Building Pagelets chapter of PeopleTools Portal Technologies PeopleBook.

Using Pagelet Wizard chapter of PeopleTools PeopleBook: Portal Technologies.

Branding Overview

The PeopleSoft Applications Portal branding framework provides various components for administrators and developers to define headers and footers, assemble them into themes, and assign themes to user roles in portal, portal sites, and workspaces. It also provides a way for subject matter experts to override those branding elements for sites or workspaces to create compelling sub- communities within the portal.

The following chart illustrates the branding development process flow. After the design work is completed, the development starts with creation of a header definition. The branding framework provides a list of system elements that can be used in the header. An existing layout object or a new layout object is used to specify the location of those elements in the header. Administrators can further

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

configure those system elements used in a header definition for things such as which links to show in a bar, or whether an element can be overridden in portal sites or workspaces, and so on.

can be overridden in portal sites or workspaces, and so on. Figure 1 – Branding Development

Figure 1 – Branding Development Process Flow

Once the header definition is created, administrators can assemble it into branding themes. Each theme consists of two headers definitions – one to be used on homepage tabs and dashboard pages, and the other for transaction pages. Both headers can use the same header definition. Optionally, one footer definition for the homepage, one style sheet definition, and one menu style definition can also be defined in a theme.

Branding themes can be assigned to portals as their default theme, and can also to be associated with user roles, along with a priority number. At runtime, the branding framework will display the theme based on user roles of the current user and the portal the user is in.

A default branding theme can also be assigned to portal sites created through PeopleSoft Applications Portal’s Site Manager. Additionally, with the site manager wizard, administrators can also specify which elements in the branding theme can be overridden by subject matter experts in charge of that particular portal site.

Collaborative workspaces employ a similar schema – a different branding theme is assigned to the workspace template, along with information of which elements of the theme can be overridden in workspaces created from that template.

The branding framework provides interfaces to upload HTML objects and images used by branding themes and stores them as managed objects in the database. For example, HTML objects can be uploaded from the “Enable HTML Layouts” component, while images can be uploaded through the “Define Menu Styles” component when looking up images used in the menu. The upload feature can be enabled or disabled on the “Installation Options” tab of the “Installation Options” component in the “Portal Administration >> System Data” folder. Editing existing HTML objects and images are not supported due to security and system integrity concerns.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

TABLE [2]. FACTSHEET OF THE BRANDING FRAMEWORK

SKILL REQUIRED

Knowledge of the PeopleSoft Applications Portal branding framework.

Knowledge of HTML and style sheets.

Knowledge of PeopleCode when custom PeopleCode is required.

NAVIGATION

Most of the branding development tasks can be done through PIA pages in the “Portal Administration >> Branding” folder. The “Branding Center” navigation collection page in the “Portal Administration” folder can also be used for quick access to various branding related menu items.

APPLICATION DESIGNER ACCESS

Application Designer access is generally not required to create branding definitions such as headers or footers. However, Application Designer access is required to create and maintain style sheets to be associated with branding themes for customizing component page styles. Application Designer access is also required in some rare cases to create application classes used by custom branding elements in header or footer definitions for special requirements.

DATA MIGRATION

Branding definitions can be moved between databases using data mover scripts. PeopleSoft Applications Portal provides sample data mover scripts on its VCD to export and import branding definitions belonging to a specific theme. The scripts are “eppbrthmimp.dms” and “eppbrthmimp.dms”. With the VCD installed, the default location of those two script files are the “PS_APP_HOME\scripts” folder.

Managed objects used by the branding themes, such as application class definitions, PeopleCode, HTML objects, and images, are not covered by the data mover scripts. An Application Designer project should be used to move those managed object definitions.

UPGRADE IMPACT

Branding definitions should not be affected by PeopleTools upgrade or application upgrade. However, certain elements and/or features used by the branding code may be updated in a new release. In addition, if PeopleSoft delivered branding definitions and code are modified in any way, those changes may be lost during the upgrade. Therefore, it’s always a good practice to verify the branding themes after the upgrade. After an upgrade is also the perfect time to make changes to utilize the enhancements in the latest PeopleTools or PeopleSoft Applications Portal release.

Creating a Portal Header Definition

In this section, we will discuss how to create a portal header definition. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered branding definitions are modified. In that case, changes should be reapplied to those branding definitions after the upgrade.

Layout Object

The first task when creating a portal header definition is to create a layout object, which is basically an HTML object within which bind variables are used to specify the location of branding elements inside

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

the HTML document. The navigation path to the layout object maintenance component is “Portal Administration >> Branding >> Define Elements >> Enable HTML Layouts”.

Define El ements >> Enable HTML Layouts”. Figure 2 – The HTML Layouts and Element Selection

Figure 2 – The HTML Layouts and Element Selection Page

On the “HTML Layouts and Element Selection” page, specify the name of the HTML object to be used as the layout object. The branding framework provides several layout objects that can be used directly or as the base of a new layout object. It is recommended to use the PAPPBR_HTMLHDR7_PT_SWAN layout object or to create a new one from it. The content of that HTML object can be retrieved without Application Designer access – open the PAPPBR_PLCMNTHDR7_PT_SWAN header layout object, and then click the “View HTML Text” link on the page.

All branding system elements of the specified layout type are listed in the “Branding Elements” grid of the “HTML Layouts and Element Selection” page. There are two types of layout objects – header and footer. Each type of layout objects has a different list of system elements.

In the grid, select the elements to be used in the layout object by selecting the “Select” checkbox. Select the “Required Element” checkbox to indicate that an element must be configured when using the layout object for header or footer definitions. Some elements in the grid are grayed out. Those are system reserved elements and must be present in the layout object. Otherwise, the portal header may stop functioning.

To create a new layout object, click the “Add New HTML” link to open the “Add to HTML Catalog” page. On the page, specify a name of the object, and then copy and paste the HTML text into the field.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Click the “OK” button to save the HTML text as a managed object with the specified name, and then return to the “HTML Layouts and Element Selection” page.

return to the “HTML Layouts and Element Selection” page. Figure 3 – The Add to HTML

Figure 3 – The Add to HTML Catalog Page

The complete HTML of the DEMO_HEADER_LAYOUT sample header layout object can be found in Appendix A. In addition to the system reserved elements, it uses the following elements:

“My Links %1” element for the My Links dropdown list box;

“Personalization %4” element for the personalize homepage content and layout links;

“Header Bar One %6” element for header links;

“Custom Image %31” element for a company logo image,

“Custom HTML %51” element for homepage tabs,

“Custom HTML %52” element for custom JavaScript and style class definitions,

“Custom HTML %53” element for the dashboard label,

Both the “Scope Search Options %2” element and the “Global Search Option %2” element for search objects.

Note. There are three search related branding system elements - the “Search Options %2” element for traditional portal search objects, the “Scope Search Options %2” element for PeopleSoft Applications Portal’s scoped search objects, and the “Global Search Option %2” element for the PeopleSoft Search

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Framework’s global search objects (known as Application Search) new in PeopleTools 8.52. All three branding system elements use the same bind variable, so that the same layout object can be used for different search options, and switch between them seamlessly.

Header Definition

Once the layout definition is created, the next step is to define the header definition. This is the time and place to define details of each branding element used in the layout definition, as well as to specify which elements can be overridden in portal sites by site owners. The navigation path to the header definitions component is “Portal Administration >> Branding >> Define Headers”.

>> Branding >> Define Headers”. Figure 4 – The Define Header Page Header definitions are

Figure 4 – The Define Header Page

Header definitions are effective dated. Once an effective date is specified, a layout object should be selected. Depending on the branding elements enabled in the layout object definition, more tabs will be available to configure those enabled elements.

tabs will be available to configure those enabled elements. Figure 5 – The Images Tab The

Figure 5 – The Images Tab

The “Images” tab is used to configure the branding header element custom images %31 to %40 and custom image URLs %41 to %50. You can browse the image catalog to select an existing image already stored in the database, or upload a new image into the database. At runtime, the selected images will be copied into the web server cache directory, and the image HTML or URL will replace the corresponding bind variables in the layout object. When the header definition is to be moved to

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

another database, an Application Designer project should be used to move those images along with the branding definitions.

If the images are already stored on the internet, a URL can also be used directly. Just select “URL” from the “Image Source” dropdown list box, and then type in the URL. It is not recommended to use external images in branding definitions though, as there would be no guarantee that the images would always be available, and extra maintenance efforts are required when the images are moved or lost.

effort s are required when the images are moved or lost. Figure 6 – The Bars

Figure 6 – The Bars Tab

The “Bars” tab is used to configure the branding header element personalization bar (%4) and header bars one (%6) to ten (%15). The personalization bar element will only be available when the header is used on the homepage.

To view and modify the detail of bar type branding elements, click the “Edit Items” button, which will open the “Bar Detail” page.

When the bar contains multiple items, an image-based or text-based divider can be defined on this tab. The divider can also be added as an item inside the bar to give more control over each divider.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 7 – The Bar Detail Page The “Bar

Figure 7 – The Bar Detail Page

The “Bar Detail” page lists all items added to a bar type of branding element. Those items can be a URL (custom link), one of fourteen system links such as the “Sign Out” link, plain text, HTML text, system data such as %date etc., or the welcome message.

For link items, an image can be specified to be used as an icon in front the text. Likewise, you can select from existing images stored in the database, upload a new image, or use an external URL.

For HTML items, you can choose to generate the content at runtime using an application class, to use an existing HTML definition, or to type the content in the field provided directly.

or to type the content in the field provided directly. Figure 8 – The HTML Area

Figure 8 – The HTML Area Tab

The “HTML Area” tab is used to configure branding header custom HTML elements %51 to %60. You can choose to use an existing HTML definition, to type in the HTML text in the field provided directly, or to run an application class method to generate the text at runtime.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

When application class methods are used by any branding element, an Application Designer project should be used to move the corresponding application package definitions, application class definitions, and application class PeopleCode definitions along with the branding definitions.

PeopleCode definitions along with the branding definitions. Figure 9 – The Special Elements Tab The “Special

Figure 9 – The Special Elements Tab

The “Special Elements” tab is used to configure branding header elements such as the My Links dropdown list box (%1), the search in the header (%2), the homepage help link (%3), and homepage tabs (%5).

For the search in the header, there are three options to choose from – the Search Options, which is the traditional portal search; the Scope Search Options, which is the PeopleSoft Applications Portal scoped search; and the Global Search Option, which is Application Search from the PeopleSoft Search Framework available in PeopleTools 8.52 and later. All three search options use the same bind variable in the layout object. The intention is so that you can switch between different search options at will, while continuing to use the same layout object. However, each search option uses different HTML objects. Cascading style sheet (CSS) changes may be required to adjust the position and layout of the search box objects in the header.

The homepage tabs element and the search options element can be further configured. Click the “Edit Options” button to open the corresponding page.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 10 – The Homepage Tabs Options Page The

Figure 10 – The Homepage Tabs Options Page

The “Homepage Tabs” page is the place to configure the homepage tabs element. An HTML table element is used to draw the homepage tab line. The style class and images to be used for the active homepage tab and inactive tabs can be specified here.

Likewise, images can be a system catalog image or an external URL. When any of the images are not specified, a warning message will show up for each missing image reference when the header definition is saved. Those warning messages can be safely ignored, when the image is indeed not required for rendering the homepage tabs.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 11 – The Search Options Page The “Search”

Figure 11 – The Search Options Page

The “Search” page is the place to configure the search options element. The search box label, the initial text in the search box, the search icon, and the style classes to be used can be specified here.

Note. The Application Search of the PeopleSoft Search Framework does not currently support these options.

Customizing the Homepage Tab Layout

In this section, we will discuss how to alter the homepage tab layout. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered objects are modified. In that case, changes should be reapplied to those objects after the upgrade.

PeopleSoft uses fixed name HTML objects and image objects to build portal homepage tabs. Using the portal registry content reference’s attribute fields, the default objects can be overridden for particular tabs to alter their look for the presentation requirements.

The default portal homepage tab layout objects are the PORTAL_HP_2COL_LAYOUT HTML object for the two-column layout and the PORTAL_HP_3COL_LAYOUT HTML object for the three-column layout. To override them, navigate to “PeopleTools >> Portal >> Structure and Content”, and then go to the “Root >> Portal Objects >> Homepage >> Tabs” folder. Edit the portal registry content reference definition of the portal homepage tab, and add a content reference attribute. In the “Name” field, enter “PORTAL_HP_2COL_LAYOUT” or “PORTAL_HP_3COL_LAYOUT” depending on which layout object you want to override. In the “Attribute value” field, enter the name of the HTML object to be used as the new layout object. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 12 – Content Reference Attribute for Homepage Tab

Figure 12 – Content Reference Attribute for Homepage Tab Layout

The complete HTML of the DEMO_HP_3COL_LAYOUT sample three-column homepage layout object can be found in the Appendix A. The layout object uses the <Pagelet> meta-tag to load a banner pagelet and show it on top of the middle and right column. The homepage tab using that layout object looks like the following.

tab using that layout object looks like the following. Figure 13 – Homepage Tab with Banner

Figure 13 – Homepage Tab with Banner Pagelet

Customizing Pagelet Layout and Behavior

In this section, we will discuss how to alter the pagelet layout and the behavior. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered objects are modified. In that case, changes should be reapplied to those objects after the upgrade.

Similar to portal homepage tabs, the default layout and behavior for particular pagelets can be overridden by modifying that pagelet’s portal registry content reference attributes to fit the presentation requirements. To modify the portal registry content reference properties, navigate to “PeopleTools >> Portal >> Structure and Content”, and then go to the “Root >> Portal Objects >> Pagelets” folder. All homepage pagelet content reference definitions can be found in the subfolders of that folder.

Pagelet Layout

The default pagelet layout object is the PORTAL_HP_COMPONENT HTML object. To override it, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

“PORTAL_HP_COMPONENT”. In the “Attribute value” field, enter the name of the HTML object to be used as the new layout object. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 14 – Content Reference Attribute for Homepage

Figure 14 – Content Reference Attribute for Homepage Pagelet Layout

The Pagelet Wizard framework delivers three pagelet layout objects:

, PTPPB_HP_COMP_NOHEAD HTML object for pagelets that do not display the header,

PTPPB_HP_COMP _NOBORDER HTML object for pagelets that do not display the border,

PTPPB_HP_COMP_NOHEAD_NOBORDER HTML object for pagelets that display neither the border nor the header.

When a pagelet is published through Pagelet Wizard, the pagelet layout option can be specified on the step six page of the wizard. For other special requirements, a content reference attribute has to be manually added to the pagelet content reference definition.

Pagelet Deferred Loading

In PeopleTools 8.51 and later, in order to improve the homepage loading performance, all homepage pagelets are set for deferred loading by default, which means the homepage layout will be loaded first, and then pagelet contents will be loaded through AJAX. In some cases, this behavior is not desired. For example, a quick link pagelet should always be loaded first, so that users can start without waiting for all homepage pagelets to be loaded.

To disable deferred loading of a pagelet, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PTPGLTDEFERLOAD”. In the “Attribute value” field, enter “false”. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 15 – Content Reference Attribute for Disabling

Figure 15 – Content Reference Attribute for Disabling Pagelet Deferred Loading

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Banner Pagelets

A banner pagelet is a pagelet that displays cross two or more columns on a homepage tab and above all

other pagelets in those columns. Traditionally, it could only be done by using a custom homepage tab layout object. In PeopleTools 8.52, a new attribute was added to support banner pagelets on homepage tabs. Those banner pagelets will be displayed on top of other pagelets and across all columns. A two- column banner pagelet on a three-column layout homepage is not yet supported by this attribute. A custom homepage tab layout object still needs to be used in these cases.

To create a banner pagelet, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PORTAL_BANNER_PGLT”. In the “Attribute value” field, enter “1” to display both the pagelet border and the pagelet header, enter “2” to hide the pagelet header but display the pagelet border, and enter “3” to hide both the pagelet border and the pagelet header. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

When a banner pagelet is added to a homepage tab, the pagelet type should be set to required pagelet and fix-positioned (Req-Fix).

be set to required pagelet and fix-positioned (Req-Fix). Figure 16 – Content Reference Attribute for Banner

Figure 16 – Content Reference Attribute for Banner Pagelet

Here is the sample of a banner pagelet on the Talent Summary dashboard.

sample of a banner pagelet on the Talent Summary dashboard. Figure 17 – Banner Pagelet Sample

Figure 17 – Banner Pagelet Sample

Pagelet Icons

A pagelet icon is the icon showing before the pagelet label in the pagelet header area. Traditionally, it

can only be added by using a custom pagelet layout object with bind variables. In PeopleTools 8.52, a

new attribute was added to ease the task.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

To specify a pagelet icon, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PT_PORTAL_PGLT_HDR_IMG”. In the “Attribute value” field, enter the name of the image object to be used as the pagelet icon. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 18 – Content Reference Attribute for Pagelet Icon

Figure 18 – Content Reference Attribute for Pagelet Icon

Here is an example of a pagelet icon.

for Pagelet Icon Here is an example of a pagelet icon. Figure 19 – Pagelet Icon

Figure 19 – Pagelet Icon Sample

Pagelet Help

When pagelet help is configured for a pagelet, a question mark icon will be show in the pagelet header area. Clicking the icon will open the help document for the pagelet. Traditionally, PeopleSoft supports linking a pagelet with PeopleBooks-based help using the “Help ID” field of the pagelet’s portal registry content reference definition. In PeopleTools 8.50, a new attribute was added so that pagelet creators can specify their own help documents for any pagelet. When both the help link and the help ID are specified, the help link will be used.

When a pagelet is created through Pagelet Wizard, the help URL (link) can be specified in step one of the wizard. Otherwise, a content reference attribute has to be manually added to the pagelet content reference definition.

To specify a pagelet help document manually, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PTPPB_PAGELET_HELP_LINK”. In the “Attribute

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

value” field, enter the link to the help document. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 20 – Content Reference Attribute for Pagelet Help

Figure 20 – Content Reference Attribute for Pagelet Help Link

Pagelet Auto Refresh

In PeopleTools 8.50, a new attribute was added to support refreshing homepage pagelets at specified intervals. This can also be used to force reloading of a pagelet from the server when the homepage tab is loaded.

To specify the pagelet refresh time, enter the number in seconds in the “Refresh Time (sec)” field of the pagelet content reference object. An interval less than 30 seconds is not recommended, as it will degrade server performance.

is not recommended, as it will degrade server performance. Figure 21 – Content Reference Attribute for

Figure 21 – Content Reference Attribute for Pagelet Refresh Time

Customizing the WorkCenter Layout

In this section, we will discuss how to alter the WorkCenter page layout. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered objects are modified. In that case, changes should be reapplied to those objects after the upgrade.

WorkCenter Pages

The WorkCenter framework is a new feature in PeopleTools 8.51. The only step needed to convert any content reference object in the portal registry into a WorkCenter page is to change the content reference object to use the WorkCenter template.

The WorkCenter page template is an iScript-based iframe template. It uses one iframe to display the pagelet area page and another for transaction pages. The pagelet area page itself is another “psp” page using an HTML template to display homepage pagelets or template pagelets.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

The navigation path to manage existing WorkCenter pages or create new ones is “PeopleTools >> Portal >> WorkCenter >> Manage WorkCenter Pages”.

Page Layout Templates

When you configure a WorkCenter page, there is an option to select a layout template. Page layout templates can be maintained at “PeopleTools >> Portal >> WorkCenter >> Define WorkCenter Templates”.

The default page layout template uses the LeftPageletAreaTemplate application class in the PTAL_PAGE:PageTemplate application package to render the page layout. You can create your own layout templates by extending the default one. This gives you total control of almost any objects used by the template such as the location of the pagelet area, the icons used on the page, the pagelet area page layout, and so on. However, when a new page template is created, it’s up to you to synchronize your changes with the default template after the upgrade.

your changes with the default template after the upgrade. Figure 22 – Define Page Layout Templates

Figure 22 – Define Page Layout Templates Page

Layout HTML Objects

An alternative way to alter the WorkCenter page layout is to specify a layout HTML object when configuring a WorkCenter page. This can be used for simple tasks such as to use a different style sheet for the top page, to hide certain elements, or to show additional objects.

The default page layout HTML object is PTAL_LAYOUT_DEFAULT. The complete HTML can be found in Appendix A. New page layout objects can be created by cloning the content from the default one, and then saving it with the “PTAL_LAYOUT_” prefix.

Pagelet Layout

Similar to a homepage, a WorkCenter page supports overriding the default pagelet layout object by using a content reference attribute. The default pagelet layout object is the

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

PTAL_PAGELET_LAYOUT HTML object. To override it, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PORTAL_TP_COMPONENT”. In the “Attribute value” field, enter the name of the HTML object to be used as the new layout object. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 23 – Content Reference Attribute for WorkCenter

Figure 23 – Content Reference Attribute for WorkCenter Pagelet Layout

Pagelets in an iFrame

In some cases, it is required to show pagelets in an iFrame inside the pagelet area. To do that, add a content reference attribute to the pagelet content reference object. In the “Name” field, enter “PORTAL_SHOW_IN_IFRAME”. In the “Attribute value” field, enter “TRUE”. The “Label” field is optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

make sure the “Translate” checkbox is unselected. Figure 24 – Content Reference Attribute for Showing

Figure 24 – Content Reference Attribute for Showing WorkCenter Pagelets in an iFrame

Pagelet Conditional Display

In some cases, it is required to show or hide pagelets based on business logic. This is possible by associating an application class with a pagelet, and using its return value to control whether to show or hide the pagelet. To do that, add two content reference attributes to the pagelet content reference object. For the first content reference attribute, in the “Name” field, enter “CANBEINVISIBLE”. In the “Attribute value” field, enter “TRUE”. For the second content reference attribute, in the “Name” field, enter “PTAL_PAGELET_CLASS”. In the “Attribute value” field, enter the name and path of the application class to be executed. The associated application class must extend the PTAL_PAGE:UTILITY:PageletWrapper base class. The “Label” fields of both attributes are optional. When a label is not specified, make sure the “Translate” checkbox is unselected.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 25 – Content Reference Attribute for C onditionally

Figure 25 – Content Reference Attribute for Conditionally Displaying WorkCenter Pagelets

Customizing the Workspace Branding Theme

In this section, we will discuss how to brand workspaces. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered branding definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

Select Branding Themes in Workspace Template

When a workspace template is created, workspace administrators can select the branding theme to be used for the template and any workspace instances created from that template on the “Properties” tab of the “Workspace Administration” component.

tab of the “Workspace Administration” component. Figure 26 – Selecting a Workspace Template Branding Theme

Figure 26 – Selecting a Workspace Template Branding Theme

Once a theme is selected, workspace administrators can then specify which elements in the header or footer definitions of the selected theme can be overridden by subject matter experts in workspace instances created based on that template. Click the “Select Overridable Elements” link on the “Properties” tab of the “Workspace Administration” component to open the “Select Branding Theme and Overrides” page. Select the elements and save the data.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 27 – Select Branding Theme and Overrides Page

Figure 27 – Select Branding Theme and Overrides Page

Override Branding Elements in Workspace Instances

To override branding elements in workspace instances, go to the “Advanced” tab of the “Workspace Administration” component, and click one of the links in the “Branding” folder on the page to open the corresponding page.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 28 – Advanced Tab of Wor kspace Administration

Figure 28 – Advanced Tab of Workspace Administration Component

On the page opened, an “Override Options” icon will be displayed beside overridable elements selected at the workspace template level. Click the icon to specify the override options –to use the default, to override, or to hide the element.

–to use the default, to override, or to hide the element. Figure 29 – Override Homepage

Figure 29 – Override Homepage Header Page

For example, here are the override options for the search options element.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 30 – Override Options for the Search Options

Figure 30 – Override Options for the Search Options Element

Pagelet Wizard Pagelets

This chapter describes how to build content rich pagelets using the Pagelet Wizard framework.

This chapter includes the following topics:

Pagelet Wizard overview

Creating navigation collection based accordion style pagelets

Creating news publication based slide show pagelets

Creating html pagelets with rich content

For more details, please refer to the “Using Pagelet Wizard” chapter of PeopleTools PeopleBook: Portal Technologies.

Pagelet Wizard Overview

Pagelet Wizard is a browser based graphical user interface (GUI) for portal administrators and nontechnical users to create and publish pagelets. No PeopleSoft specific application development tools or skills are required to use the Pagelet Wizard. To create new pagelets, users just need to go through the steps presented and fill in the values as needed.

Typically, there are six steps to create new pagelets, which. are explained below. Depending on the data source selected, some steps may be skipped.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Step one is to specify pagelet information such as the pagelet label and description. A pagelet help URL can also be specified on this step.

Note. The pagelet help URL is only supported for homepage pagelets.

Step two is to specify the source type of the pagelet data, and define the data source. For example, when PeopleSoft Query is selected as the data source type, the query name should also be entered to define the data source. PeopleTools delivers the following data source types: Activity Guide, HTML, IB Connector, Integration Broker, Navigation Collections, OBIEE Report, PeopleSoft Query, Pivot Grid, Rowset, Search record, and URL. PeopleSoft Applications Portal delivers the following additional data source types: Action Items, Blogs, Content Management, Content Management Folder, Community Calendars, Collaborative Workspace Links, Discussions, News Publications, Shortcut Collection, and Workspace Pagelet. Please refer to the PeopleBooks for details of each data source type.

Step three is to configure parameters of a data source. –for example, specifying the value of the PeopleSoft query prompt variable, configuring whether users can personalize a specific data source parameter value, and so on. Not all data source have parameters;. for those data sources, this step will be skipped.

Step four is to specify a display format. The output of the data source will be processed by the display format code, which is usually but not limited to an XML/XSLT transformation. When a data source is only associated with one display format, this step will be skipped.

Step five is to specify additional display options such as header, footer, or search box to be added to the pagelet, the XSL to be used, and so on. Depending on the display format selected in the step four, different pages will be shown with the specific options for that display format.

Step six is to publish the pagelet as homepage pagelet, template pagelet, or embeddable pagelet. Pagelet security is also defined here.

At runtime, the Pagelet Wizard framework processes the pagelet rendering request in the following order:

Step one is to load the pagelet definition metadata from the database and verify the pagelet’s permissions.

Step two is to populate data source parameter values. Especially for those data source parameters whose usage type are system variables, user specified, admin specified, or contextual, their values can only be determined at that time.

Step three is to execute the data source code.

Step four is to execute the display format code to process the data source output, when applicable.

Step five is to process the meta-tags in the display format code output, when it’s XML, and append header, footer, and pagelet search box to generate the final output.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

The Pagelet Wizard framework also provides additional components for administrative tasks such as to delete a pagelet definition or to generate scripts that export/import pagelet definitions. All those components can be found in the “PeopleTools >> Portal >> Pagelet Wizard” folder.

TABLE [3]. FACTSHEET OF THE PAGELET WIZARD FRAMEWORK

SKILL REQUIRED

Knowledge of the Pagelet Wizard.

Knowledge of XML and XSL transformation.

Knowledge of HTML and style sheets.

Knowledge of the data source to be used such as navigation collections, PeopleSoft Query, and so on.

NAVIGATION

All Pagelet Wizard related menu items are in the “PeopleTools >> Portal >> Pagelet Wizard” folder.

APPLICATION DESIGNER ACCESS

Application Designer access is not required to create Pagelet Wizard pagelets.

DATA MIGRATION

Pagelet definitions can be moved between databases using data mover scripts. The Pagelet Wizard framework provides a utility to generate such scripts. The navigation path to the utility is: “PeopleTools >> Portal >> Pagelet Wizard >> Export/Import Pagelets”.

Pagelet data source definitions, such as navigation collection definitions and/or PeopleSoft Query definitions, are not covered by the generated pagelet wizard data mover scripts. An Application Designer project or data mover scripts should be used to move those definitions.

In addition, when a pagelet is published in portals, content reference objects will be created in the portal registry. Those portal registry content reference objects should be moved using an Application Designer project. When the pagelet is published as a homepage pagelet, the content reference object can be found in subfolders of the “Root >> Portal Objects >> Pagelets” folder; when the pagelet is published as a template pagelet, the content reference object can be found in the “Root >> Portal Objects >> Template Pagelets” folder.

UPGRADE IMPACT

Pagelet definitions should not be affected by PeopleTools upgrade or application upgrade.

Creating Navigation Collection Based Accordion Style Pagelets

In this section, we will discuss how to create a navigation collection based accordion style menu pagelet using the Pagelet Wizard and jQuery. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered navigation collection definitions or pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Navigation Collection

The first step is to create a new navigation collection to contain the menu structure. It should have one level sub-folder structure only. In the following example, a menu folder is used.

only. In the fo llowing example, a menu folder is used. Figure 31 – Navigation Collection

Figure 31 – Navigation Collection for Accordion Style Menu Pagelet

Custom folder icons are associated to sub-folders in the selected menu folder by adding the “PTPP_IMAGE” content reference attribute to the folder reference object. The attribute value is the image object name.

object. The attribute value is the image object name. Figure 32 – Custom Folder Icon for

Figure 32 – Custom Folder Icon for Navigation Collection Sub-folders

Accordion Style Menu Pagelet

The next step is to create a navigation collection pagelet using the Pagelet Wizard. At step five, copy and paste the sample XSL code into the “XSL” field. The complete sample XSL can be found in Appendix A. The XSL will transform the navigation collection XML into the HTML structure required and then invoke the jQuery function to render the menu. The pagelet preview will look like the following:

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 33 – Accordion Style Menu Pagelet Preview Note.

Figure 33 – Accordion Style Menu Pagelet Preview

Note. The jQuery UI style sheet (jquery-ui.custom.css) and two jQuery library scripts are used in this pagelet – the jQuery core (jquery.min.js) and the jQuery UI (jquery-ui.min.js). In addition, three external images are used – the bullet point (bullets.gif) for child menu items, and the open or collapsed folder images (Arrow_Down.png/Arrow_Up.png). It is assumed that these scripts, style sheet, and images reside in the “ps” folder in the web server root folder. If the file path in your environment is different, please update the XSL accordingly.

To download the latest jQuery files, please go to the http://jqueryui.com/download page, select all components if they are not already selected, and then click the download button. The refrenced files can found in the “css” and “js” subfolders in the downloaded zip file. By default, the file names contain the version number. Be sure to remove the version number before copying the files to the web server. If you want to keep the version number, please update the file names in the XSL accordingly.

The arrow and bullet images are not delivered as part of the PeopleSoft Applications Portal product. You can use your own set of images. Please make sure to update the file names in the XSL accordingly.

Creating News Publication Based Slide Show Pagelets

In this section, we will discuss how to create a news publication based slide show pagelet using the Pagelet Wizard and jQuery. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered sample news publication definitions or pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

News Publication

The first step is to create a separate news publication to host all articles displayed in the pagelet. At least two articles are needed to see the slide show effect.

least two articles are needed to see the slide show effect. Figure 34 – News Publicati

Figure 34 – News Publication for Slide Show Pagelet

All articles to be used should have an associated image of equal size. There are options to either use an external URL, or to upload the image and store it in the content management tables.

the image and store it in the content management tables. Figure 35 – Associated Image of

Figure 35 – Associated Image of the Learning Center News Publication Article

Slide Show Pagelet

The next step is to create a news publication pagelet using the Pagelet Wizard. At step five, copy and

paste the sample XSL code to the “XSL” field. The sample XSL can be found in Appendix A.

XSL will transform the XML data of the news publication into the HTML structure required and then invoke the jQuery function to start the slideshow. The pagelet preview will looked like the following. Clicking the image will open the corresponding news publication article.

The

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 36 – Slide Show Pagelet Preview Note. Two

Figure 36 – Slide Show Pagelet Preview

Note. Two jQuery library scripts are used in this pagelet – the jQuery core (jquery.min.js) and the jQuery Cycle plugin (jquery.cycle.all.js). It is assumed that these scripts reside in the “ps” folder in the web server root folder. If the file path in your environment is different, please update the XSL accordingly.

To download the latest jQuery core file, please go to the http://jquery.com/ page, and then click the download button. By default, the file name contains the version number. Be sure to remove the version number before copying the files to the web server. If you want to keep the version number, please update the file name in the XSL accordingly.

To download the latest jQuery Cycle plugin file, please go to the http://jquery.malsup.com/cycle/download.html page, and then click the “Cycle Plugin” link to download the full plugin.

Creating HTML Pagelets with Rich Content

In this section, we will discuss how to create HTML pagelets with rich content using the Pagelet Wizard. All items described in this section are generally considered as configuration and should have no upgrade impact. However, changes to enable the Rich Text Editor source editing mode should be reapplied after the upgrade.

HTML Source Editing Mode

The HTML data source uses a Rich Text Editor (RTE) to enter the data. It does provide benefits for functional users with limited knowledge of HTML, but it does not provide native supports to add rich content such as YouTube videos. Users have to type in the HTML code directly. The RTE does have a source editing mode that allows users to do so. However, the source editing mode is disabled in PeopleTools by default due to security concerns.

To enable the RTE source editing mode on the Pagelet Wizard page only, open the PTPPB_WIZ_DATASRC page definition in the Application Designer; double click the long edit box under the “HTML Text” label; switch to the “Options” tab in the “Long Edit Box Properties” window; and then set the “Configuration Setting Id” field to “PT_RTE_CFG_PTPPB”.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 37 – Enable HTML Source Mode in Pagelet

Figure 37 – Enable HTML Source Mode in Pagelet Wizard

Next, open the “PT_RTE_CFG_PTPPB” in the Application Designer, and make sure the “Source” button is added in the RTE toolbar as the following:

CKEDITOR.config.toolbar =

[

['Source','-','Maximize','Preview','Print','-

','Cut','Copy','Paste','-','Undo','Redo','-','Find','Replace','-

','HorizontalRule','Table','imageUPLOAD','Link','Unlink','SpecialChar'

],

['Format','Font','FontSize','-

','Bold','Italic','Underline','Strike'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-

','NumberedList','BulletedList','Outdent','Indent','-

','TextColor','BGColor']

];

For developers who do not have Application Designer access to enable the RTE source editing mode, an alternative way is to use the pagelet header or footer display option – create a new pagelet header or footer definition and put all HTML in it; then create an empty HTML Pagelet Wizard pagelet and associate the pagelet header or footer with the pagelet. This is not an ideal solution, but gets the work done.

If this approach is used, be sure to move the pagelet header or footer definition with the pagelet definition using the following script. The normal export and import scripts will not cover the pagelet header or footer definitions.

EXPORT PS_PTPPB_HEADER WHERE PTPPB_HEADER_ID IN ('REPLACE_ME’);

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

EXPORT PS_PTPPB_HDR_LANG WHERE PTPPB_HEADER_ID IN ('REPLACE_ME’); EXPORT PS_PTPPB_FOOTER WHERE PTPPB_FOOTER_ID IN ('REPLACE_ME’); EXPORT PS_PTPPB_FTR_LANG WHERE PTPPB_FOOTER_ID IN ('REPLACE_ME’);

YouTube Video Pagelet

Use the following HTML code to show a YouTube video in a pagelet:

<iframe frameborder="0" height="349" src="http://www.youtube.com/embed/oOZ4eaRX4dA" width="425">no iframe support</iframe>

The pagelet preview looks like the following:

The pagelet preview looks like the following: Figure 38 – YouTube Video Pagelet Preview Flash Pagelet

Figure 38 – YouTube Video Pagelet Preview

Flash Pagelet

Use the following HTML code to show a flash clip in a pagelet:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="/ps/matrix.swf" type="application/x-shockwave- flash"></embed>

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

The pagelet preview looks like the following:

Portal The pagelet preview looks like the following: Figure 39 – Flash Pagelet Preview Note. It

Figure 39 – Flash Pagelet Preview

Note. It is assumed that the flash file (matrix.swf) resides in the “ps” folder in the web server root folder. If the file path in your environment is different, please update the HTML accordingly.

Navigation Collections

This chapter describes how to build task driven and intuitive navigation using the Navigation Collection framework.

This chapter includes the following topics:

Navigation collection overview

Customizing navigation collection styles

Creating navigation collection pagelets

For more details, please refer to the “Using Navigation Pages” chapter of PeopleTools PeopleBook: Portal Technologies.

Navigation Collection Overview

Navigation collections provide a user friendly navigation tool to access all pages needed to complete a business process from one single page or pagelet. The whole portal registry of each portal is a navigation collection on its own. Custom navigation collections can be created using the tools provided, and then can be published as navigation pages or pagelets accessible from homepages or the menu. Navigation collections can also be added to users’ My Links collection, when enabled by the creator.

The first step before creating a custom navigation collection is to determine all tasks required to complete a business process. They can be virtual tasks such as “brainstorm requirements”, as well as

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

physical tasks to be done on a transaction page. List them based on their sequence, and group them logically.

The next step is to create the navigation collection definition. For each group of tasks, create a user folder and then add child tasks to that folder. When a group of tasks are already listed in a menu folder, the menu folder can be added to the collection directly. For virtual tasks, create a user folder and use its label and description to describe the task. For physical tasks associated with a transaction page, add the corresponding menu link to the collection.

Once the navigation collection definition is created, it can then be published as a navigation page or pagelet so that end users can access it. Navigation pages can be added to any menu folder in the portal registry, while the navigation pagelets can be used on the portal homepage or WorkCenter pages. The Pagelet Wizard can also be used to create navigation collection based pagelets, which gives more control over the look and feel of the pagelet.

The navigation collection definition security can be set to use role and permission list-based security or public security. There is also an option to synchronize the collection definition security with the menu folders and items it contains by running the “Sync Collection Security” process.

TABLE [4]. FACTSHEET OF THE NAVIGATION COLLECTION FRAMEWORK

SKILL REQUIRED

Knowledge of navigation collections.

NAVIGATION

All navigation collection related menu items are in the “PeopleTools >> Portal >> Portal Utilities” folder.

APPLICATION DESIGNER ACCESS

Application Designer access is not required to create navigation collection definitions.

DATA MIGRATION

Navigation collection definitions can be moved using Application Designer projects, since the data are stored in the portal registry. Open the Structure and Content page, find the top folder of the navigation collection definition to be moved in the “Root >> Portal Objects >> Navigation Collections” folder, and then insert the portal registry folder and all its children into an Application Designer project.

Other than the navigation collection definition itself, custom icons and/or NAVFILTER application classes used by any folders or links in the navigation collection should be included in the project. When the navigation collection contains menu folder links, the target menu folder and all its children have to be manually inserted into the project, unless a full portal registry copy is done to import those.

UPGRADE IMPACT

Navigation collection definitions should not be affected by PeopleTools upgrade or application upgrade.

Customizing Navigation Collection Styles

In this section, we will discuss how to customize the navigation collection page style. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered navigation collection definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

The style of navigation collection pages can be specified in four different places – the system options, the registry options, the portal content registry properties, and the collection properties.

The system level options control the default behavior of all navigation pages and pagelets in the whole system. The navigation path to the system options component is “PeopleTools >> Portal >> Portal Utilities >> System Options”. Some settings, such as the page caching options and main menu collection, can only be set here. Others, such as the default folder and content icons and the style sheet for navigation pages and pagelets, can be overridden at lower levels. It is suggested to turn off the breadcrumbs on navigation pages when the new drop-down style menu is used. Otherwise, users will see two breadcrumbs on navigation pages when rendered within the default template.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 40 – Navigation Collection System Options Page The

Figure 40 – Navigation Collection System Options Page

The registry level options override the system level options for a particular portal, site, or workspace. The navigation path to the registry options component is “PeopleTools >> Portal >> Portal Utilities >> Registry Options”. It is generally not recommended to set registry level options.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 41 – Navigation Collection Registry Options Page At

Figure 41 – Navigation Collection Registry Options Page

At the portal content registry level, the “PTPP_IMAGE” content reference attribute can be used to specify custom icons for folder or content items. The attribute value is the image object name.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 42 – Custom Icon for Portal Registry Items

Figure 42 – Custom Icon for Portal Registry Items

The collection level options, when specified, always take the highest precedence. When a menu folder or item is added to a navigation collection, you can override the icon, the label, and the description as shown in the following screenshot.

and the description as shown in the following screenshot. Figure 43 – Navigation Collection Edit Folder

Figure 43 – Navigation Collection Edit Folder Properties Page

Creating Navigation Collection Pagelets

In this section, we will discuss how to create navigation collection pagelets for WorkCenter pages. All items described in this section are generally considered as configuration and should have no upgrade impact, unless delivered navigation collection pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

When you are publishing navigation collection definitions, there is an option to publish them as homepage pagelets in addition to normal navigation collection pages. Those pagelets would be rendered by the navigation collection framework, and there is not much control over the style and behavior of each pagelet.

A better option is to create navigation collection-based pagelets using the Pagelet Wizard. The navigation collection Pagelet Wwizard data source will transform the selected navigation collection data into XML, and custom XSL can be used to transform the data further to any style as illustrated in the previous chapter. Even with the default menu display format, there are many configurable options to be found at step five of the Pagelet Wizard.

options to be found at step five of the Pagelet Wizard. Figure 44 – Navigation Collection

Figure 44 – Navigation Collection Pagelet Wizard Pagelet Menu Display Options

Better yet, when a navigation collection Pagelet Wizard pagelet using the default menu display format is published as a template pagelet and used on WorkCenter pages, clicking a folder link in the pagelet will reload the pagelet and display the folder’s content inside the pagelet. At the top of the pagelet, the current folder’s label will be displayed. To go back to the parent folder, click the icon on the right side

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

of the current folder label. To go back to the top folder of the collection, click the pagelet action icon to reload the whole pagelet.

click the pagelet action icon to reload the whole pagelet. Figure 45 – Navigation Collection Template

Figure 45 – Navigation Collection Template Pagelet in a WorkCenter Page

PeopleSoft Application Integration

This chapter describes how to integrate with other PeopleSoft applications.

This chapter includes the following topics:

Configuring unified navigation

Consuming content provider pagelets

For more details, please refer to the PeopleSoft Applications Portal 9.1 Installation Guide, the PeopleSoft Applications Portal 9.1 PeopleBook: Portal and Site Administration, and the PeopleSoft Applications Portal 9.1 PeopleBook: Collaborative Workspaces.

Configuring Unified Navigation

In this section, we will briefly discuss how to configure unified navigation to federate PeopleSoft applications into a unified system. All items described in this section are generally considered as configuration and should have no upgrade impact.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Overview

A typical use of the PeopleSoft Applications Portal is as the gateway to other PeopleSoft content

provider applications such as HRMS and FSCM. Traditionally, portal packs, which are snapshots of the content provider database’s portal registry, are used to integrate the content provider menus with the menu of the PeopleSoft Applications Portal. It is a lengthy process to generate a portal pack, and since it’s a snapshot, keeping the structure and security in sync becomes an ongoing task.

In PeopleSoft Applications Portal 9.1 Feature Pack 1, a unified navigation feature was introduced.

Unified navigation enables users to access content references from content provider databases directly

through the main drop-down menu in the PeopleSoft Applications Portal system, as long as the content provider systems are running on PeopleTools 8.52 or later. There is no longer the need to import the portal packs nor to sync the portal registry changes.

With the unified navigation feature, administrators create folders in the PeopleSoft Applications Portal system, and point them to the remote root folder or any remote menu folder in the content provider databases. At runtime, when those remote folders and their sub-folders are accessed through the drop- down menu in the PeopleSoft Applications Portal system, the client side menu code retrieves the folder contents from the corresponding content provider system directly, and then displays the folder

to the user. When a content reference in one of those remote folders is selected, the request is sent

back to the PeopleSoft Applications Portal system. The PeopleSoft Applications Portal system also retrieves the content reference template information from the corresponding content provider system. Then, PeopleSoft Applications Portal sends its portal header, its menu, and the template on to the browser. The actual target content page is still rendered by the corresponding content provider system.

For more details, please refer to the “Administering Unified Navigation in PeopleSoft Applications Portal” chapter of Applications Portal 9.1 PeopleBook: Portal and Site Administration.

TABLE [5]. FACTSHEET OF THE UNIFIED NAVIGATION

SKILL REQUIRED

Basic knowledge of the PeopleSoft Pure Internet Architecture.

Basic knowledge of the Integration Broker framework.

NAVIGATION

The “Unified Navigation WorkCenter” page is located in the “Portal Administration” folder.

APPLICATION DESIGNER ACCESS

Application Designer access is not required to use this feature.

DATA MIGRATION

N/A

UPGRADE IMPACT

The unified navigation configuration data should not be affected by PeopleTools upgrade or application upgrade. Even in the case when the portal or content provider web server or application server is moved to a new location, it only requires to reconfigure the corresponding URLs in the node properties and integration gateway properties.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Prerequisites

The following prerequisite tasks have to be completed prior to configuring remote folders and then using the unified navigation feature:

All systems have to be on PeopleTools 8.52.02 or later, and the PeopleSoft Applications Portal has to be release 9.1 with Feature Pack 1 or later.

Integration Broker gateway is configured in all systems.

Integration Broker node network is configured in the PeopleSoft Applications Portal system.

Default local nodes and portal host nodes are configured in all systems.

Single signon is configured between all systems.

User definitions in all systems are synced. All users imported into the PeopleSoft Applications Portal system need to have at least the PAPP_USER role assigned in order to use basic portal features.

Configure Remote Folders

The Unified Navigation WorkCenter page provides links to all pages to complete the unified navigation configuration. The navigation path to the WorkCenter page is “Portal Administration >> Unified Navigation WorkCenter”.

To configure remote folders, go to the WorkCenter page, expand the “Unified Navigation Setup” folder in the “Unified Navigation” pagelet on the left side, and then click the “Configure Drop Down Menu” link to open the page. To create a new remote folder, select the node name, the folder label, the remote folder ID, and the parent folder in the portal system to put the remote folder. In the following example, five remote folders have been created in the portal root menu pointing to the root menus of the corresponding content provider systems.

Note. Remote folders must reside on “in-network” nodes of the Integration Broker node network configured in the portal system. Furthermore, it is recommended to always create remote folders using the portal host nodes of the corresponding content provider system.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 46 – Configure Drop Down Menu Page Here

Figure 46 – Configure Drop Down Menu Page

Here is an example of a remote folder in the portal’s drop-down menu.

example of a remote folder in the portal’s drop-down menu. Figure 47 –Remote Folder Menu under

Figure 47 –Remote Folder Menu under Unified Navigation

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Consuming Content Provider Pagelets

In this section, we will discuss how to consume content provider pagelets. All items described in this section are generally considered as configuration and should have no upgrade impact.

Overview

Traditionally, Application Designer projects are used to copy content provider pagelet content reference definitions to the PeopleSoft Applications Portal database, so that those pagelets can be added to the homepage of portals, sites, and workspaces, as well as to be used on WorkCenter pages and in related content and related actions. In the PeopleSoft Applications Portal 9.1, a feature was added for consuming pagelets. This feature allows administrators and subject matter experts to complete this task, as long as the content provider systems are running on PeopleTools 8.50 or later.

To consume pagelets, administrators need to define the source applications first, which are the content provider systems that house the pagelet definitions. Then, subject matter experts can select the pagelet definitions from the source applications and add them to the current portal, site, or workspace one by one. Only the pagelet content reference definition and all its attributes are copied over, which include the pagelet security as well, as long as the role or permission list definitions can be found in the portal system. Other related object definitions such as the pagelet component, the pagelet icon, and the pagelet layout HTML object will not be copied over.

For more details, please refer to the “Administering Unified Navigation in PeopleSoft Applications Portal” chapter of PeopleSoft Applications Portal 9.1 PeopleBook: Portal and Site Administration, and the “Administering Collaborative Workspaces” chapter of PeopleSoft Applications Portal 9.1 PeopleBook:

Collaborative Workspaces.

TABLE [6]. FACTSHEET OF THE COMTENT PROVIDER PAGELET CONSUMPTION

SKILL REQUIRED

Basic knowledge of the PeopleSoft Pure Internet Architecture.

Basic knowledge of the Integration Broker framework.

NAVIGATION

The “Consume Pagelets” page is located in the “Portal Administration >> Pagelets” folder.

The “Add Pagelet” page can be accessed from either the “Consume Pagelets” page or from the “Modules” tab of the workspace “Administration” page.

APPLICATION DESIGNER ACCESS

Application Designer access is not required to use this feature.

DATA MIGRATION

N/A

UPGRADE IMPACT

The imported pagelet portal content references should not be affected by PeopleTools upgrade or application upgrade.

Prerequisites

The following prerequisite tasks have to be completed to use the consume pagelets feature:

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

All systems have to be on PeopleTools 8.50 or later, and the PeopleSoft Applications Portal has to be release 9.1 or later.

Integration Broker gateway is configured in all systems.

Default local nodes and portal host nodes are configured in all systems.

Single signon is configured between all systems.

User, role, and permission list definitions in all systems are synchronized.

Define Source Applications

The source applications (content provider systems) can be defined on the “Define Source Applications” page. The navigation path to the page is “Portal Administration >> Pagelets >> Consume Pagelets”.

To add a new source application, enter the ID and label, and select the content provider node and site name from the drop-down list box. The content provider node drop-down list box will show PIA nodes that have their content URL configured. Four default source applications are configured by default, which can be used to copy pagelet definitions from the four delivered portals to custom sites or workspaces.

the four delivered portals to custom sites or workspaces. Figure 48 – Define Source Applications Page

Figure 48 – Define Source Applications Page

Copy Pagelets

The “Add Pagelet” page is used to copy pagelet definitions. The page can be accessed in two ways:

Click the “Add pagelet” button on the “Define Source Applications” page;

Click the “Add Related Pagelets” button on the “Modules” tab of the workspace “Administration” component.

Select the source application, the pagelet folder, and the pagelet name from the drop-down list boxes and the pagelet information will be displayed. Click the “Preview Pagelet” link to preview the pagelet content; modify the pagelet information as needed; and then click the “Save” button to save the

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

pagelet content reference definition into the local portal registry of the current portal, site, or workspace.

portal registry of the current portal, site, or workspace. Figure 49 – Define Source Applications Page

Figure 49 – Define Source Applications Page

Collaboration

This chapter describes how to use collaboration features of the PeopleSoft Applications Portal.

This chapter includes the following topics:

Collaboration overview

Using collaborative workspaces

Viewing managed content in the content WorkCenter page

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

For more details, please refer to PeopleSoft Applications Portal 9.1 PeopleBook: Collaborative Workspaces, PeopleSoft Applications Portal 9.1 PeopleBook: Content Management System, and the “Deploying Enterprise Portal 9.1 as a Collaboration Server” red paper.

Collaboration Overview

Collaborative practices are now central to the way we work, deliver services, and produce innovations. Collaboration generally refers to individuals or organizations working together to address problems and deliver outcomes that are not easily or effectively achieved by working alone. Collaborative relationships are attractive to organizations because the synergies realized by combining effort and expertise produce benefits greater than those achieved through individual effort.

Why Collaboration?

Collaboration enables us to:

Reduce duplication and overlap.

Access available resources.

Increase efficiency and effectiveness.

Resolve complex problems and complete projects.

Share knowledge, ideas and information.

Examples of Collaboration

A few examples of collaboration include:

Enabling salespeople to get on-time and high quality answers from marketing in order to complete RFPs more efficiently and close more sales.

Enabling support engineers to get just-in-time information from engineering in order to speed resolution of support incidents and cut support costs.

Preparing a course curriculum through team collaboration.

Using Collaborative Workspaces

The PeopleSoft Applications Portal collaborative workspaces are virtual team areas that can be used for collaboration on a short-term problem or an ongoing project. Workspaces provide various tools to enable this collaboration.

Discussions – The Discussion module can be used to facilitate discussions.

Documents – Used to maintain documents pertaining to the project or workspace. Documents can be linked from the content management system, file references, or HTML/text type. The Documents module can also be used when multiple people are working on the same set of

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

documents. For example, a team works on designing the course curriculum at a university. They can share and work on their documents using the workspace Documents module.

Calendar – Events and meetings can be created using the Calendar

The Calendar pagelet in

the workspace can also be configured to show the user action items and tasks.

Action Items – This module can be used to track tasks and assign them to different members of the workspace. Action items have a start date, end date, and status among other fields to help track them.

Blogs – Workspace members can also share articles of interest using the Blogs module.

Wiki – The wiki workspace can be used when a single piece of content is the main focus of the collaboration.

Polls – Surveys can be conducted using the Polls module.

Related Data – Relevant data in the form of pagelets can be added to the “Related Data” tab.

In addition, the Related Links related content service can be used to link workspaces to a PeopleSoft transaction. For example, the FSCM Vendor transaction page can be associated with a workspace, where the members can share and discuss information pertaining to a specific vendor.

Creating Collaborative Workspaces

The steps to create a workspace are:

Step 1. Click the “Browse Workspaces” link in the main menu.

Step 2. Click the “Create Workspace” button.

Step 3. In the wizard, select a template such as the “Base Workspace Template Wiki” as the template and enter the workspace name and description.

Step 4. Add the manager role as a contributor to the workspace. This allows the managers to add or delete content, documents, and so on in the workspace.

Step 5. Click the “Finish” button to complete the creation of the workspace.

Here is the sample Performance Management workspace.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

User Experien ce in PeopleSoft Applications Portal Figure 50 – Performance Management Workspace Customizing

Figure 50 – Performance Management Workspace

Customizing Collaborative Workspaces

Administrators can modify the content and layout of workspace homepages using drag-and-drop or the Content and Layout page accessible from the workspace homepage. They can also turn on or off a module on the “Modules” tab of the workspace “Administration” component. Once a module is turned off, the corresponding pagelet and menu link will be removed from the workspace homepage.

Workspace administrators can customize the workspace header and footer using the PeopleSoft Applications Portal branding framework. For more details, please refer to the “Branding” chapter previously.

Viewing Managed Content in the Content WorkCenter Page

With PeopleSoft Applications Portal Feature Pack 1, users can view managed content in a WorkCenter page. This gives them the ability to view information relevant to a piece of content at a glance, and give them the complete picture. This feature requires PeopleTools 8.52 or later, and can be enabled or disabled through the Applications Portal Installation Options page.

Out of the box, the following pagelets are configured for the View Content WorkCenter page. Administrators can add any pagelets to the WorkCenter page through the related content framework or the WorkCenter framework.

Content navigation pagelet – This pagelet is available in the left frame of the WorkCenter page. Users can navigate to other pieces of content by traversing the folders available to them. The selected piece of content will be displayed in the target content area of the WorkCenter page.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Security will be applied on the navigation pagelet, which means users will only be able to see folders or content to which they have access.

Content Rating pagelet – This pagelet is available as a related content pagelet to be displayed in the related content area on the right of the WorkCenter page. The pagelet allows association of a poll with content. This allows the author of the content to associate a relevant poll to the content as a mechanism of getting feedback.

Content Usage pagelet – This pagelet is also available as a related content pagelet to be displayed in the related content area of the WorkCenter page. The content usage information is made available in this pagelet.

usage information is made available in this pagelet. Figure 51 – View Content WorkCenter Page Appendix

Figure 51 – View Content WorkCenter Page

Appendix A – Code Examples

This appendix presents the following code examples:

Sample header layout object

Sample homepage layout object

Sample WorkCenter layout object

Accordion style menu pagelet XSL

Slide show pagelet XSL

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Sample Header Layout Object

Here is the complete HTML of the DEMO_HEADER_LAYOUT sample header layout object.

<html dir="%Direction" lang="%LanguageISO"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- meta http-equiv="X-UA-Compatible" content="IE=8" --> <!-- bind21 - document.domain -->

%bind(:21)

<!-- bind22 - Save Warning --> <script language="javascript" src="%bind(:22)"></script> <!-- bind23 - Save Warning Cross Domain --> <script language="javascript" src="%bind(:23)"></script> <!-- bind24 - Expire Meta -->

%bind(:24)

<!-- bind25 - Homepage JS -->

%bind(:25)

<!-- bind26 - MCF JS -->

%bind(:26)

<!-- bind27 - Add to My Links form and JS -->

%bind(:27)

<!-- bind16 --> <link rel="stylesheet" href="%bind(:16)" type="text/css" /> <!-- bind17 --> <link rel="stylesheet" href="%bind(:17)" type="text/css" /> <!-- bind64 - RTL stylesheet -->

%bind(:64)

<!-- bind61 - CSS override -->

%bind(:61)

<!-- bind52 - custom scripts -->

%bind(:52)

<!-- End bind52 --> </head> <body> <div id="header-top-line"> <!-- bind6 - header bar one --> <div id="header-links">%bind(:6)</div> <!-- bind62 - hover menu --> <div id="header-hover-menu">%bind(:62)</div> </div> <div id="header-main"> <!-- bind2 - search --> <div id="header-search-area"><div id="header-search-area-

inner">%bind(:2)</div></div>

<!-- bind31 - logo --> <div id="header-logo-area">%bind(:31)</div> <!-- bind1 - My Links Drop Down --> <div id="header-my-links"><div id="header-my-links-

inner">%bind(:1)</div></div>

<!-- bind51 - homepage tabs --> <div id="header-tabs">%bind(:51)</div> <!-- bind53 - Dashboard Title --> <div id="header-dashboard-title">%bind(:53)</div> <!-- homepage personalization links -->

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

<div id="header-personalization"><div id="header-personalization-

inner">%bind(:4)</div></div>

</div> <!-- bind28 - ? -->

%bind(:28)

<!-- bind29 - ? -->

%bind(:29)

<!-- bind30 - Add to Fav HTML -->

%bind(:30)

<!-- bind63 - add fav URL structure -->

%bind(:63)

</body>

</html>

Sample Homepage Layout Object

Here is the complete HTML of the DEMO_HP_3COL_LAYOUT sample three-column homepage layout object.

<div id="DEMO_HOMEPAGE_TAB" class="DEMO_HOMEPAGE_TAB"> <style> #hp_slideshow { border:1px solid #D0D0D0;

}

</style> <table id="ptpglts" width="100%" cellspacing="4" cellpadding="0"> <tr> <td width="25%"valign="top" rowspan="2"> <ul id="ptcol1" class="ptpgltdroppable">

%bind(:1)

<li id="ptcol1addpglt" class="ptaddpglt">&nbsp;</li> </ul> </td> <td style="width:2px;"></td> <td colspan="3" style="padding:4px 0px 0px 0px;"> <div id="hp_slideshow"> <pagelet Name="NavList" Load="A"> <Source Node="LOCAL_NODE"

href="s/WEBLIB_PTPPB.ISCRIPT1.FieldFormula.IScript_PageletBuilder?PTPP

B_PAGELET_ID=DEMO_SLIDESHOW" /> </pagelet> </div> </td> </tr> <tr> <td style="width:2px;"></td> <td valign="top"> <ul id="ptcol2" class="ptpgltdroppable">

%bind(:2)

<li id="ptcol2addpglt" class="ptaddpglt">&nbsp;</li> </ul> </td> <td style="width:2px;"></td>

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

<td width="25%" valign="top"> <ul id="ptcol3" class="ptpgltdroppable">

%bind(:3)

<li id="ptcol3addpglt" class="ptaddpglt">&nbsp;</li> </ul> </td> </tr> </table> </div>

Sample WorkCenter Layout Object

Here is the complete HTML of the PTAL_LAYOUT_DEFAULT sample WorkCenter layout object.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html dir="%Direction" lang="%LanguageISO"> <!% Default Layout Object of App Landing Template ======================================== Definition of the bind variables:

1. CharSet

2. Header CSS and JS Includes

3. Uni-header Structure

4. Dropdown Nav Menu Structure

5. Target Content Structure

6. Related Content Structure

7. Modal Popup Structure

8. Pagelet Area Anchor

9. Pagelet Area Container

10. Page Initializing Includes --> <head> <meta http-equiv="content-type" content="text/html;

charset=%bind(:1)">

<meta http-equiv="X-UA-Compatible" content="IE=8"> <title></title>

%bind(:2)

</head> <body class="PSPAGE" id="ptifrmtemplate"> <!% Uni-Header -->

%bind(:3)

<!% Dropdown Nav Menu -->

%bind(:4)

<div id="ptifrmcontent"> <!% Target Content Area -->

%bind(:5)

<!% Related Content Area -->

%bind(:6)

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

<!% Pagelet Area Anchor -->

%bind(:8)

<!% Pagelet Area Container -->

%bind(:9)

</div>

<!% Modal Popup -->

%bind(:7)

<!% Page Initializing Scripts -->

%bind(:10)

<!% Page Mask --> <div id="ptalPageMask" class="ptalPageMask">&nbsp;</div> </body> </html>

Accordion Style Menu Pagelet XSL

Here is the complete XSL of the accordion style menu pagelet.

<?xml version="1.0"?> <xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <xsl:variable name="uid" select="generate-id(.)"/> <xsl:variable name="selector" select="concat('accordion-', $uid)"/> <html dir='ltr' lang="en"> <head> <link rel="stylesheet" href="/ps/ jquery-ui.custom.css" type="text/css" media="all" /> <style type="text/css">

#demo_myHrLinks { background-color: #d0d0d0; border: 1px solid #d0d0d0;

}

#demo_myHrLinks h3 { margin: 0px; padding: 0px; width: 100%; height: 32px; cursor: pointer;

}

#demo_myHrLinks h3.ui-state-default { margin-bottom: 1px; background: url(/ps/Arrow_Down.png) no-repeat scroll 98% center #6d98c2;

}

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

#demo_myHrLinks h3.ui-state-active {

background: url(/ps/Arrow_Up.png) no-repeat scroll 98% center #e3eef6;

}

#demo_myHrLinks h3 a { background: none no-repeat scroll 5px center transparent; font-size: 12px !important; font-weight: bold; padding: 9px 10px 9px 35px;

}

#demo_myHrLinks h3.ui-state-default a { color: #FFFFFF !important;

}

#demo_myHrLinks h3.ui-state-active a { color: #336699 !important;

}

#demo_myHrLinks h3 a img { border: 0px none; margin: 0px 4px 0px 0px; vertical-align: middle; display: none;

}

#demo_myHrLinks div {

padding:0px;

border: 0px none;

}

#demo_myHrLinks div a { display: block; background: url(/ps/bullets.gif) no-repeat scroll 22px center transparent; padding:4px 10px 4px 35px; border-top: 1px solid #d0d0d0;

}

#demo_myHrLinks div.ui-accordion-content-active a:hover { background-color: #ffffff;

}

#demo_myHrLinks div a img { border: 0px none; margin: 0px 4px 0px 0px; vertical-align: middle; display: none;

}

/* begin jquery ui override */ #demo_myHrLinks .ui-corner-all,

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

#demo_myHrLinks .ui-corner-bottom, #demo_myHrLinks .ui-corner-top { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;

}

#demo_myHrLinks .ui-state-default, #demo_myHrLinks .ui-state-active { border: 0px none;

}

#demo_myHrLinks .ui-icon { background-image: none;

}

/* end jquery ui override */

</style> <script src="/ps/jquery.min.js" type="text/javascript"></script> <script src="/ps/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#demo_myHrLinks").accordion({ autoHeight: false, active: false, collapsible: true }); }); </script> </head> <body> <div id="demo_myHrLinks"> <xsl:apply-templates/> </div> </body> </html> </xsl:template>

<xsl:template match="NavItem[@Type='Folder']"> <xsl:variable name="imgSrc"> <xsl:choose> <xsl:when test="string-length(@ImageURL) &gt; 0"> <xsl:value-of select="@ImageURL"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="/NavCollection/dfltSmallFolderIcon"/> </xsl:otherwise> </xsl:choose> </xsl:variable>

<h3>

<a class="PSHYPERLINKNOUL" style="background- image:url('{@ImageURL}')" href="#" title=""> <img src="{$imgSrc}" /> <xsl:value-of select="@Label"/> </a>

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

</h3>

<div>

<xsl:apply-templates/>

</div>

</xsl:template>

<xsl:template match="NavItem[@Type='Shortcut']" priority="1">

<h3>

<a class="PSHYPERLINKNOUL" href="#" title=""> <img src="{@ImageURL}" /> <xsl:value-of select="@Label"/> </a>

</h3>

<div> <a class="PSHYPERLINKNOUL" href="{@AbsolutePortalURL}" title="{@Description}"> <img src="{/NavCollection/dfltSmallLinkImg}" /> <xsl:value-of select="@Label"/> </a> </div> </xsl:template>

<xsl:template match="NavItem[@Type='Folder']/NavItem[@Type='Shortcut']"

priority="2">

<xsl:variable name="imgSrc"> <xsl:choose> <xsl:when test="string-length(@ImageURL) &gt; 0"> <xsl:value-of select="@ImageURL"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="/NavCollection/dfltSmallLinkImg"/> </xsl:otherwise> </xsl:choose> </xsl:variable> <a class="PSHYPERLINKNOUL" href="{@AbsolutePortalURL}" title="{@Description}"> <img src="{$imgSrc}" /> <xsl:value-of select="@Label"/> </a> </xsl:template>

<!-- identity transform templates --> <xsl:template match="*"> <xsl:apply-templates/> </xsl:template>

<!-- delete unmatched text --> <xsl:template match="@*|text()|comment()|processing-instruction()"> </xsl:template>

</xsl:stylesheet>

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Slide Show Pagelet XSL

Here is the complete XSL of the slide show pagelet.

<?xml version="1.0"?> <xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/news-publication-result"> <html dir='ltr' lang="en"> <head> <style type="text/css"> .slideshow img { border: none;

}

.slideshow a { display: none;

}

.slideshow a:first-child {

display: block;

}

</style> <script src="/ps/jquery.min.js" type="text/javascript"></script> <script src="/ps/jquery.cycle.all.js" type="text/javascript"></script> <script type="text/javascript"> (function($) { // closure to hold pointer for event handlers, so it fires on correct slideshow var slideShowQuery = "#newspub_<xsl:value-of select="@id"/>.slideshow";

$(document).ready(function(){ $(slideShowQuery).cycle({ timeout: 7000, after: function(currSlideElement, nextSlideElement, options, forwardFlag) { var $img = $("img", this); if($img.length === 0) { // img is this $img = $(this);

}

$(slideShowQuery)

.width($img.width())

.height($img.height());

}

})

.hover( function() { $(slideShowQuery).cycle('pause');

},

function() { $(slideShowQuery).cycle('resume') }

)

.find("a").show();

});

})(jQuery);

</script>

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

</head> <body> <div id="newspub_{@id}" class="slideshow"> <xsl:apply-templates/> </div> </body> </html> </xsl:template>

<xsl:template match="news-publication-top-story/item/image"> <a href="{link}" class="thickbox" title="{title}"><img src="{url}" /></a> </xsl:template>

<!-- identity transform templates --> <xsl:template match="*"> <xsl:apply-templates/> </xsl:template>

<!-- delete unmatched text --> <xsl:template match="@*|text()|comment()|processing-instruction()"> </xsl:template>

</xsl:stylesheet>

Validation and Feedback

This section documents the real-world validation that this red paper has received.

Customer Validation

Oracle is working with PeopleSoft customers to get feedback and validation on this document. Lessons that are learned from these customer experiences will be posted here.

Field Validation

Oracle Consulting Services has provided feedback and validation on this document. Additional lessons that are learned from field experience will be posted here.

Authors

The PeopleSoft Applications Portal development team

Configuring a Contemporary User Experience in PeopleSoft Applications Portal

Revision History

TABLE [7]. REVISION HISTORY

DATE

CHANGE

January 2012

Posted initial version.

Configuring a Contemporary User Experience in PeopleSoft Applications Portal January 2012 Author: The PeopleSoft

Configuring a Contemporary User Experience in PeopleSoft Applications Portal January 2012 Author: The PeopleSoft Applications Portal Development Team

Oracle Corporation World Headquarters 500 Oracle Parkway Redwood Shores, CA 94065 U.S.A.

Worldwide Inquiries:

Phone: +1.650.506.7000

Fax: +1.650.506.7200

oracle.com

Phone: +1.650.506.7000 Fax: +1.650.506.7200 oracle.com Copyright © 2011, Oracle and/or its affiliates. All rights

Copyright © 2011, Oracle and/or its affiliates. All rights reserved. This document is provided for information purposes only and the contents hereof are subject to change without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. We specifically disclaim any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. This document may not be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without our prior written permission.

Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. UNIX is a registered trademark licensed through X/Open Company, Ltd. 1010

trademarks of SPARC International, Inc. UNIX is a registered trademark licensed through X/Open Company, Ltd. 1010

Оценить