Você está na página 1de 88

An Oracle Red Paper June 2013

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 Configuring an Item of Managed Content as WorkCenter Starting Page ................................................................................ 23 Configuring WorkCenter Dashboards in an Activity Guide............ 25 Customizing the Workspace Branding Theme .............................. 29 Using the PeopleTools 8.53 Branding Feature ............................. 32 Opening Links in Modal Windows from Homepage Pagelets ....... 35 Overriding the Default Homepage Tab to Any URL ...................... 36 Overriding the Default Login/Expiration Page with Public Access Turned On ........................................................................ 38 Pagelet Wizard Pagelets ................................................................... 38 Pagelet Wizard Overview .............................................................. 39 Creating Navigation Collection Based Accordion Style Pagelets ........................................................................................ 40 Creating News Publication-Based Slide Show Pagelets ............... 42 Creating HTML Pagelets with Rich Content .................................. 44 Navigation Collections ....................................................................... 47 Navigation Collection Overview .................................................... 47

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Customizing Navigation Collection Styles ..................................... 48 Configuring Custom Homepage Tabs ........................................... 53 Creating Navigation Collection Pagelets ....................................... 56 PeopleSoft Application Integration .................................................... 58 Configuring Unified Navigation ...................................................... 58 Consuming Content Provider Pagelets ......................................... 62 Configuring Remote Pagelet Search ............................................. 65 Collaboration ..................................................................................... 68 Collaboration Overview ................................................................. 69 Using Collaborative Workspaces .................................................. 69 Viewing Managed Content in the Content WorkCenter Page ....... 71 Appendix A: Code Examples ............................................................ 72 Sample Header Layout Object ...................................................... 73 Sample Homepage Layout Object ................................................ 74 Sample WorkCenter Layout Object ............................................... 75 Accordion Style Menu Pagelet XSL .............................................. 76 Slide Show Pagelet XSL ............................................................... 80 Sample Application Class for a Related Content Service to Open a WorkCenter Dashboard .................................................... 81 Sample iScript Function to Redirect at Login ................................ 82 Validation and Feedback ................................................................... 83 Customer Validation ...................................................................... 83 Field Validation .............................................................................. 83 Authors .............................................................................................. 84 Revision History ................................................................................ 84

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 Interaction Hub, 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 a PeopleSoft Interaction Hub 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 Interaction Hub

Structure of This Red Paper


This red paper provides guidance for how to configure a contemporary user experience using PeopleSoft Interaction Hub. 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 Interaction Hub 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 be incorporated into subsequent versions of the PeopleBooks eventually. The following guides discuss many of the fundamental concepts that are related to the PeopleSoft Pure Internet Architecture: PeopleTools: Getting Started with PeopleTools

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

PeopleTools: System and Server Administration PeopleTools: PeopleSoft Application Designer Developers Guide PeopleTools: PeopleSoft Integration Broker PeopleTools: PeopleSoft Integration Broker Administration PeopleTools: PeopleCode API Reference PeopleTools: PeopleCode Language Reference PeopleTools installation for your database platform Additionally, you should be familiar with the documentation that is delivered with Oracle Tuxedo, Jolt, and WebLogic.

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Overview
Many customers use PeopleSoft Interaction Hub 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 Interaction Hub features. This section includes the following topics:

Who should read this paper? Before you begin Common terms

Who Should Read This Paper?


For PeopleSoft Interaction Hub, 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 Interaction Hub product and your organizations business requirements. This guide assumes at least that level of knowledge and describes how to configure the PeopleSoft Interaction Hub.

Before You Begin


Before you begin, you must install the PeopleSoft Interaction Hub 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 Interaction Hub 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

PeopleSoft Interaction Hub

