peoplesoft enterprise portal gui customization tips

7/30/2019 PeopleSoft Enterprise Portal GUI Customization Tips

1/50

PeopleSoft Portal GUI Customization

Tips

Contains:

PeopleSoft Enterprise Portal GUI Tips

Development Guidelines

FAQs Prepared by: Mauricio Prado

PSC Technology Solutions Delivery


2/50

December 18, 2001

Comments on this document can be submitted to: Comments on this document can be submitted [email protected]. We encourage you provide feedback on this Red Paper and will ensure that it is updated

based on feedback received.

When you send information to PeopleSoft, you grant PeopleSoft a non-exclusive right to use or distribute the

information in any way it believes appropriate without incurring any obligation to you.

This material has not been submitted to any formal PeopleSoft test and is published AS IS. It has not been the

subject of rigorous review. PeopleSoft 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 upon the

customer's ability to evaluate and integrate them into the customers operational environment.

PeopleSoft Enterprise Portal GUI

Customization Ti s


3/50

3

Table of Contents

TABLE OF CONTENTS 3

CHAPTER 1 - INTRODUCTION 5

Structure of this Red Paper 5

Related Materials 5

CHAPTER 2 - CREATING THE PROJECT 6

Step 1 of 3: Create a new project in Application Designer 6

Step 2 of 3: Insert GUI related objects into the project 7

Step 3 of 3: Review the objects within your project 9

CHAPTER 3 - DEVELOPMENT GUIDELINES README 11

CHAPTER 4: BEGIN MODIFYING OBJECTS IN YOUR PROJECT 11

Before You Begin: Technical Notes 11

Lets Begin! Modifying the HTML Objects 12

HTML objects that will have a MAJOR impact on GUI 12

HTML objects that will have a MINOR impact on GUI: 21

You are finished! 27

FREQUENTLY ASKED QUESTIONS 28

FAQ: How can I force required pagelets onto every users homepage (ie, the navigation, Top Stories, etc)? 28

FAQ: Do I need to do anything to these objects if I migrate this project to Production? 29

FAQ: What do I need to change if I change the Portal URL? 30

FAQ: Can I Use Different Templates for Different Pagelets? 31

FAQ: How can I change the hyperlink colors on the homepage? 33

FAQ: How do I change the login, expire, and other WebLogic pages? 33

APPENDIX A-1: BIND VALUES #S FOR PORTAL_UNI_HEADER_NEW IN 8.12 8.13 34

APPENDIX A-2: BIND VALUE #S FOR PORTAL_UNI_HEADER_NEW IN 8.14 8.15 36

APPENDIX B-1: PORTAL_UNI_HEADER_NEW 38

APPENDIX B-2: PORTAL_HP_3COL_LAYOUT 42


4/50

APPENDIX B-3: PR_PORTAL_DEFAULT_USERA 45

APPENDIX C SPECIAL NOTICES 47

APPENDIX D VALIDATION AND FEEDBACK 49

Customer Validation 49

Field Validation 49

APPENDIX D REVISION HISTORY 50


5/50

Copyright PeopleSoft Corporation 2001. All rights reserved. 5

1/14/2002

Chapter 1 - Introduction

This Red Paper is a practical guide for a technical audience: web and application developers who implement, maintain,

or develop using the PeopleSoft Enterprise Portal. In this Red Paper, we discuss guidelines on how to modify the

entire look and feel of the PeopleSoft Portal. This is a no frills and to-the-point document on how to put a completeface-lift on your Portal.

Much of the information contained in this document originated from PeopleSoft Consulting field experience and is

therefore based on "real-life" problems encountered in the field.

This document can be used for the following Portal and Tools releases:

Enterprise Portal SP1

Enterprise Portal SP2

PeopleTools 8.12 through PeopleTools 8.16.00

The objects in this document are not specific to any particular portal product (i.e., Customer Portal, Employee Portal,

etc) and are related to the underlying Enterprise Portal objects that every portal solution contains. Therefore, you

should not have a problem making the changes, despite the product you have. One note, the PIA Portal, sometimes

called the Application Portal (this is delivered with all PeopleSoft product lines), may not contain some of the objects

described here. This document is only intended for complete portal solutions like the Enterprise Portal, Employee

Portal, and so forth.

STRUCTURE OF THIS RED PAPER

This Red Paper provides guidance modifying the look and feel of the PeopleSoft Enterprise Portal. It should only be

used as a guide for Further documentation consult PeopleBooks.

Keep in mind that PeopleSoft updates this document as needed so that it reflects the most current feedback we

receive from the field. Therefore, the structure, headings, content, and length of this document is likely to 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 posted on Customer Connection.

RELATED MATERIALS

This paper is not a general introduction to developing with PeopleSoft or making changes to a PeopleSoft Portal

environment. We assume that our readers are experienced IT professionals, with a good understanding of

PeopleSofts Internet and Portal Architecture. To take full advantage of the information covered in this document, we

recommend that you have a basic understanding of system administration, basic Internet architecture, relational

database concepts/SQL, the PeopleSoft Portal and how to use PeopleSoft applications.

This document is not intended to replace the documentation delivered with the PeopleTools 8 or 8.14 PeopleBooks.

We recommend that before you read this document, you read the PIA and Portal related information in the

PeopleTools PeopleBooks to ensure that you have a well-rounded understanding of our PIA technology. Note: Much

of the information in this document eventually gets incorporated into subsequent versions of the PeopleBooks.

Many of the fundamental concepts related to PIA are discussed in the following PeopleSoft PeopleBooks:


6/50

1/14/2002


PeopleSoft Internet Architecture Administration (PeopleTools|Administration Tools|PeopleSoft Internet

Architecture Administration)

Application Designer (Development Tools|Application Designer)

PeopleCode (Development Tools|PeopleCode Reference)

PeopleSoft 8 Enterprise Portal PeopleBook

PeopleSoft 8 Portals Application Fundamentals SP2 PeopleBook

Chapter 2 - Creating The Project

In this document, you will be guided through a step by step example of putting a new look and feel on the PeopleSoft