PeopleSoft Interaction Hub (formerly known as PeopleSoft Applications Portal or 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 Interaction Hub 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 Interaction Hub

Branding
Branding is one of the core features of the PeopleSoft Interaction Hub. 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 Interaction Hub database to meet the portal needs of the enterprise. This section 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 about the various branding features, please refer to the following PeopleBook sections:

Understanding Branding Theme Development and Deployment section of PeopleSoft Interaction Hub 9.1: Branding. Using Predefined Homepage HTML Objects section in the Modifying Portal Interface section of PeopleTools: Portal Technology. Describing Branding Considerations section in the Building Pagelets section of PeopleTools: Portal Technology. Using Pagelet Wizard section of PeopleTools: Portal Technology.

Branding Overview
The PeopleSoft Interaction Hub 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 Interaction Hub

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

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 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 the PeopleSoft Interaction Hubs Site Manager. Additionally, using the site manager wizard, administrators can 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 about 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 store 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 is not supported because of concerns about security and system integrity.

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

TABLE 2. FACT SHEET FOR THE BRANDING FRAMEWORK

SKILL REQUIRED

Knowledge of the PeopleSoft Interaction Hub 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 Interaction Hub 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 these two script files is 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, features, or both 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 is always a good practice to verify the branding themes after an upgrade. After an upgrade is also the perfect time to make changes to use the enhancements in the latest PeopleTools or PeopleSoft Interaction Hub release.

Creating a Portal Header Definition


This section discusses how to create a portal header definition. All items described in this section are generally considered as configuration and should have no upgrade effect 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 Interaction Hub

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

Figure 2. 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_HTMLHDR8_PT_TANGERINE layout object or create a new one from it. The content of that HTML object can be retrieved without Application Designer access: open the PAPPBR_HTMLHDR8_PT_TANGERINE 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. The two types of layout objects are header and footer. Each type of layout object has a different list of system elements. In the grid, select the elements to be used in the layout object by selecting the Select check box. Select the Required Element check box 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. These are systemreserved 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 this page, specify a name of the object, and then copy and paste the HTML text into the field. 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.

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 3. 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 drop-down 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. Three search-related branding system elements exist: the Search Options %2 element for traditional portal search objects, the Scope Search Options %2 element for PeopleSoft Interaction Hub scoped search objects, and the Global Search Option %2 element for PeopleSoft Search Framework global search objects (known as Application Search), which is new in PeopleTools 8.52. All three branding system elements use the same bind variable, so the same layout object can be used for different search options, and users can switch among them seamlessly.

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 site owners can override in portal sites. The navigation path to the header definitions component is Portal Administration > Branding > Define Headers.

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

Figure 5. 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 you can 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 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 drop-down list box and then type in the URL. It is not recommended to use external

10

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

images in branding definitions though because there is no guarantee that the images will always be available, and extra maintenance efforts are required when the images are moved or lost.

Figure 6. 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.

11

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 7. 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 14 system links such as the Sign Out link, plain text, HTML text, system data such as %date and so on, or a welcome message. For link items, an image can be specified to be used as an icon in front of 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 directly into the field provided.

Figure 8. 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 the HTML text directly into the field provided, or to run an application class method to generate the text at runtime.

12

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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.

Figure 9. 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, the three options to choose from are Search Options, which is the traditional portal search; Scope Search Options, which is the PeopleSoft Interaction Hub scoped search; and Global Search Option, which is the 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 that you can switch among the different search options 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.

13

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 10. Homepage Tabs 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 is not specified, a warning message will appear for each missing image reference when the header definition is saved. The warning messages can be safely ignored when the image is not required for rendering the homepage tabs.

Figure 11. Search page

14

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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


This section discusses how to alter the homepage tab layout. All items described in this section are generally considered as configuration and should have no upgrade effect 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 attribute fields of the portal registry content reference, 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 check box is deselected.

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 Appendix A. The layout object uses the <Pagelet> metatag to load a banner pagelet and to show it on at the top of the middle and right columns. The homepage tab using that layout object looks as follows:

15

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 13. Homepage tab with banner pagelet

Customizing Pagelet Layout and Behavior


This section discusses how to alter the pagelet layout and behavior. All items described in this section are generally considered as configuration and should have no upgrade effect 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 the reference attributes of the pagelet portal registry content 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 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 check box is deselected.

Figure 14. Content reference attribute for homepage pagelet layout

The Pagelet Wizard framework delivers three pagelet layout objects:

16

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 6 page of the wizard. For other special requirements, a content reference attribute has to be added manually to the pagelet content reference definition.
Pagelet Deferred Loading

In PeopleTools 8.51 and later, 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 content 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 check box is deselected.

Figure 15. Content reference attribute for disabling pagelet deferred loading

Banner Pagelets

A banner pagelet is a pagelet that displays across 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 appear 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 such 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 check box is deselected.

17

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

When a banner pagelet is added to a homepage tab, the pagelet type should be set to required pagelet and fix-positioned (Req-Fix). Banner pagelets cannot be dragged and dropped at different columns in the homepage.

Figure 16. Content reference attribute for banner pagelet

Here is an example of a banner pagelet on the Talent Summary dashboard:

Figure 17. Example of a banner pagelet

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. 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 check box is deselected.

18

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 18. Content reference attribute for a pagelet icon

Here is an example of a pagelet icon:

Figure 19. Example of a pagelet icon

Pagelet Help

When pagelet help is configured for a pagelet, a question mark icon will appear in the pagelet header area. Clicking this 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 reference definition of the pagelet portal registry content. 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 1 of the wizard. Otherwise, a content reference attribute has to be added manually 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 value field, enter the link to the help document. The Label field is optional. When a label is not specified, make sure the Translate check box is deselected.

19

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 20. Content reference attribute for a pagelet help link

Pagelet Auto Refresh

In PeopleTools 8.50, a new attribute was added to support refreshing homepage pagelets at specified intervals. This attribute 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.

Figure 21. Content reference attribute for pagelet refresh time

Customizing the WorkCenter Layout


This section discusses how to alter the WorkCenter page layout. All items described in this section are generally considered as configuration and should have no upgrade effect 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 of 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.

20

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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. 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, an option is available 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 feature 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, you must synchronize your changes with the default template after the upgrade.

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 method can be used for simple tasks such as using a different style sheet for the top page, hiding certain elements, or showing 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.

21

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 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 check box is deselected.

Figure 23. Content reference attribute for WorkCenter pagelet layout

Pagelets in an iFrame

In some cases, you must 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 check box is deselected.

Figure 24. Content reference attribute for showing WorkCenter pagelets in an iFrame

Pagelet Conditional Display

In some cases, you must 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 run. The associated application class must extend the base class: PTAL_PAGE:UTILITY:PageletWrapper. The Label fields of both attributes are optional. When a label is not specified, make sure the Translate check box is deselected.

22

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 25. Content reference attributes for conditionally displaying WorkCenter pagelets

Configuring an Item of Managed Content as WorkCenter Starting Page


This section discusses how to use managed content as a WorkCenter starting page. You will create a new content reference for the item of managed content and then use that new content reference as the WorkCenter starting page.
1. 2. 3. 4. 5.

Navigate to Portal Administration > Navigation > Manage Navigation. Select a folder, such as My Content, in the content reference tree. Now you can see the Add Link button in the Folder Detail group box. Click the Add Link button and enter the link label in the Label field. Choose Managed Content as the link type. The Select Content button is displayed.

6.

Click the button, select the item of managed content, and save the link by clicking the Save button.

23

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 26. Manage Navigation page Create a new content reference for an item of managed content 7. 8.

Navigate to PeopleTools > Portal > WorkCenter > Manage WorkCenter pages. Create a new WorkCenter page and use the newly created content reference for the item of managed content as the starting page.

For more details on how to create a WorkCenter, please refer to the Creating and Configuring WorkCenter Pages section of PeopleTools: Portal Technology. Now when you navigate to the content reference for the item of managed content, it will be displayed within the WorkCenter template. In the following figure, the managed content created as the welcome text for the marriage event is used as the start page of the Life Events WorkCenter.

24

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 27. Managed content as WorkCenter starting page

Configuring WorkCenter Dashboards in an Activity Guide


This section discusses how a WorkCenter dashboard can be used as an action item in an activity guide. WorkCenter dashboards are a special class of dashboards that can be deployed as target content in a WorkCenter or activity guide. When the action item is accessed by a user, dashboard pagelets appear on the target page. You must complete the following steps to configure WorkCenter dashboards in an activity guide:
1. 2. 3. 4. 5.

Create a WorkCenter dashboard. Create a related content service definition to access the WorkCenter dashboard. Configure an activity guide template. Create an activity guide pagelet. Create a WorkCenter with the activity guide pagelet.

Creating a WorkCenter Dashboard

1. 2. 3. 4.

Create a WorkCenter dashboard under PeopleTools > Portal > WorkCenter > Manage WorkCenter Dashboards. Click the Create a new WorkCenter dashboard page link. Create a WorkCenter dashboard Then, add pagelets to the dashboard.

For details on how to create a WorkCenter dashboard, refer to the Creating and Managing WorkCenter Dashboards section of PeopleTools: Portal Technology.

25

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Creating a Related Content Service Definition to Access the WorkCenter Dashboard

1. 2.

Create a non-PeopleSoft URL-based related content service from PeopleTools > Portal > Related Content Service > Define Related Content Service. Use a URL similar to the following in the related content service definition:
http://server_name:port/psc/site_name/EMPLOYEE/EMPL/s/ WEBLIB_PTAL.ISCRIPT1.FieldFormula.IScript_PTAL_DASHBOARD ?tab=dashboard_name&PTAI=T

In the preceding URL, replace the server_name, port, and site_name with actual values. Use the dashboard name created in the previous section as the value for the tab query parameter. Alternatively, you could use an application class-based related content service definition to pass the dashboard name dynamically using the application class PeopleCode. Here is how you can accomplish this using the application class-based related content service definition:
1. 2.

Create an application class-based related content service from PeopleTools > Portal > Related Content service > Define Related Content Service. Enter the application package and class details in the related content service definition. This application class will contain code to read the configurable field value from the action item and will use that to form the URL for the dashboard. Sample application class PeopleCode is shown in Appendix A. The sample code demonstrates how to pass values to the configurable field of an action item. The next section provides details for configuring an action item with a configurable field.

For details on how to create application class-based related content service definitions, please refer to the Defining Related Content Services section of PeopleTools: Portal Technology.
Configuring an Activity Guide Template

You configure an activity guide template to add a new action item to the template and to set the action item type to non-PeopleSoft URL.
1. 2.

Choose the newly created non-PeopleSoft URL-based related content service definition created in the previous section for this action item. Once the action item is created in the activity guide template, create an activity guide instance using the Create Instance button on the Activity Guide Template properties page. Now the activity guide template and instance are available.

The next section will explain how to create an activity guide pagelet using the template ID and instance ID created in this section using Pagelet Wizard. For more details on how to create action items, please refer to the Creating and Maintaining Action Items section of PeopleTools: Portal Technology.

26

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

As an alternative to the approach explained above, you can use the application class-based related content service if you plan to pass the dashboard name dynamically using the configurable field of an action item.
Alternative Approach: Adding a Configurable Field to an Activity Guide Template

Configurable fields are additional fields available to each action item in an activity guide instance. You use them to associate additional data that a related content service will use at runtime.
1. 2. 3. 4.

Navigate to PeopleTools > Portal > Activity Guide > Manage Activity Guide Templates. Click the Properties link for an activity guide template, for example, IB Configure Network. Select the Advanced Options tab. In the Configurable Fields group box, set Field Label 1 under Text Fields to the value of tab. The configurable field labels and values could be set to anything based on the business requirement. The field label is defined at the template, and the value is assigned at the action item. Now a configurable field is defined in the template. For details on configurable fields, please refer to the Developing and Managing Activity Guide Templates section of PeopleTools: Portal Technology.

5. 6.

Add a new action item to the template and set the action item type to App Class URL. Choose the newly created application class-based related content service definition for this action item. Now create an instance of this activity guide by selecting the Properties tab of the template and clicking the Create Instance button. For details on how to create activity guide instances, please refer to the Managing Activity Guide Instances section of PeopleTools: Portal Technology.

7. 8. 9.

Open the newly created activity guide instance. Click the link for the application class-based action item to access the Action Item Details page. Select the Related Data tab to see the new configurable field called tab listed in the Related Data group box.

10. Enter the WorkCenter dashboard content reference name in the configurable field labeled tab.

27

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 28. Action item properties Related Data tab


Creating an Activity Guide Pagelet

Now create an activity guide data source-based pagelet using the template ID and instance ID obtained in the previous section after creating the activity guide template and instance. Publish the pagelet as template pagelet.
Creating a WorkCenter with the Activity Guide Pagelet

1. 2. 3. 4. 5.

Navigate to PeopleTools > Portal > WorkCenter > Manage WorkCenter pages. Click the Create new WorkCenter page link. Choose the activity guide layout template in the Layout Template drop-down list. Assign the newly created activity guide pagelet in the Pagelets group box. Save the WorkCenter.

For details on how to deploy an activity guide, please refer to the Deploying an Activity Guide section of PeopleTools: Portal Technology.

28

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Now when you access the application class related content-based action item in the activity guide pagelet, the WorkCenter dashboard opens in the target content area of the WorkCenter:

Figure 29. WorkCenter dashboard in an activity guide

As shown in the preceding example, when the user accesses the Integration Broker Dashboard action item, the dashboard opens in the target content area.

Customizing the Workspace Branding Theme


This section discusses how to brand workspaces. All items described in this section are generally considered as configuration and should have no upgrade effect unless delivered branding definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.
Select Branding Themes in the 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 module.

Figure 30. Selecting a workspace template branding theme

29

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 module to open the Select Branding Theme and Overrides page. Select the elements and save the data.

Figure 31. Select Branding Theme and Overrides page

30

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Override Branding Elements in Workspace Instances

To override branding elements in workspace instances, select the Advanced tab of the workspace Administration module, and click one of the links in the Branding folder on the page to open the corresponding page.

Figure 32. Advanced tab of the workspace Administration module

On the page you opened, an Override Options icon will appear next to selected elements that are to be overridden at the workspace template level. Click the icon to specify the override options: use the default, override, or hide the element.

Figure 33. Override Homepage Header page

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

31

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 34. Override options for the Search Options element

Using the PeopleTools 8.53 Branding Feature


Uploading HTML, JavaScript, Style Sheets, and Images

If you are on PeopleTools 8.53, you can upload the HTML, JavaScript, style sheets, and images to your database from the browser using the branding pages. You do not need access to PeopleSoft Application Designer to add new HTML, JavaScript, CSS, or images to your database. For instance, if you want to pick a different logo image and display it in the header, you can do so without using PeopleSoft Application Designer. You can find the logo image file name in the header using a browser plug-in such as Firebug for Firefox. The default logo image file name is PT_ORACLELOGO_CSS.png. Now you can access the PeopleTools branding page to overwrite this logo image file with your new logo file.
1. 2. 3. 4. 5.

Navigate to PeopleTools > Portal > Branding > Branding Objects. Select the Image tab. Click the Upload Image Object link to open a pop-up page. Enter PT_ORACLELOGO_CSS in the Name field and Logo in the Description field. Select the image type of the image file you are uploading.

32

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

6. 7.

In the file upload dialog box that appears, browse for your new logo image file and click the upload button. Save the image. You may see this warning message: Overwrite Object "PT_ORACLELOGO_CSS"?

8. 9.

Click OK and save the image to replace your old logo image. Log out and log in again to see the new logo image in the header. You can now revert the changes made in the default header.

In the same way, you can upload HTML, JavaScript, and CSS files using this branding framework and use them to brand your PeopleSoft application. Note. Overriding existing items is only allowed when the user has read/write permission to the corresponding managed object. Be very careful when trying to modify delivered JavaScript or granting a user permission to do so. This may break delivered functionality or cause security vulnerabilities.
Apply Branding Styles to Pagelets

The branding framework also provides an easy way to apply some of the branding styles to homepage pagelets. For instance, you can make a pagelet display as a banner pagelet that spreads across all the columns on the homepage. You can make a pagelet display without a pagelet border and pagelet title bar. You can also show a pagelet icon image in the pagelet title bar. Making a pagelet display as a banner pagelet is described in a previous section Customizing Pagelet Layout and Behavior. In PeopleTools 8.53, you can do this easily in the Pagelet Branding component by selecting the Banner Pagelet check box. You no longer need to make the changes manually, as described in the section Customizing Pagelet Layout and Behavior. The following example shows how the HCM pagelet Talent Summary Header appears as a banner pagelet in the HCM Talent Summary dashboard using the pagelet branding options. The next example shows the Banner Pagelet option being selected for the Talent Summary Header pagelet under the Pagelet Branding component. (Navigate to PeopleTools > Portal > Branding > Pagelet Branding.)

33

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 35. Banner Pagelet option for Talent Summary Header pagelet

After saving the changes in the Pagelet Branding component, you may need to reboot your web server to see the changes in the dashboard or homepage.

Figure 36. HCM Talent Summary dashboard with Talent Summary Header pagelet as banner pagelet

Notice that the preceding example shows the Talent Summary Header pagelet as a banner pagelet on the Talent Summary dashboard. If you want a pagelet to be searchable, you can add keywords to the pagelet and then use it to search for pagelets in homepages, dashboards, and WorkCenters. The above Pagelet Branding page for the Talent Summary Header pagelet shows the Keywords field populated with the keywords TALENT, SUMMARY, 9-BOX for the Talent Summary Header pagelet. You can search for this pagelet using the keywords mentioned while configuring homepages and dashboards.

34

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

For more details on how to search for pagelet using keywords, refer to the section Configuring Remote Pagelet Search in this document. You can also access the Pagelet Branding component via the Pagelet Wizard. In the last step of the Pagelet Wizard, expand the Advanced Options group box in the Homepage pagelet section and then click the More Options link. A modal window will open where you can enter the pagelet keywords via the Pagelet Branding page.

Figure 37. Pagelet Branding page

Search for a pagelet for which you want add keywords and enter those keywords in the Keywords field and save the Pagelet Branding page. These keywords can be used while searching for pagelets to be used in WorkCenters, dashboards, homepages, and related content and actions.

Opening Links in Modal Windows from Homepage Pagelets


You can open the iScript-based homepage pagelet links in a modal window using the JavaScript function provided by PeopleSoft Interaction Hub 9.1. The JavaScript function openContentInModal is available through My Links JavaScript library. While generating the URLs for iScript-based pagelet links, you can wrap them with the JavaScript function as shown below and include them in the homepage pagelet HTML:
&URL = "if (typeof openContentInModal == 'function'){openContentInModal('" | EscapeJavascriptString(&URL) | "');return false;};";

For instance, you can see how to open the Discussion Forum homepage pagelet links in a modal window. Please note that the Discussion Forum homepage pagelet is an iScript-based pagelet. Notice the topic URLs being wrapped in OpenContentInModal JavaScript function in the WEBLIB_EPPDF.ISCRIPT1.FieldFormula PeopleCode program.

35

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

&ModalTopicURL = "if (typeof openContentInModal == 'function'){openContentInModal('" | EscapeJavascriptString(&ModalTopicURL) | "');return false;};";

Figure 38. Homepage pagelet links opened in a modal window

Please note that the JavaScript function, OpenContentInModal, is to be used only with iScript-based pagelets to open pagelet links in a modal window. For component-based homepage pagelets, you should use the PeopleTools DoModal built-in function to open the secondary pages within the same component in a modal window and DoModalComponent to open the secondary components in a modal window. For more details on the DoModal and DoModalComponent built-in functions, please refer to the PeopleCode Built-in Functions and Language Constructs section of PeopleTools: PeopleCode Language Reference.

Overriding the Default Homepage Tab to Any URL


You can override the default homepage tab to redirect to any target page, dashboard, WorkCenter, or tab URL at login. Create a new homepage tab and assign it the lowest sequence number so that it becomes the default homepage tab. Also, select the Operational Dashboard check box in the Homepage tab attributes group box and add the following content reference attribute on the Content Ref Administration page: Name: PORTAL_HP_USER_TEMPLATE Value: EPPBR_REDIRECT_TAB

36

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 39. Homepage tab content reference attributes on the Content Ref Administration page

The EPPBR_REDIRECT_TAB shown in the previous example is a custom layout HTML object for a homepage tab. This HTML object should contain the code as shown below pointing to the iScript code that does the redirection to the specified URL at login. Select the Security tab of the content reference and set the permission list to PAPP0000. Deselect the Public and Author Access check boxes. Save the content reference definition. Open PeopleSoft Application Designer and create a new HTML object with the <pagelet> metatag pointing to an iScript function as shown here:
<pagelet name="RedirectTab" Load="A"> <source node="LOCAL_NODE" href="s/WEBLIB_EO_PE.PORTAL_HOMEPAGE. FieldFormula.IScript_RedirectTab" /> </pagelet>

Save the HTML object as EPPBR_REDIRECT_TAB. Now create the iScript function with the PeopleCode as shown in Appendix A that does a JavaScript redirect to the specified URL. Save the iScript function with the name as shown in the HTML object EPPBR_REDIRECT_TAB. When the user logs in to the PeopleSoft Interaction Hub 9.1 system, it redirects to the URL specified in the iScript function. You can also specify a homepage URL, a WorkCenter URL, or a dashboard URL so that users are redirected to the appropriate page at login. Navigate to PeopleTools > Security > Permissions and Roles > Permission Lists and add this web library function to a permission list such as PAPP0000 so that it is available to all PeopleSoft Interaction Hub users. Save the permission list. Now restart the web server and clear the web server and browser cache. Log in to the PeopleSoft Interaction Hub and you will notice that you are redirected to the URL specified by the iScript function instead of loading the default.

37

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Overriding the Default Login/Expiration Page with Public Access Turned On


This section discusses how to override the default login page and expiration page to the Guest homepage when public access is turned on in the web profile. This takes PeopleSoft Interaction Hub users to the Guest login page instead of showing them the default login page at login and the expiration page when the session expires. To override these default HTML pages, you must enable public access in the current web profile.
1. 2. 3. 4. 5. 6. 7. 8. 9.

Navigate to PeopleTools > Web Profile > Web Profile Configuration and select the Web Profile currently being used by the session. Go to the Security tab and select the check box Allow Public Access. Enter the Guest user ID and password (for instance, GUEST/GUEST) in the User ID and Password fields in the Public Users group box. Change the Send timeout and Receive timeout time to 7020/7200 in the Web Server Jolt Settings group box. Now open the web profile configuration.properties file under PIA_HOME/webserv/ peoplesoft/applications/peoplesoft/PORTAL.war/WEB-INF/psftdocs/SITE_NAME/. Open the signin.html and expire.html files in the same folder: Replace their content with the HTML content shown in Appendix A. Reboot the web server andonce it is rebootedaccess the PeopleSoft Interaction Hub URL. Now it will open the Guest homepage instead of showing the default signin page. In the same way, when the session expires it will go to the Guest homepage instead of showing users the default expire page.

Pagelet Wizard Pagelets


This section describes how to build content rich pagelets using the Pagelet Wizard framework. This section 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 section of PeopleTools: Portal Technology.

38

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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, which are explained below, to create new pagelets. Depending on the data source selected, some steps may be skipped.

Step 1 is to specify pagelet information such as the pagelet label and description. A pagelet help URL can also be specified in this step. Note. The pagelet help URL is only supported for homepage pagelets.

Step 2 is to specify the source type of the pagelet data and to 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 Interaction Hub 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 about each data source type. Step 3 is to configure the parameters of a data source. For example, specify the value of the PeopleSoft query prompt variable, configure whether users can personalize a specific data source parameter value, and so on. Not all data sources have parameters; for those data sources that do, this step will be skipped. Step 4 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 5 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 step 4, different pages will be shown with the specific options for that display format. Step 6 is to publish the pagelet as a 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:
1. 2.

Load the pagelet definition metadata from the database and verify the permissions for the pagelet. Populate data source parameter values. Especially for data source parameters whose usage type are system variables, user specified, admin specified, or contextual, their values can only be determined at that time.

39

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

3. 4. 5.

Execute the data source code. Execute the display format code to process the data source output, when applicable. Process the metatags in the display format code output, when it is XML, and append header, footer, and pagelet search box to generate the final output.

The Pagelet Wizard framework also provides additional components for administrative tasks such as deleting a pagelet definition or generating scripts that export/import pagelet definitions. All those components can be found in the PeopleTools > Portal > Pagelet Wizard folder.
TABLE 3. FACTSHEET FOR PAGELET WIZARD

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

DATA MIGRATION

UPGRADE IMPACT

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

Creating Navigation Collection Based Accordion Style Pagelets


This section discusses 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 effect unless delivered navigation collection definitions or

40

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.
Navigation Collection

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

Figure 40. Navigation collection for accordion style menu pagelet

Custom folder icons are associated to subfolders 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.

Figure 41. Custom folder icon for navigation collection subfolders

Accordion Style Menu Pagelet

The next step is to create a navigation collection pagelet using the Pagelet Wizard. At step 5, copy and paste the sample XSL code into the XSL field. The complete sample XSL can be found in

41

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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

Figure 42. 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 referenced 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 Interaction Hub 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


This section discusses 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 effect unless delivered sample news publication definitions or pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade.

42

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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.

Figure 43. 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.

Figure 44. Associated Image of the Learning Center News Publications article

Slide Show Pagelet

The next step is to create a news publication pagelet using the Pagelet Wizard. At step 5, copy and paste the sample XSL code into the XSL field. The sample XSL can be found in Appendix A. The XSL will transform the XML data of the news publication into the HTML structure required and then invoke the jQuery function to start the slide show. The pagelet preview will looked like the following. Clicking the image will open the corresponding news publication article.

43

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 45. 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


This section discusses 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 effect. 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 because of 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; select the Options tab in the Long Edit Box Properties window; and then set the Configuration Settings Id field to PT_RTE_CFG_PTPPB.

44

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 46. Enable HTML source mode in Pagelet Wizard

Next, open PT_RTE_CFG_PTPPB in PeopleSoft 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 solution is not ideal, but it 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);