Enterprise Portal. These recommendations are based on PeopleSoft Consulting experience, along with tips and

methods that work best for maintainability and for future upgrades.

In this section, we will get started by creating a project.

STEP 1 OF 3: CREATE A NEW PROJECT INAPPLICATION DESIGNER

Open Application Designer and select File > New > Project. Then select File > Project Properties. Put it some

meaningful information.


7/50

1/14/2002


At this point, click File > Save Project Asand give your project a name, we are going to name ours

ACME_PORTAL_GUI. Click the OK button

STEP 2 OF 3: INSERT GUI RELATED OBJECTS INTO THE PROJECT

Now before we begin modifying objects, we should probably spend a few minutes organizing the project. We will do

this by adding GUI related objects into the project and then backing them all up (Step 3). It is not recommend to add

objects using the one at a time approach (adding objects as you go) as you may forget to make the necessary

backups.

Insert the GUI related HTML Objects:

From Application Designer, select Insert from the menu bar, then choose Objects into Project. For Object Type,

choose HTML. Put the name of the objects below into the name field (one at a time), highlight the object once you

find it in the search window and then click Insert. You can click Close once you are finished inserting all the HTML

objects. NOTE: Objects with an asterisk are the objects we will be significantly changing.

HTML Objects

EO_PE_LEFT_TEMP_END * HTML for bottom of left-navigation menu

EO_PE_LFT_TEMP_START * HTML for top of left-navigation menu


8/50

1/14/2002


PORTAL_HP_2COL_LAYOUT * template used to build 2-column homepage. We are

going to add all pagelets that we want all users to have on

their homepage (like the navigation, or Top Stories) to this

object.

PORTAL_HP_3COL_LAYOUT * template used to build 3-column homepage. We are going

to add all pagelets that we want all users to have on their

homepage (like the navigation, or Top Stories) to thisobject.

PORTAL_HP_COMPONENT * this is the only HTML template used to create the look

and feel of each pagelet.

PORTAL_HP_PERSONALIZE_LINKScontains html for content/layout links

PORTAL_HP_USER_TEMPLATEsurrounding template used when building any homepage.

We will be setting cellpadding and cellspacing HTML

attributes to zero.

PORTAL_LEFTNAV_EMP frame-based template with navigation on left, header attop, and target content in the main area. You may have

to change the pixel height for the top frame to fit match

the height of your header. The default setting is 110

pixels.

PORTAL_NAVIGATIONnon-framed template with navigation on left, header at top,

and content in the main area. We will be setting

cellpadding/cellspacing attributes to zero.

PORTAL_UNI_HEADER_NEW * this HTML object is used for every header in the portal.

We will modify the surrounding HTML significantly, based

on branding requirements.

PR_PORTAL_DEFAULT_USERA * this is the default user homepage (what a user sees when

they havent customized their own homepage). We will

modify this significantly, its the users first impression of

the portal and an opportunity to educate users on how to

personalize and utilize portal features.

PR_PORTAL_NAVIGATION_TEMPLAA this is the default non-framed template for the portal

(without left navigation). We will set cellpadding and

cellspacing attributes to zero.

Insert the GUI related Image Objects:

From Application Designer, select Insert from the menu bar, then choose Objects into Project. For Object Type,

choose Images. Put the name of the objects below into the name field (one at a time), highlight the object once you

find it in the search window and then click Insert. You can click Close once you are finished inserting all the

Images.


9/50

1/14/2002


Image Objects

PT_PORTAL_IC_CLOSE delete image for pagelets

PT_PORTAL_IC_COLLAPSE minimize image for pagelets

PT_PORTAL_IC_EDIT edit/customize image for pagelets

PT_PORTAL_IC_EXPAND maximize image for pagelets

Insert the Other GUI related Objects:

Other GUI Related Objects

EO_PE_LFT_DEFAULT default navigation splash page. We will not discuss the

customization of this object because it is self-

explanatory. Just open it in App Designer and modify to

meet branding requirements.

PSSTYLEDEFthis is the delivered style sheet. It contains all the class

attributes for PIA and the Portal. We will only make a few

changes, to reduce efforts during future upgrades and fixes.

I recommend created your own style sheet and referencing

it in PORTAL_UNI_HEADER_NEW.

STEP 3 OF 3: REVIEW THE OBJECTS WITHIN YOUR PROJECT

Now lets just double-check and make sure you have all the necessary objects within the project. My list includes

backups of the objects, which are not necessary if you have a demo database (AND YOU SHOULD!).


10/50

1/14/2002


HTML Objects Images and Other Objects


11/50

1/14/2002


Chapter 3 - Development Guidelines README

It is recommended that you DO NOT change any of the PeopleCode unless you have a real business case AND you

have a consultant or on-site developer that will maintain the modifications during PeopleTools and PeopleSoft

Application upgrades. You should be able to accomplish all your graphical needs through the objects mentioned in

this document. So whats a recommended solution? What options do you have for passing images, style sheets,

JavaScript files, and other objects to the HTML object if its not in the PeopleCode program? That answer is, create arepository. If your companies web infrastructure is well governed, then you already have this standard in placea

place on the network where web developers can re-use images, templates, style sheets, etc. If you do not, then you

can create one now on the desired web server within your network. For example:

C:\WebLogic\myserver\public_html\Common\css\ (for style sheets)

C:\WebLogic\myserver\public_html\Common\images\ (for images)

C:\WebLogic\myserver\public_html\Common\js\ (for JavaScript files)

You can now use this repository to access these objects from within the PeopleSoft HTML Objects. If your repository

resides within the same root directory as the PeopleSoft portal (as shown above), then you can use a relative path torequest the file within your HTML object, for example (ie,PORTAL_UNI_HEADER_NEW):

If you are using a repository elsewhere on your network, then youll have to use the fully qualified URL (of course):

Chapter 4: Begin Modifying Objects In Your Project

In this section, it is assumed that you have already created the basic HTML for your Interface (outside of

PeopleSoft), as well as all the necessary graphics.

BEFORE YOU BEGIN: TECHNICAL NOTES