45

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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:

Figure 47. 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-shockwaveflash"></embed>

46

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

The pagelet preview looks like the following:

Figure 48. 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 section describes how to build task driven and intuitive navigation using the Navigation Collection framework. This section includes the following topics:

Navigation collection overview Customizing navigation collection styles Configuring remote content references Configuring custom homepage tabs Creating navigation collection pagelets

For more details, please refer to the Using Navigation Pages section of PeopleTools: Portal Technology.

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

47

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 is already listed in a menu folder, the menu folder can be added directly to the collection. 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 FOR NAVIGATION COLLECTIONS

SKILL REQUIRED

Knowledge of navigation collections. All navigation collection related menu items are in the PeopleTools > Portal > Portal Utilities folder.

NAVIGATION

APPLICATION DESIGNER ACCESS

Application Designer access is not required to create navigation collection definitions. 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 inserted manually into the project unless a full portal registry copy is done to import those.

DATA MIGRATION

UPGRADE IMPACT

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

Customizing Navigation Collection Styles


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

48

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

The style of navigation collection pages can be specified in four different places: system options, registry options, portal content registry properties, and collection properties. System-level options control the default behavior of all navigation pages and pagelets in the entire 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.

49

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 49. System Options page

50

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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.

Figure 50. Registry Options page