As you scan through the HTML in these objects, you will notice that it is 85-95% HTML, with a few %Bind(:#)

embedded throughout (these are dynamic values). This should be easy to understand if your background is in ASP or

any other type of web development. For example:

In ASP:

In PeopleCode:

The value of the bind number can be found in the calling PeopleCode program, see Appendix A-1 for an example. You

can use this to identify dynamic images that you will not use and replace them with a URL to the image in your image


12/50

1/14/2002


repository (NOTE: The values for PORTAL_UNI_HEADER_NEW are listed in Appendix A-1, the others can be found

by looking at the calling PeopleCode program (This information is provided for every HTML Object).

It is not recommended to remove labels (like the word home or the Alt text) unless you will always cater to an

English speaking user base (no need for translation). Also do not remove any %Binds that reference JavaScript files,

forms, or the personalize links. There may be a business case for some of this (i.e., the search form), but keep in

mind that you are making a change to functionality if you do thisit then has to be maintained by your company.

LETS BEGIN! MODIFYING THE HTML OBJECTS

In this step, we will go over each HTML object one at a time. We use code examples, as well as tips, so it should be

fairly clear on what each object can do and the kind of flexibility you have.

Ill try and list the objects in the order that makes sense (the list above was in alphabetical order)so Ill begin withobjects that have the biggest impact on your GUI. I will give the following information about each object:

4 Description

4 Complete Example

4 What record and function is it being called from

4 Development Tip

HTML OBJECTS THAT WILL HAVE A MAJOR IMPACT ON GUI

The list of major HTML objects that will be covered in detail in this section are listed below. They will be covered in the

order listed.

4 PORTAL_UNI_HEADER_NEW

4 PORTAL_HP_COMPONENT

4 PORTAL_HP_3COL_LAYOUT


4 PR_PORTAL_DEFAULT_USERA

4 EO_PE_LFT_TEMP_START

4 EO_PE_LEFT_TEMP_END


13/50

1/14/2002


PORTAL_UNI_HEADER_NEW

Description: this HTML object is used for every header in the portal including transactions that bring in external

PeopleSoft transactions (like an HRMS self-service transaction). This object will undoubtedly have the biggest impact

on your interface. We will modify the surrounding HTML significantly, based on your branding requirements.

Complete Example: Appendix A-1

What record and function is it being called from:

- Record: WEBLIB_PORTAL.- Field: PORTAL_HEADER- Function: GetUniHeaderHTML and GetUniHeaderHTML_PIA

Development Tip:

As mentioned in the technical notes in Chapter 3, it is recommended that PeopleCode modifications are avoided and

to use an image/object repository for images, JavaScript files, and a custom style sheet. A color-coded HTML editorwill ensure the integrity of your HTML (unlike PeopleCode, Application Designer does not validate your HTML). If you

have a choice between using a GUI-based editor (like FrontPage) and a text-based editor (like EditPlus), then go with

the text-based editorGUI based editors put a lot of extra HTML tags into your source. Another useful tool for clean

up your HTML is call Tidy and can be found at: http://www.w3.org/People/Raggett/tidy/#help

Related Image Objects:

Here are the top navigation buttons:

4 PT_PORTAL_IC_HOME

4 PT_PORTAL_MENU

4 PT_PORTAL_FAVORITES

4

PT_PORTAL_FAVORITES_ADD4 PT_PORTAL_IC_HELP

4 PT_PORTAL_IC_LOGOUT


14/50

1/14/2002


PORTAL_HP_COMPONENT

Description: the only HTML template used to create the look and feel of each pagelet. We will modify the

surrounding HTML significantly, based on your branding requirements.

Complete Example: see below

What record, field and function is it being called from:

RECORD: FUNCLIB_PORTAL.TEMPLATE_FUNC.BuildStaticHPTemplate

Development Tip:

I recommend creating your own style tags for your pagelet tables. You can use either inline style tags (included in the

HTML tag) or embedded style tags (include the styles at the top of the HTML document, or referencing another style

sheet within your repository (see Chapter 2 for details). I do not recommended changing the delivered styles because

the style sheet is delivered with many updates and, of course, every PeopleTools and Application upgrade (so itsdifficult to maintain if youve customized many of the style attributes in PSSTYLEDEFN). If you use embedded styles

or you reference another style sheet, then you can put that in the tags of either

PORTAL_UNI_HEADER_NEW (which is the header for all pages), or you can put it in the tags of

PORTAL_HP_USER_TEMPLATE (which is used only for the homepageIt wraps around

PORTAL_UNI_HEADER_NEW). In the example below, Ive used inline style tags (in red) for the borders, embedded

styles (not shown) for menuFont and an image repository for new images (in green). One thing, I almost always

reload the database with my own remove/edit/minimize/maximize imagesreplacing the existing ones (all the images

you inserted into your project earlier).

%BIND(:2) %BIND(:1)

%BIND(:3)


15/50

1/14/2002


PORTAL_HP_3COL_LAYOUT

Description: template used to build 3-column homepage. So when a user personalizes their homepage, it uses the

HTML in this object to organize the pagelets they selected into the number of columns they selected (three, in this

case). We are going to add all pagelets that we want all users to have on their homepage (like the navigation, or Top

Stories) to this object.

Complete Example:Appendix B-2


- Record: FUNCLIB_PORTAL- Field: TEMPLATE_FUNC- Function: BuildStaticHPTemplate

Development Tip:

Our main goal here is to add pagelets to the homepage that every user must have. The best example of this is thenavigation, Top Stories, and/or Company News. There are several things you need to do when this is performed:

4 Copy and paste the HTML for the pagelet desired. Log into the portal. Click on Content and choose the

pagelets that should always be on the homepage. Click on the Personalize Layout link and place the pagelets

just like you want them and click save. Now go to Application Designer, File > Open > HTML and search on

%VP1 (or % and your UserID). Youll see a PR_PORTAL_VP1A and maybe a PR_PORTAL_VP1B (and maybe a

C). Open it up and look for your pagelets. Highlight and copy the pagelet HTML from

until you reach . Paste the HTML in the appropriate column of

PORTAL_HP_3COL_LAYOUT and most likely before the bind variables in each column(this is where the users

pagelets go, the ones they select themselves).

4 Add pagelet HTML to PORTAL_HP_2COL_LAYOUT. Copy and paste the HTML for each pagelet in this object

as well.

4 Remove the Delete button and the Minimize button (if desired). Youll see a long, long URL that has the

delivered image name, PT_PORTAL_IC_CLOSE, at the end of the line. Youll also notice the

onClick=SetRefreshHomepage event in the tag. Also, make sure you dont unintentionally remove the

Edit button on pagelets that have this feature.

4 Remove this pagelet from the content page, so as not to confuse your users. For this I recommend

creating a new folder in your Portal Registry and hiding the pagelets from users. You can do this by navigating to

Portal Administration > Base Portal Data > Pagelets > Add Folder. I created one called ACME Hidden Pagelets

and checked the box which says Hide from portal navigation (see PeopleBooks for information on adding folders

to the Portal Registry). Then navigate back to Portal Administration > Base Portal Data > Pagelets and look forthe pagelet that will always exist on the homepage. When you find it, click on the Change Parent Folder button

at the upper right. Look for ACME Hidden Pagelets (in my case) and click on the link to move your pagelet to this

folder. Click save.


16/50

1/14/2002


PORTAL_HP_2COL_LAYOUT

Description: template used to build 2-column homepage. So when a user personalizes their homepage, it uses the

HTML in this object to organize the pagelets they selected into the number of columns they selected (two, in this

case). We are going to add all pagelets that we want all users to have on their homepage (like the navigation, or TopStories) to this object.



- Record: FUNCLIB_PORTAL- Field: TEMPLATE_FUNC- Function: BuildStaticHPTemplate

Development Tip:

See development tip for PORTAL_HP_3COL_LAYOUT.


17/50

1/14/2002


PR_PORTAL_DEFAULT_USERA

Description: this is the default homepage for every user who has not customized their own homepage. This is your

users first impression of the portal which gives you a unique opportunity:

4 You can educate users on how to personalize their homepage.4 You can create a section on all the portal features and how to use them.

4 You can let them register into other areas of your enterprise.

4 And Im sure you can think of more information to display on this page.


Development Tip:

Heres a quick step-by-step on one way to create this page:

4 Login as VP1 or your UserID.

4 Click on Content and choose the pagelets you want first time users to see.

4 Click on the Personalize Layout link and place the pagelets just like you want them and save your page.

4 Now go to Application Designer, File > Open > HTML and search on %VP1 (or % and your UserID). Youll see a

PR_PORTAL_VP1A and maybe a PR_PORTAL_VP1B (and maybe a C), the bigger the HTML page the more

A,B, and Cs youll have.

4 Select File > Save As > PR_PORTAL_DEFAULT_USERA for PR_PORTAL_VP1A, and then save

PR_PORTAL_VP1B as PR_PORTAL_DEFAULT_USERB, etc. (click Yes when you are asked Content Object

already exists. Replace existing object?).

4 Change to the VP1 at the top to say Welcome or whatever. Click Save.

4 Login as a user who does not have a homepage. If you dont know of one, then simply delete yours. For

example, select File > Delete, Object Type = HTML, Name = %VP1A, then click Delete. Youll get the prompt,

Are you sure you want to delete PR_PORTAL_VP1A object?. Click Yes. Be careful! Okay, now login to the

portal and youll see the default homepage!

To add unique items (like special Welcome section, etc), simply add it directly to the HTML and then re-save it.

Remember, a user will never see this page again, once the user customizes their homepage.


18/50

1/14/2002


EO_PE_LFT_TEMP_START

Description: this is the HTML for top of left-navigation menu.

Complete Example:

Navigation Menu

Development Tip:

Many customers seem to want the same look as the navigation on the front page. As you can see from the example

above, Ive used the pagelet look used in PORTAL_HP_COMPONENT.

The bind variables you see in the vanilla object, are for the blue images (except for %Bind(:3)). You do not need theseif you are changing the look and feel.

Now you have to change the style classes in PSSTYLEDEF to change background colors. There are only a few, and

this one of the few times that I modify the style sheet. Here are the style classes and a description:

4 PSPNAVBACKGROUND: this is basic background color. The delivered object has that beige color. If you want it

to be white, then open the style sheet, find this class, then double-click on it. Then select the Background tab,

and change it to FFFFFF.

4 PSNAVPARENTLINK: this is basic font attributes for the parent links.

4 PSPNAVPARENTLINK: some tools versions have PSP, but many products are missing one this style and it

needs to be created. Select Insert from the menu bar, Insert Style Class. Give it a name, then copy the valuesfrom PSNAVPARENTLINK

4 PSPNAVSELPARENTBK: is the background color of the section you are in.

4 PSPNAVSELCHILDBK: is the background color of the LINK you have selected.


19/50

1/14/2002


The other classes that begin with PSPNAV. can help you modify the navigation attributes to meet your branding

requirements.


20/50

1/14/2002


EO_PE_LEFT_TEMP_END

Description: this is the HTML for bottom of left-navigation menu.

Complete Example:

Development Tip:

See development tips for EO_PE_LFT_TEMP_START.


21/50

1/14/2002


HTML OBJECTS THAT WILL HAVE A MINOR IMPACT ON GUI:

The list of minor HTML objects that will be covered in detail in this section are listed below, they be covered in the

same order listed below:

4 PORTAL_HP_PERSONALIZE_LINKS

4 PORTAL_HP_USER_TEMPLATE4 PORTAL_LEFTNAV_EMP

4 PORTAL_NAVIGATION

4 PR_PORTAL_NAVIGATION_TEMPLAA

Well start with PORTAL_HP_PERSONALIZE_LINKS on the next page!


22/50

1/14/2002


PORTAL_HP_PERSONALIZE_LINKS

Description: HTML used for Personalize Content and Layout links.

Complete Example:

|


- Record: WEBLIB_PORTAL

- Field: PORTAL_HOMEPAGE- Function: IScript_HPDefaultHdr

Development Tip:

The example included shows the use of images rather then text for the icons.


23/50

1/14/2002


PORTAL_HP_USER_TEMPLATE

Description: surrounding template used when building any homepage.

Complete Example:

%BIND(:2)

Development Tip:

The biggest thing here is to set cellpadding and cellspacing to zero, otherwise youll have a gap (a couple of pixels) on

the top, left, and right side of your browser. If you have styles that are unique to the homepage (like for pagelets), you

may include a style sheet on this page onlyinstead of PORTAL_UNI_HEADER_NEW, which is used for all

transactions.


24/50

1/14/2002


PORTAL_LEFTNAV_EMP

Description: frame-based template with navigation on left, header at top, and target content in the main area.

Complete Example:

Transaction Frame Template Dynamic New

ICType=Script&ICScriptProgramName=WEBLIB_PORTAL.PORTAL_HEADER.FieldFor

mula.IScript_UniHeader_Frame&isFrame=true&Bread=false


25/50

1/14/2002


PORTAL_NAVIGATION

Description: non-framed template with navigation on left, header at top, and content in the main area.

Development Tip:


the top, left, and right side of your browser. You may also want to cache the header (see PORTAL_LEFTNAV_EMP

for a syntax example and PeopleBooks for more info).


26/50

1/14/2002


PR_PORTAL_NAVIGATION_TEMPLAA

Description: this is the default non-framed template for the portal (without left navigation).

Development Tip:


the top, left, and right side of your browser. You may also want to cache the header (see PORTAL_LEFTNAV_EMP

for a syntax example and PeopleBooks for more info).


27/50

1/14/2002


YOU ARE FINISHED!

Congratulations, you should have a completely new interface on your PeopleSoft Portal! One last thing, keep a

backup on your web server of all your HTML objects that you modified, particularly the major ones. This way, after

doing an upgrade, you can manually apply your modifications. Chances are that you have already did this, when

developing the HTML modifications in your HTML editor.


28/50

1/14/2002


Frequently Asked Questions

FAQ: HOW CAN I FORCE REQUIRED PAGELETS ONTO EVERY USERS HOMEPAGE

(I.E., THE NAVIGATION, TOP STORIES, ETC)?

This is described on page 14 under the section discussing the PORTAL_HP_3COL_LAYOUT object. This HTML

object is used to organize the pagelets a user has selected into the appropriate columns they chose (2 or 3 column).

In the PORTAL_HP_3COL_LAYOUT section, we show you how to add all the pagelets that your users must have on

their homepage (like the navigation, Company News, or Top Stories) to this object. There is also a complete HTML

example in Appendix B-2.


29/50

1/14/2002


FAQ: DO I NEED TO DO ANYTHING TO THESE OBJECTS IF I MIGRATE THIS PROJECT

TO PRODUCTION?

Yes, if your Portal content providers are different in Development and Production. For example, your Portal content

provider for Development may be http://portal.acme.com/servlets/psportal/padev/ and in Production it may be

http://portal.acme.com/servlets/psportal/paprod/. So when you migrate your project, youll need to modify thefollowing objects:



4 PR_PORTAL_DEFAULT_USERA/B

Open these objects and do a Find/Replace on padev and replace it with paprod.


30/50

1/14/2002


FAQ: WHAT DO I NEED TO CHANGE IF I CHANGE THE PORTAL URL?

For example, if you change the Portal URL from: http://portal.acme.com/servlets/psportal/padev to

http://my.acme.com/servlets/psportal/padev

If you do this, then youll have to make sure the following URL specific settings are correct:

FTP Address

Youll need to verify if this is still correct. FTP settings can be changed using the PORTAL_FTP_URL.dms script

located in the \scripts directory. The file needs to be edited for the FTP username, password, and server

name. You could also update this by using URL Maintenance located on the following page (the URL Identifier is

called tasks):

4 Home > PeopleTools > Utilities > Use > URL Maintenance.

Report Node Distribution Address

The Report Node settings for the report repository node pointing to your psreports directory, which includes your ftp

server locations and settings. The report node can be edited from the following Page:

4 Menu > PeopleTools > Process Scheduler Manager > Use > Report Node Definitions

PeopleBooks Help URL

The URL to your PeopleBooks is specified in a property called helpUrl in your WebLogic configuration.properties file.

This file can be found at:

4 WebLogic\myserver\psftdocs\\configuration.properties

Single Signon (SSO) Authentication Token Domain

The trusted domain specified in your configuration.properties file will also need to be updated (if you are doing SSOand have provided this info to your config file). The attribute is called AuthTokenDomain. This file can be found at:

4 WebLogic\myserver\psftdocs\\configuration.properties


31/50

1/14/2002


FAQ: CAN I USE DIFFERENT TEMPLATES FOR DIFFERENT PAGELETS?

Yes,you can, but I do not recommend it because youll have to maintain the PeopleCode modifications during Tools

upgrades and Application Upgrades. But the questions been asked several times, so the following steps will show

you how to do it.

STEP 1: Open WEBLIB Record object: File

Open

Record

FUNCLIB_PORTAL

STEP 2: Open PeopleCode Program: FUNCLIB_PORTAL.TEMPLATE_FUNC.FieldFormula

STEP 3: Go to template function that builds homepage template:Function BuildStaticHPTemplate

STEP 4: Search for this line, its what calls the PORTAL_HP_COMPONENT template:

&CompData = GetHTMLText(HTML.PORTAL_HP_COMPONENT, &ActionBarHTML, &Cref.Label, &ComponentURL,

&Cref.ContentProvider, &Cref.URL);

STEP 5: Put condition statements based on the &Cref.Name (this is the pagelet unique identifier), NOT the label. For

example, I added the red PeopleCode to use a different template for pagelets that I wanted to cache:

Evaluate &Cref.Name

When "EO_PE_COMPANY_EVENTS"

/* Cache for 1 Day */

&CompData = GetHTMLText(HTML.CACHE_HP_COMPONENT, &ActionBarHTML,

&Cref.Label, &ComponentURL, &Cref.ContentProvider, &Cref.URL, "86400");

Break;

When = "HR_JOBPOSTINGS"

/* Cache for 1 Day */



Break;

When = "HR_COMPANY_DIRECTORY"

/* Cache for 1 Month */



Break;

When = "EO_PE_INLUMEN_MARKET_INDICES"

/* Cache for 15 minutes */



Break;


32/50

1/14/2002


When = "EO_PE_WEB_MAGAZINE"

/* Cache for 5 Days */



Break;

When-Other

&CompData = GetHTMLText(HTML.PORTAL_HP_COMPONENT, &ActionBarHTML,

&Cref.Label, &ComponentURL, &Cref.ContentProvider, &Cref.URL);

Break;

End-evaluate;

This will wrap the NO_BORDER_COMPONENT HTML template around my MAPQUEST pagelet (the label is Get

Directions). I recommend cloning PORTAL_HP_COMPONENT and then customizing it to suite your needs. Make

sure you HTML is correct!

TIP: The only time I use this is to CACHE individual pagelets that display the same content for everyone . So Ill

have a HTML pagelet template with the attribute tag, and Ill pass the number of seconds into the

GetHTMLText function. Ill use a Evaluate statement to check which pagelets will use this cache template and finish

with when-other for the PORTAL_HP_COMPONENT pagelets (no cache). Remember, if the pagelet has a edit icon,

or if the data displayed is specific to a user (like the dynamic role-based navigation), then you SHOULD NOT cache it.

NOTE: this will not affect overall performance of the portal. The only time this code is called is when a user changes

layout or content on their homepage, and they click save thats when the template is builtit is not built when they

login (hence, to view these changes you need to change something on your homepage via the Portal and hit save.)


33/50

1/14/2002


FAQ: HOW CAN I CHANGE THE HYPERLINK COLORS ON THE HOMEPAGE?

Open PSSTYLEDEF Style Sheet in Application Designer. Look for the PSHYPERLINK class and modify the

attributes. Dont forget to modify the pseudo classes listed on one of the property pages of PSHYPERLINK.

You should also specify some default font attributes for and in your own style sheet or an embedded style

sheet at the top of PORTAL_UNI_HEADER_NEW. This will give font attributes to text that has no class associated

with it. Heres an example:

td { font-family:arial; font-size:9pt; }

a:visited { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

a:link { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

a:hover { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

a:active { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

FAQ: HOW DO I CHANGE THE LOGIN, EXPIRE,AND OTHER WEBLOGIC PAGES?

Just modify the surrounding HTML. Do not change the values of forms or remove any server-side tags (the ones that

have these brackets. The files can be found at:

4 WebLogic\myserver\public_html\\

Heres the list of html files that can be modified to meet your branding requirements:

4 signin.html

4 expire.html

4 cookiesrequired.html

4 exception.html


34/50

1/14/2002


Appendix A-1: Bind Values #s for PORTAL_UNI_HEADER_NEW in 8.12

8.13

Heres the Vanilla code so you can see what all those bind variable values are. For example, BIND(:36) = is theimage for the Go button. Now you dont have to count them!!! This is the first call for PORTAL_UNI_HEADER_NEW,

which occurs about half-way down WEBLIB_PORTAL.PORTAL_HEADER.FieldFormula in the GetUniHeaderHTML. I

do not recommend changing these values (please read Chapter 3 in this document, as well as the

PORTAL_UNI_HEADER_NEW section), as they may change with PeopleTools releases.

Bind value shown at left, starting with PT_PORTAL_BUG:

&UniHeaderHTML = GetHTMLText(HTML.PORTAL_UNI_HEADER_NEW,

1.&Response.GetImageURL(Image.PT_PORTAL_BUG),2.&Response.GetImageURL(Image.PT_PORTAL_BLUE_CORNER),3.&Response.GetImageURL(Image.PT_PORTAL_IC_HOME),4.&Response.GetImageURL(Image.PT_PORTAL_MENU),

5.&Response.GetImageURL(Image.PT_PORTAL_FAVORITES),6.&Response.GetImageURL(Image.PT_PORTAL_FAVORITES_ADD),7.&Response.GetImageURL(Image.PT_PORTAL_IC_HELP),8.&Response.GetImageURL(Image.PT_PORTAL_IC_LOGOUT),9.&Response.GetImageURL(Image.PT_PORTAL_BEIGE_GRAD),10. &Response.GetImageURL(Image.PT_PORTAL_GLOBE),11. &Response.GetImageURL(Image.PT_PORTAL_BEIGE_STRETCH),12. &Response.GetImageURL(Image.PT_PORTAL_BLUE_GRAD),13. &Response.GetImageURL(Image.PT_PORTAL_SHADOW_GRAD),14. &Response.GetImageURL(Image.PT_PORTAL_BLUE_SHADOW),15. &Response.GetStyleSheetURL(StyleSheet.PSSTYLEDEF),16. &homeURL,

17. &startURL,18. &editFavURL,19. &addFavURL,20. &logoutURL,21. MsgGetText(95, 400, "Return Home"),22. MsgGetText(95, 401, "Home"),23. MsgGetText(95, 402, "Return to Menu"),24. MsgGetText(95, 403, "Menu"),25. MsgGetText(95, 404, "Favorites"),26. MsgGetText(95, 405, "Favorites"),27. MsgGetText(95, 406, "Add to Favorites"),28. MsgGetText(95, 407, "Add to Favorites"),

29. MsgGetText(95, 410, "Help"),30. MsgGetText(95, 411, "Help"),31. MsgGetText(95, 408, "Sign out"),32. MsgGetText(95, 409, "Sign out"),33. &Greeting,34. &getHelp,35. &srchURL,36. &Response.GetImageURL(Image.PT_PORTAL_GO),


35/50

1/14/2002


37. &PersonalizeHTML,38. "",39. &SearchLabel,40. &addFavURLPContent,41. &addFavURLPActual,42. &startHelpComment,43. &endHelpComment,

44. &HelpNotFound,45. &homepageJS,46. &Request.GetParameter("PortalTargetFrame"),47. "");

README: You can add your own from %BIND(:48) and on. As you can see by the 8.14 version, numbers 48 and 49

are also taken. If you really must modify this PeopleCode, then I recommend adding about 15 blank bind values

before starting yours, which will leave room for any additional parameters from PeopleSoft future releases.


36/50

1/14/2002


Appendix A-2: Bind Value #s for PORTAL_UNI_HEADER_NEW in 8.14

8.15

Heres the Vanilla code so you can see what all those bind variable values are. For example, BIND(:36) is the image

for the Go button. Now you dont have to count them! This is the first call for PORTAL_UNI_HEADER_NEW object,

which occurs about half-way down WEBLIB_PORTAL.PORTAL_HEADER.FieldFormula in the GetUniHeaderHTMLfunction. I do not recommend changing these values (please read Part 2 in this document, as well as the

PORTAL_UNI_HEADER_NEW section), as they may change with PeopleTools releases.

Bind value shown at left, starting with PT_PORTAL_BUG:

&UniHeaderHTML = GetHTMLText(HTML.PORTAL_UNI_HEADER_NEW,

1. &Response.GetImageURL(Image.PT_PORTAL_BUG),

2. &Response.GetImageURL(Image.PT_PORTAL_BLUE_CORNER),

3. &Response.GetImageURL(Image.PT_PORTAL_IC_HOME),

4. &Response.GetImageURL(Image.PT_PORTAL_MENU),

5. &Response.GetImageURL(Image.PT_PORTAL_FAVORITES),

6. &Response.GetImageURL(Image.PT_PORTAL_FAVORITES_ADD),

7. &Response.GetImageURL(Image.PT_PORTAL_IC_HELP),8. &Response.GetImageURL(Image.PT_PORTAL_IC_LOGOUT),

9. &Response.GetImageURL(Image.PT_PORTAL_BEIGE_GRAD),

10. &Response.GetImageURL(Image.PT_PORTAL_GLOBE),

11. &Response.GetImageURL(Image.PT_PORTAL_BEIGE_STRETCH),

12. &Response.GetImageURL(Image.PT_PORTAL_BLUE_GRAD),

13. &Response.GetImageURL(Image.PT_PORTAL_SHADOW_GRAD),

14. &Response.GetImageURL(Image.PT_PORTAL_BLUE_SHADOW),

15. &Response.GetStyleSheetURL(StyleSheet.PSSTYLEDEF),

16. &homeURL,

17. &startURL,

18. &editFavURL,

19. &addFavURL,20. &logoutURL,

21. MsgGetText(95, 400, "Return Home"),

22. MsgGetText(95, 401, "Home"),

23. MsgGetText(95, 402, "Return to Menu"),

24. MsgGetText(95, 403, "Menu"),

25. MsgGetText(95, 404, "Favorites"),

26. MsgGetText(95, 405, "Favorites"),

27. MsgGetText(95, 406, "Add to Favorites"),

28. MsgGetText(95, 407, "Add to Favorites"),

29. MsgGetText(95, 410, "Help"),

30. MsgGetText(95, 411, "Help"),

31. MsgGetText(95, 408, "Sign out"),32. MsgGetText(95, 409, "Sign out"),

33. &Greeting,

34. &getHelp,

35. &srchURL,

36. &Response.GetImageURL(Image.PT_PORTAL_GO),

37. &PersonalizeHTML,

38. "",


37/50

1/14/2002


39. &SearchLabel,

40. &addFavURLPContent,

41. &addFavURLPActual,

42. &startHelpComment,

43. &endHelpComment,

44. &HelpNotFound,

45. &homepageJS,

46. &Request.GetParameter("PortalTargetFrame"),47."",

48. &WLHTML,

49. &domainScript);

README: You can add your own from %BIND(:48) and on. As you can see by this 8.14 version, numbers 48 and 49

have been added from the 8.13 Tools release. If you really must modify this PeopleCode, then I recommend adding

about 15 blank bind values before starting yours, which will leave room for any additional parameters from PeopleSoft

future releases.


38/50

1/14/2002


Appendix B-1: PORTAL_UNI_HEADER_NEW

NOTE: I hard-coded the text labels for the Navigation menu so you could easily identify the document.

%bind(:49)%bind(:47)

td { font-family:arial; font-size:9pt; }

td.menuFont { font-family:arial; font-size:9pt; color: #ffffff; text-decoration: none }

a.menuFont:visited { font-family:arial; font-size:9pt; color: #ffffff; text-decoration: none }

a.menuFont:link { font-family:arial; font-size:9pt; color: #ffffff; text-decoration: none }

a.menuFont:hover { font-family:arial; font-size:9pt; color: #ffffff; text-decoration: underline }

a.menuFont:active { font-family:arial; font-size:9pt; color: #ffffff; text-decoration: none }

a:visited { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

a:link { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

a:hover { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }a:active { font-family:arial; font-size:9pt; color: #5c93ae; text-decoration: underline }

select.SearchClass { font-family:arial; font-size:11px; color: #333333; }

input.SearchClass { font-family:verdana; font-size:9px; color: #333333; }

var preloadFlag = false;

var isNav = false;

var isIE = false;

if (navigator.appName == "Netscape" ) {

isNav = true;}

else {isIE = true;}

function changeCursor(object)

{

if (!isNav ) {

object.style.cursor='hand';

}

}

function handleResize() {if (isNav ) {

// force reload for Navigator

//location.reload();

}

return true;

}

function getHelp(helpExists)


39/50

1/14/2002


{

var targetFrameName = "%bind(:46)";

if (helpExists) {

if (targetFrameName != "" && top.frames[targetFrameName]) {

if (top.frames[targetFrameName].document.forms["HelpURL"] != null &&

top.frames[targetFrameName].document.forms["HelpURL"].ICHelpUrl != null &&

top.frames[targetFrameName].document.forms["HelpURL"].ICHelpUrl.value != null)

{

helpURL = top.frames[targetFrameName].document.forms["HelpURL"].ICHelpUrl.value;

helpWindows = window.open(helpURL);

}

else

alert("%Bind(:44)");

}

else {

if (document.forms["HelpURL"] != null &&

document.forms["HelpURL"].ICHelpUrl != null &&

document.forms["HelpURL"].ICHelpUrl.value != null)

{

helpWindows = window.open(document.forms["HelpURL"].ICHelpUrl.value);}

else

{


}

}

} else


}

%bind(:45)


40/50

1/14/2002


var d = new Date()

// Get the day and date... mprado PSFT

var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var monthname=new

Array("January","February","March","April","May","June","July","August","September","October","November","Decemb

er")

document.write(weekday[d.getDay()] + ", ")

document.write(monthname[d.getMonth()] + " ")

document.write(d.getDate() + ", ")

document.write(d.getFullYear())

document.write(" ")

// Get the time ... mprado PSFT

// Calculate AM/PM... mprado PSFT

var ampm=" AM";

var intHours=d.getHours()

var intMin = d.getMinutes()

if (intHours > 12) {

ampm=" PM";

intHours = intHours - 12;

}

document.write(intHours)

document.write(":")

if (intMin < 10 )intMin = "0" + intMin;

document.write(intMin)

document.write(ampm);


41/50

1/14/2002


Home

Menu

Add To Favorites

Favorites

Contact Us

Help

Sign Off

Search

%BIND(:37)

%bind(:38)

%bind(:33)


42/50

1/14/2002


Appendix B-2: PORTAL_HP_3COL_LAYOUT

Navigation Menu

?ICType=Script&ICScriptProgramName=WEBLIB_CSS_PORT.PORTAL_HEADER.FieldFormula.IS

cript_GetCategories&PORTALPARAM_COMPWIDTH=Narrow

%BIND(:1)


43/50

1/14/2002


Headlines

?ICType=Script&ICScriptProgramName=WEBLIB_EO_PE_NW.ISCRIPT1.FieldFormula.IScript_Top

Story&ID=0000000002&PORTALPARAM_COMPWIDTH=Narrow

News Connections


44/50

1/14/2002


?ICType=Script&ICScriptProgramName=WEBLIB_EO_PE_NW.ISCRIPT1.FieldFormula.IScript_IntN

ews&ID=0000000001&PORTALPARAM_COMPWIDTH=Narrow

%BIND(:2)

%BIND(:3)

---- END OF PORTAL_HP_3COL_LAYOUT


45/50

1/14/2002


Appendix B-3: PR_PORTAL_DEFAULT_USERA

Welcome to the ACME Portal

ICType=Script&ICScriptProgramName=WEBLIB_PORTAL.PORTAL_HOMEPAGE.FieldFormula.IScript_HPDefaultHdr

Navigation Menu

?ICType=Script&ICScriptProgramName=WEBLIB_CSS_PORT.PORTAL_HEADER.FieldFormula.IS

cript_GetCategories&PORTALPARAM_COMPWIDTH=Narrow


46/50

1/14/2002


Top Stories

?ICType=Script&ICScriptProgramName=WEBLIB_EO_PE_NW.ISCRIPT1.FieldFormula.IScript_Top

Story&ID=0000000002&PORTALPARAM_COMPWIDTH=Narrow


47/50

1/14/2002


VALIGN="top">

Company News

?ICType=Script&ICScriptProgramName=WEBLIB_EO_PE_NW.ISCRIPT1.FieldFormula.IScript_IntN

ews&ID=0000000001&PORTALPARAM_COMPWIDTH=Narrow

2001 ACME Corporation. All Rights Reserved.

Appendix C Special Notices


48/50

1/14/2002


All material contained in this documentation is proprietary and confidential to PeopleSoft, Inc., is protected by

copyright laws, and subject to the nondisclosure provisions of the applicable PeopleSoft agreement. No part of this

documentation may be reproduced, stored in a retrieval system, or transmitted in any form or by any means,

including, but not limited to, electronic, graphic, mechanical, photocopying, recording, or otherwise without the prior

written permission of PeopleSoft, Inc.

This documentation is subject to change without notice, and PeopleSoft, Inc. does not warrant that the material

contained in this documentation is free of errors. Any errors found in this document should be reported to PeopleSoft,Inc. in writing.

The copyrighted software that accompanies this documentation is licensed for use only in strict accordance with the

applicable license agreement, which should be read carefully as it governs the terms of use of the software and this

documentation, including the disclosure thereof. See Customer Connection or PeopleBooks for more information

about what publications are considered to be product documentation.

PeopleSoft, the PeopleSoft logo, PeopleTools, PS/nVision, PeopleCode, PeopleBooks, and Vantive are registered

trademarks, and PeopleTalkand "People power the internet." are trademarks of PeopleSoft, Inc. All other company

and product names may be trademarks of their respective owners. The information contained herein is subject to

change without notice.

Information in this book was developed in conjunction with use of the product specified, and is limited in application to

those specific hardware and software products and levels.

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

The information contained in this document has not been submitted to any formal PeopleSoft test and is distributed

AS IS. 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 PeopleSoft 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. Any pointers in this publication to external Web sites are provided for

convenience only and do not in any manner serve as an endorsement of these Web sites.


49/50

1/14/2002


Appendix D Validation and Feedback

This section documents that real-world validation that this Red Paper has received.

CUSTOMER VALIDATION

PeopleSoft is working with PeopleSoft customers to get feedback and validation on this document. Lessons learned

from these customer experiences will be posted here.

FIELD VALIDATION

PeopleSoft Consulting has provided feedback and validation on this document. Additional lessons learned from field

experience will be posted here.


50/50

1/14/2002

Appendix D Revision History

Authors

Maurico Prado, Project Manager for PSC Technology Solutions Delivery was the lead author of this Red Paper.

Mr. Prados project experience revolves around the analysis, design, and implementation of a wide variety of Internet-

based applications. Mr. Prado is one of the main representatives for PeopleSofts Portal technology, and he has a

solid understanding of PeopleSoft 8s Integration technologies.

Reviewers

The following people reviewed this Red Paper:

Andrew Bediz PeopleSoft Consulting

Edgar Vasquez PeopleSoft Consulting

John Schroeder PeopleTools Portal Technologies Product Manager

Revision History

1. December 18, 2001 First Publication

peoplesoft enterprise portal gui customization tips

Documents