51

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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:

Figure 51. 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 example:

Figure 52. Navigation Collection Edit Folder properties page

52

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Configuring Custom Homepage Tabs


Note. Some of the functionality explained in this section needs a specific PeopleTools8.53 patch to work. Please check the latest PeopleTools patch user documentation and apply the patch. This section discusses how to use a navigation collection to display any URL as a homepage tab. You can display any content references, WorkCenters, or dashboards as homepage tabs. You need to add links to your content references, WorkCenters, or dashboards to the special Custom Tabs navigation collection in order to render them as homepage tabs.
Adding Remote Content as a Custom Homepage Tab in PeopleSoft Interaction Hub Using a Navigation Collection

From PeopleTools 8.53 onwards, remote content references can be added to navigation collections; they can also be displayed as homepage tabs in PeopleSoft Interaction Hub when the remote content reference is configured inside the Custom Tabs navigation collection folder. The navigation collection uses the unified navigation framework to render the remote content references in PeopleSoft Interaction Hub. To select a remote link, unified navigation must be configured between the local PeopleSoft Interaction Hub system and the remote content provider system. When you add a link in the navigation collection, you see a link called Remote Menu Item next to the Source Portal drop-down list box. Clicking this link opens the content reference tree of the remote content provider system. You can change the Node Name drop-down list value in the newly opened window to select a different remote system. The content reference tree is re-rendered based on the remote system node selected in the node name drop-down list. You can then navigate through the remote system folders and select a remote content reference for displaying inside the navigation collection. Remember that navigation collections only support adding remote component-based content references. To add other remote items, for instance, remote dashboards or WorkCenters to a navigation collection, you must create the content reference manually through the Structure and Content component. This Custom Tabs navigation collection is delivered with 12 predefined links as sample data in PeopleSoft Interaction Hub 9.1 Revision 2. These are hidden from portal navigation by default. However, you can look at their definitions in the Structure and Content component and use similar formats to create remote dashboard links inside the Custom Tabs collection. To disable a custom homepage tab, click the Edit link for that content reference. Then select the Hide from portal navigation option and save the definition. To enable a custom homepage tab, click the Edit link for that content reference. Then deselect the Hide from portal navigation option and save the definition. Log out and log in to the PeopleSoft Interaction Hub system to see the changes in the homepage.

53

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

To see the remote links as homepage tabs in PeopleSoft Interaction Hub, Single Signon and Integration Broker must be configured between the local PeopleSoft Interaction Hub system and the remote content provider system. In addition, the remote content provider system should be up and running. For remote content references as homepage tabs, your PeopleSoft Interaction Hub system needs to be on PeopleTools 8.53. This special navigation collection provides you with the following benefits with respect to remote content:

Security is checked in real time against definitions in the content provider system. You do not need to import content references or security manually from the content provider system. If the remote system is down or has not been configured, the homepage tab is not displayed.

The navigation collection for rendering the content references as homepage tabs has the following limitations:

Only local content reference security can be checked when the PeopleSoft Interaction Hub is on PeopleTools 8.52. To check remote content reference security, Interaction Hub 9.1 database needs to be on PeopleTools 8.53. Only root-level shortcuts inside the Custom Tabs navigation collection folder will be rendered as homepage tabs. To display non-component-based remote links as homepage tabs, content references need to be created manually inside the Custom Tabs navigation collection folder via Structure and Content.

For more details, please refer to PeopleTools: Portal Technology, Creating and Maintaining Navigation Collections. To create a content reference to a remote item manually, use a non-component-based item such as a remote dashboard as a custom homepage tab:
1. 2. 3.

Navigate to Portal Administration > Navigation > Structure and Content > Portal Objects > Navigation Collections > Custom Tabs. Click the link labeled Add Content Reference. Enter a Name and Label for the Content Reference and specify the Node Name of the portal host node, such as HRMS, ERP, or LOCAL_NODE. Note. For a remote dashboard, the Node Name field can specify LOCAL_NODE or can be left blank.

4.

In the URL Type field, select one of the following:

PeopleSoft Generic URL For remote content from a PeopleSoft application.

54

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Non-PeopleSoft URL For remote content from a non-PeopleSoft system, such as an external web site.

5.

In the Portal URL field, enter a partial or full URL, depending on the URL type.

For a PeopleSoft Generic URL, navigate to the remote item through unified navigation (via the drop-down menu) from the PeopleSoft Interaction Hub system. Copy the full URL and then remove the server, port, servlet, site, portal, and node from the URL, leaving a URL string as follows: The URL that follows is the full dashboard URL copied from the browsers address bar when the remote item is accessed via the drop-down menu on the PeopleSoft Interaction Hub system. Note that the part of URL stricken through is not needed while creating the custom tab content reference manually for remote items.
http://server.example.com:85/psp/ps/EMPLOYEE/EMPL/h/?tab=REMOTEUN IFIEDDASHBOARD&unifieddashboard=y&uninavpath=Root{PORTAL_ROOT_OBJ ECT}.HRMS{PTUN_0239148870002871%2CPORTAL_ROOT_OBJECT}.Recruiting{ HC_RECRUIT_EMPLOYEE}.Recruiting%20Home{HC_HRS_RECRUITING_HOMEPAGE _LNK}&remotedburl=http%3A%2F%2Fslc00eyv.us.oracle.com%3A85%2Fpsp% 2Fps%2FEMPLOYEE%2FPSFT_HR%2Fh%2F%3Ftab%3DHC_HRS_RECRUITING_HOMEPA GE_TAB%26pslnkid%3DHC_HRS_RECRUITING_HOMEPAGE_LNK

The partial URL to be entered in the Portal URL field would be:
h/?tab=REMOTEUNIFIEDDASHBOARD&unifieddashboard=y&uninavpath=Root{ PORTAL_ROOT_OBJECT}.HRMS{PTUN_0239148870002871%2CPORTAL_ROOT_OBJE CT}.Recruiting{HC_RECRUIT_EMPLOYEE}.Recruiting%20Home{HC_HRS_RECR UITING_HOMEPAGE_LNK}&remotedburl=http%3A%2F%2Fslc00eyv.us.oracle. com%3A85%2Fpsp%2Fps%2FEMPLOYEE%2FPSFT_HR%2Fh%2F%3Ftab%3DHC_HRS_RE CRUITING_HOMEPAGE_TAB%26pslnkid%3DHC_HRS_RECRUITING_HOMEPAGE_LNK

For a non-PeopleSoft URL, copy the full URL from the browser and paste it into the Portal URL field. For example:
http://server.example.com/content

6.

Define the following four content reference attributes:


NAME VALUE

CREFID

The name of the remote CREF as defined in the content provider system. REMOTE The portal host node name of the remote node. The name of remote portal. This must be the same name as the current portal in the local system, for example, EMPLOYEE.

LOCATION

NODE

PORTAL

55

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

The CREFID attribute denotes the actual dashboard tab name in the content provider system. The LOCATION attribute specifies whether the dashboard is local or remote. PORTAL and NODE attributes specify the content provider systems host node and portal name.
7. 8.

Finally, set the content reference definition to public on the Security tab. Save the Content Reference definition. Log out and log in again to Interaction Hub 9.1.You can now see the Remote Dashboard appearing in the homepage tab.

For more details on how to manually configure remote content in PeopleSoft Interaction Hub, please refer to the PeopleSoft Interaction Hub 9.1: Portal and Site Administration, Managing Homepage Tabs in the Custom Tabs Navigation Collection.

Creating Navigation Collection Pagelets


This section discusses 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 effect unless delivered navigation collection pagelet definitions are modified. In that case, changes should be reapplied to those definitions after the upgrade. When you publish 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 Wizard 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 shown in the previous section. Even with the default menu display format, step 5 of the Pagelet Wizard offers many configurable options.

56

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 53. Pagelet Wizard menu display options for a navigation collection pagelet

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 folders content inside the pagelet. At the top of the pagelet, the current folders label will be displayed. To go back to the parent folder, click the icon on the right side 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.

57

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 54 Navigation collection template pagelet in a WorkCenter page

PeopleSoft Application Integration


This section describes how to integrate with other PeopleSoft applications. This section includes the following topics:

Configuring unified navigation Consuming content provider pagelets Configuring remote pagelet search

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

Configuring Unified Navigation


This section briefly discusses 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 effect. Guidance for the following topics is available in the red paper Setting up PeopleSoft Interaction Hub with PeopleSoft Applications. Configuring single signon for PeopleSoft Interaction Hub and PeopleSoft content providers.

58

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Configuring unified navigation to federate portal registries from PeopleSoft content providers. Configuring and synchronizing user roles and user profiles across multiple PeopleSoft content providers. Synchronizing user personalization across multiple PeopleSoft content providers.

You can get the red paper from this My Oracle Support link: https://support.oracle.com/epmos/faces/DocumentDisplay?id=1545044.1
Overview

A typical use of the PeopleSoft Interaction Hub 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 databases portal registry, are used to integrate the content provider menus with the menu of the PeopleSoft Interaction Hub. It is a lengthy process to generate a portal pack, and since it is a snapshot, keeping the structure and security in sync becomes an ongoing task. In PeopleSoft Interaction Hub 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 Interaction Hub system, as long as the content provider systems are running on PeopleTools 8.52 or later. There is no longer the need neither to import the portal packs nor to synchronize the portal registry changes. With the unified navigation feature, administrators create folders in the PeopleSoft Interaction Hub 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 dropdown menu in the PeopleSoft Interaction Hub 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 Interaction Hub system. The PeopleSoft Interaction Hub system also retrieves the content reference template information from the corresponding content provider system. Then, PeopleSoft Interaction Hub 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. Unified navigation supports only iFrame-based templates. If the content reference in the content provider system is assigned with a non- iFrame -based template, then unified navigation framework will ignore the template and render the content in the portal system default template. Another change is that earlier, if the content system content reference was not registered in PeopleSoft Interaction Hub, it would display the content in the PeopleSoft Interaction Hub default template. Now, in unified navigation for unregistered content references, it will fetch the template from the content provider system. If the content system content reference is registered in the PeopleSoft Interaction Hub system, then unified navigation will not retrieve the template from the content provider system. It will render the content in the template assigned in the portal system.

59

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

To override this, even if the content provider content reference is registered in the PeopleSoft Interaction Hub system with a template but you still want unified navigation to fetch the template from the content provider system, then you must add a content reference attribute named LOCATION with value as REMOTE. If this content reference attribute exists, then unified navigation will retrieve the template from the content provider system even for locally registered remote content references. For more details, please refer to the Administering Unified Navigation in PeopleSoft Interaction Hub section of Interaction Hub 9.1: Portal and Site Administration.
TABLE 5. FACTSHEET FOR 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. N/A 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.

DATA MIGRATION

UPGRADE IMPACT

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 Interaction Hub 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 Interaction Hub 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 Interaction Hub system need to have at least the PAPP_USER role assigned in order to use basic portal features. For remote pagelet search, local and remote nodes should have the Tools Release field set properly.

60

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 Select Remote Content 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 were created in the portal root menu pointing to the root menus of the corresponding content provider systems. Note. It is recommended that you always create remote folders using the portal host nodes of the corresponding content provider system.

Figure 55. Configure Drop Down Menu page

Here is an example of a remote folder in the drop-down menu of the portal:

Figure 56. Remote folders and menu under unified navigation

61

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Consuming Content Provider Pagelets


This section discusses how to consume content provider pagelets. All items described in this section are generally considered as configuration and should have no upgrade effect.
Overview

Traditionally, Application Designer projects are used to copy content provider pagelet content reference definitions to the PeopleSoft Interaction Hub 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 Interaction Hub 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 includes the pagelet security as long as the role or permission list definitions can be found in the portal system. The pagelet security is not copied over. The pagelets are marked as public pagelets in the PeopleSoft Interaction Hub system. The security of the pagelet is validated at runtime. For example, when the pagelet is used in the dashboard, there will be a request at runtime to the content provider system to check whether the logged in user has permission for the pagelet. If the user has permission, then the pagelet will be displayed or else the pagelet will not be displayed to the user. Other related object definitions, such as the pagelet component, the pagelet icon, and the pagelet layout HTML object, will not be copied over. Unified Navigation does not support custom templates set for the pagelet. For example, if the pagelet in the content provider system has overridden the PORTAL_HP_COMPONENT layout, then when a user accesses the content provider pagelet in the PeopleSoft Interaction Hub system, it will still be displayed with the default layout. Unified Navigation does not support customized layouts at the pagelet level. If needed, the layout has to be copied manually to the portal system. For more details, please refer to the Administering Unified Navigation in PeopleSoft Interaction Hub section of PeopleSoft Interaction Hub 9.1: Portal and Site Administration, and the Administering Collaborative Workspaces section of PeopleSoft Interaction Hub 9.1: Collaborative Workspaces.
TABLE 6. FACTSHEET FOR 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.

62

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

TABLE 6. FACTSHEET FOR COMTENT PROVIDER PAGELET CONSUMPTION

APPLICATION DESIGNER ACCESS

Application Designer access is not required to use this feature. N/A The imported pagelet portal content references should not be affected by PeopleTools upgrade or application upgrade.

DATA MIGRATION

UPGRADE IMPACT

Prerequisites

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

All systems have to be on PeopleTools 8.50 or later, and the PeopleSoft Interaction Hub has to be release 9.1 or later. Integration Broker gateway must be configured in all systems. Default local nodes and portal host nodes must be configured in all systems. Single signon is configured between all systems. User, role, and permission list definitions in all systems must be 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.

Figure 57. Define Source Applications page

63

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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 appear. 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 pagelet content reference definition into the local portal registry of the current portal, site, or workspace.

64

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 58. Add Pagelet page

Configuring Remote Pagelet Search


The previous section discussed how to consume content provider pagelets PeopleSoft Interaction Hub system. It copies the pagelet content reference definitions into the portal system and not the associated components, images, and so on.

65

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

PeopleSoft Interaction Hub 9.1 Revision 2 provides a new search capability for content provider pagelets. With this new search mechanism, you do not need to configure content provider pagelets manually in PeopleSoft Interaction Hub. You can search for pagelets from the content provider system and add them directly to homepages, dashboards, WorkCenters, and related content and actions. Remote pagelet search has these limitations:

Real-time remote pagelet search is not available for pre-PeopleTools 8.53 content systems. It is available only when the content system is on PeopleTools 8.53. If the content system is on PeopleTools 8.52, remote content pagelets can be imported into PeopleSoft Interaction Hub 9.1 using the Pagelet Import functionality in the Configure Drop-Down Menu page as shown in Figure 55.

Real-time pagelet security synchronization is not available for pre-8.52 content systems; therefore, security synchronization has to be done manually. Remote pagelet templates should be copied manually to the PeopleSoft Interaction Hub system. Pagelet templates are the layout html objects assigned to the pagelet content reference as content reference attributes. Pagelet template name defined at the pagelet content reference will be used to override the default pagelet layout. In case the pagelet is a remote pagelet, while importing it to PeopleSoft Interaction Hub, the associated pagelet layout html object should be copied manually to the PeopleSoft Interaction Hub system.

Default keyword search will only be initiated for the first keyword configured for dashboards or WorkCenters. Template pagelets are not supported in the remote pagelet search. Template pagelets are the pagelet content references defined inside the portal registry folder Template Pagelets under Portal Administration > Navigation > Structure and Content > Portal Objects. While searching for pagelets using remote pagelet search, template pagelets defined in remote systems will not be searchable.

You complete the following steps to search for content provider pagelets to add them to PeopleSoft Interaction Hub homepage tab.
1. 2. 3. 4. 5.

Navigate to Portal Administration > Navigation > Structure and Content > Portal Objects > Homepage > Tabs. Click the Edit link for the My Page tab. Select the Tab Content tab. You will notice the Search Pagelets group box containing a Pagelet Search button. Click this button to open a modal window with pagelet search UI. From the Node Name drop-down list, select content provider host node HRMS and click the Search button.

66

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

The content provider pagelets are shown in the Search Results:

Figure 59. Remote pagelet search from a homepage Tab Content page

You can also use the Keywords field to search for pagelets that are tagged with specific keywords while creating pagelets using Pagelet Wizard. Keywords for pagelets can be added via the Pagelet Wizard, pagelet registry definition under Structure and Content, and via the Branding framework. These pagelet keywords are useful for searching pagelets in homepage tabs, dashboards, WorkCenters, and related content and actions. The following example shows the pagelet search results for keywords such as Recruiting, Manager.

67

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 60. Remote pagelet search using keywords

When the remote pagelets are searched using the content provider node as shown in the previous example, content provider pagelet content references are copied to Interaction Hub 9.1. The following new content reference attributes are added to the copied content provider pagelet content references in PeopleSoft Interaction Hub 9.1. This attribute information is used for runtime security validation:
NAME VALUE

LOCATION

REMOTE The portal host node name of the remote node. The name of remote portal. This must be the same name as the current portal in the local system, for example, EMPLOYEE.

NODE

PORTAL

UNPGLTID

Pagelet content reference name in the content provider system.

For details on remote pagelet search and pagelet import, please refer to the Importing Pagelets from Content Provider Systems section of PeopleSoft Interaction Hub 9.1: Portal and Site Administration.

Collaboration
This section describes how to use collaboration features of the PeopleSoft Interaction Hub. This section includes the following topics:

Collaboration overview Using collaborative workspaces Viewing managed content in the content WorkCenter page

68

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

For more details, please refer to PeopleSoft Interaction Hub 9.1: Collaborative Workspaces, PeopleSoft Interaction Hub 9.1: 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 you 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 Interaction Hub 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

69

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

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


1. 2. 3. 4. 5.

Click the Browse Workspaces link in the main menu. Click the Create Workspace button. In the wizard, select a template such as the Base Workspace Template Wiki as the template and enter the workspace name and description. 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. Click the Finish button to complete the creation of the workspace.

Here is the sample Performance Management workspace:

70

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Figure 61. Example of 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 Interaction Hub branding framework. For more details, please refer to the Branding section in this document.

Viewing Managed Content in the Content WorkCenter Page


With PeopleSoft Interaction Hub 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 PeopleSoft Interaction Hub 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

71

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

selected piece of content will be displayed in the target content area of the WorkCenter page. 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.

Figure 62. 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. Sample application class for a related content service to open a WorkCenter dashboard.

72

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Sample iScript function to redirect at login.

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-areainner">%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-linksinner">%bind(:1)</div></div> <!-- bind51 - homepage tabs --> <div id="header-tabs">%bind(:51)</div>

73

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

<!-- bind53 - Dashboard Title --> <div id="header-dashboard-title">%bind(:53)</div> <!-- homepage personalization links --> <div id="header-personalization"><div id="header-personalizationinner">%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>

74

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

</ul> </td> <td style="width:2px;"></td> <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)

75

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

<!% Related Content Area --> %bind(:6) <!% 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;

76

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

background: url(/ps/Arrow_Down.png) no-repeat scroll 98% center #6d98c2; } #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; }

77

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

/* begin jquery ui override */ #demo_myHrLinks .ui-corner-all, #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="backgroundimage:url('{@ImageURL}')" href="#" title="">

78

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

<img src="{$imgSrc}" /> <xsl:value-of select="@Label"/> </a> </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>

79

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

</xsl:stylesheet>

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') } )

80

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

.find("a").show(); }); })(jQuery); </script> </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>

Sample Application Class for a Related Content Service to Open a WorkCenter Dashboard
import PT_RCF:ServiceAGInterface; import PTAI_ACTION_ITEMS:*; class PreProcessing extends PT_RCF:ServiceAGInterface method execute(); end-class; /*** Sample App class type RC to return HR Policy page (external url) when accessed. **/ method execute /+ Extends/implements PT_RCF:ServiceInterface.execute +/ Local PTAI_ACTION_ITEMS:ActionItem &ObjAItem; Local boolean &boolSaved; Local string &market, &tab; &ObjAItem = create PTAI_ACTION_ITEMS:ActionItem(); &ObjAItem.open(%This.StrActionItemId); &tab = &ObjAItem.Field1; &market = %Market; If None(&market) Then

81

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

&market = "GBL"; End-If; %This.StrRedirectUrl = GenerateScriptContentURL(%Portal, %Node, Record.WEBLIB_PTAL, Field.ISCRIPT1, "FieldFormula", "IScript_PTAL_DASHBOARD") | "?tab=" | &tab|"&PTAI=T"; end-method;

Sample iScript Function to Redirect at Login


Function IScript_RedirectTab &url = GenerateComponentPortalURL(%Portal, %Node, MenuName.MAINTAIN_SECURITY, %Market, Component.CHANGE_PASSWORD, Page.CHANGE_PASSWORD, "U"); &html = GetHTMLText(HTML.EPPBR_REDIRECT_HTML, EscapeJavascriptString(&url)); %Response.Write(&html); End-Function;

Content of HTML object EPPBR_REDIRECT_HTML used in the PeopleCode above:

<html dir="%Direction" lang="%LanguageISO"> <!% Redirect to homepage tab ======================================== Definition of the binding variables: 1. Redirect url --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script>top.location.replace("%bind(:1)")</script> </head> <body> </body> </html>

Content in signin.html to Override to Guest Homepage at Login

<html dir=<%=direction%> lang=<%=language%>> <head> <!-<meta http-equiv='refresh' content='1; url=<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST'> --> <script LANGUAGE="JavaScript"> if (typeof(window.sessionStorage) !== "undefined") { try { sessionStorage.clear(); } catch (e) {} } top.location.replace("<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST") ; </script>

82

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

</head> <body> <a href="<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST" title="<%=psENG%>">Go to the guest homepage</a> </body> </html>

Content in expire.html to Override to Guest Homepage When Session Expires

<html dir=<%=direction%> lang=<%=language%>> <head> <!-<meta http-equiv='refresh' content='1; url=<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST'> --> <script LANGUAGE="JavaScript"> if (typeof(window.sessionStorage) !== "undefined") { try { sessionStorage.clear(); } catch (e) {} } top.location.replace("<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST") ; </script> </head> <body> <a href="<%=servletLoc%>EMPLOYEE/EMPL/h/?tab=PAPP_GUEST" title="<%=psENG%>">Go to the guest homepage</a> </body> </html>

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.

83

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub

Authors
The PeopleSoft Interaction Hub development team

Revision History
TABLE 7. REVISION HISTORY

DATE

CHANGE

January 2012 June 2013

Posted initial version. Updated the following sections with new topics. Branding Configuring an Item of Managed Content as WorkCenter Starting Page Configuring WorkCenter Dashboards in an Activity Guide Using the PeopleTools 8.53 Branding Feature Opening Links in Modal Window from Homepage Pagelets Overriding the Default Homepage Tab to Any URL Overriding the Default Login/Expiration Page with Public Access Is Turned On Navigation Collections Configuring Custom Homepage Tabs PeopleSoft Application Integration Configuring Remote Pagelet Search Code Examples Sample Application Class for a Related Content Service to Open a WorkCenter Dashboard Sample iScript Function to Redirect at Login

84

Configuring a Contemporary User Experience in PeopleSoft Interaction Hub May 2013 Author: The PeopleSoft Interaction Hub 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

Copyright 2012, 2013 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

Você também pode gostar