peoplesoft 8.4 enterprise portal gui customization tips

PeopleSoft 8.4 Enterprise Portal

GUI Customization Tips

Contains:

PeopleSoft Enterprise Portal GUI Tips

Author: Mauricio Prado

PeopleSoft Consulting Technology Solutions Delivery

PeopleSoft 8.4 Enterprise Portal GUI Customization Tips

November 13, 2002

Comments on this document can be submitted to: Comments on this document can be submitted to [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.

mailto:[email protected]



Table of Contents

TABLE OF CONTENTS 3

CHAPTER 1 - INTRODUCTION 5 Structure of this Red Paper 5 Related Materials 5

CHAPTER 2 - GETTING STARTED 7 Background Information 7 Step 1 of 3: Create a new project in Application Designer 8 Step 2 of 3: Insert GUI related definitions into the project 9 Step 3 of 3: Review the definitions within your project 13

CHAPTER 3 - DEVELOPMENT GUIDELINES README 14 Before You Begin: Technical Notes 14

CHAPTER 4: BEGIN MODIFYING DEFINITIONS IN YOUR PROJECT 14 Let’s Begin! Modifying the HTML Definitions 14 HTML definitions that will have a MAJOR impact on GUI 15 HTML definitions that will have a MINOR impact on GUI: 22 You are finished! 26

FREQUENTLY ASKED QUESTIONS 27 FAQ: How can I have different color pagelets for different columns on my homepage? 27 FAQ: Do I need to do anything to these definitions if I migrate this project to Production? 30 FAQ: Can I use different templates for different pagelets? 30 FAQ: Can I store and reference images, style sheets, and JavaScript outside of PeopleSoft? 30 FAQ: How can I change the hyperlink colors on the homepage? 32 FAQ: How do I change the login, expire, and other WebLogic pages? 32

APPENDIX A-1: BIND VALUES #’S FOR PORTAL_UNI_HEADER_NEW IN 8.40 33

APPENDIX B-1: PORTAL_UNI_HEADER_NEW 35

APPENDIX C – SPECIAL NOTICES 36

APPENDIX D – VALIDATION AND FEEDBACK 38

3

Customer Validation 38 Field Validation 38

APPENDIX D – REVISION HISTORY 39

11/13/2002

Chapter 1 - Introduction

This Red Paper is a practical guide for a technical audience—Web and application developers who implement, maintain, or develop applications using 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 complete ‘face-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" challenges encountered in the field.

This document can be used for the following releases:

• PeopleSoft 8.4 Enterprise Portal

• PeopleTools 8.40xx through PeopleTools 8.41xxx

The definitions in this document are related to the underlying PeopleSoft Enterprise Portal definitions that every portal solution contains. It was developed with PeopleSoft 8.4 Enterprise Portal and PeopleTools 8.41. For information on the previous release of the PeopleSoft Enterprise Portal, SP1 or SP2, please see the Red Paper library and look for the “Portal GUI Tips Red Paper” for SP1/SP2.

STRUCTURE OF THIS RED PAPER This Red Paper provides guidance on 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 PeopleSoft’s 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 PeopleBooks. We recommend that before you read this document, you read the PeopleTools and Portal related information in PeopleBooks to ensure that you have a well-rounded understanding of our PIA (PeopleSoft Internet Architecture) 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 PeopleSoft development are discussed in the following PeopleSoft PeopleBooks:

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

Application Designer (Development Tools | Application Designer)

© Copyright PeopleSoft Corporation 2001. All rights reserved. 5

11/13/2002 PeopleCode (Development Tools | PeopleCode Reference)

PeopleTools 8.4 PeopleBook

PeopleSoft 8.4 Enterprise Portal PeopleBook

PeopleSoft Portal Technology


11/13/2002

Chapter 2 - Getting Started

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

B.Y.O.G., a fictional company created for this exercise, will be used to demonstrate the process of updating a vanilla PeopleSoft Portal with the branding requirements of the BYOG company. I did not take the time to make the B.YO.G. interface attractive, my goal was to put in as many different scenarios (such as, requirements) so that you have different options based on the branding requirements of your organization. As a reference, this is the end result of our GUI update project:

.

© Copyright PeopleSoft Corporation 2002. All rights reserved.

s, etc).

Multiple Pagelet Templates: BYOG requires each column tohave separate style attributes for the pagelet templates (colors, borders, margin

Personalization: the personalization links must be prominently displayed onevery tabbed page.

Tab Page Is Highlighted: the tab page must be a different color from the rest of the page.

Prominent Navigation: give navigation a different background color—matching the left-navigation template menu.

7

11/13/2002

STEP 1 OF 3: CREATE A NEW PROJECT IN APPLICATION DESIGNER In this section, we will get started by creating a project. Open Application Designer and select File > New > Project. Then select File > Project Properties. Put in some meaningful information to help describe this Project:

At this point, click File > Save Project As and give your project a name, we are going to name ours BYOG_PORTAL_GUI. Click the ‘OK’ button


11/13/2002

STEP 2 OF 3: INSERT GUI RELATED DEFINITIONS INTO THE PROJECT Now before we begin modifying definitions (a.k.a., “objects”), we should probably spend a few minutes organizing the project. We will do this by adding GUI related definitions into the project (step 2) and then reviewing the inventory of definitions within the project (step 3).

Insert the GUI related HTML Definitions:

From Application Designer, select Insert from the menu bar, then choose Definitions into Project. For Definition Type, choose HTML. Put the name of the definitions below into the name field (one at a time), highlight the definition once you find it in the search window and then click “Insert”. You can click “Close” once you are finished inserting all the HTML definitions. NOTE: Definitions with asterisks are the definitions we will make significant changes to.

HTML Definitions

EPPLN_LN_MGR_TEMPLATE_END* HTML for bottom of left-navigation menu. The bgcolor is hardcoded in this definition (it’s not a style class).

EPPLN_NAV_SHOW_MENU* HTML for top of left-navigation menu. The bgcolor is hardcoded in this definition (it’s not a style class)

PORTAL_GOBTN_NOSAVEWARN Only needed if image size is different then vanilla width/height.

PORTAL_HDR_ADDTOFAV_SAVEWARN Top Menu Bar: “Add to Favorites” html (template version)

PORTAL_HEADER_FAVORITES Top Menu Bar: “Add to Favorites” html (homepage version)

PORTAL_HEADER_HELP Top Menu Bar: “Help” html

PORTAL_HEADER_WL Top Menu Bar: “Worklist” html

PORTAL_HP_2COL_LAYOUT * Template used to build 2-column homepage.

PORTAL_HP_3COL_LAYOUT * Template used to build 3-column homepage.

PORTAL_HP_ACTIVE_TAB HTML for “Active Tab” of a tabbed homepage

PORTAL_HP_INACTIVE_TAB HTML for “Inactive Tab(s)” of a tabbed homepage

PORTAL_HP_TABS HTML template for multi-tab layout

PORTAL_HP_COMPONENT * This is the only HTML template used to create the look and feel of each pagelet.

PORTAL_HP_PERSONALIZE_LINKS_TD Contains html for content/layout links

PORTAL_HP_USER_TEMPLATE Surrounding template used when building any homepage. We will also set the background for the active tab page.

PORTAL_LEFTNAV_EMP Frame-based template with navigation on left, header at top, 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.


11/13/2002

PORTAL_NAVIGATION Non-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 definition is used for every header in the portal. We will modify the surrounding HTML significantly, based on branding requirements.

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

From Application Designer, select Insert from the menu bar, then choose Definitions into Project. For Definition Type, choose Images. Put the name of the definitions below into the name field (one at a time), highlight the definition once you find it in the search window and then click “Insert”. You can click “Close” once you are finished inserting all the Images.

Image Definitions Description Vanilla BYOG Image

EPPLN_BLUE_CORNER Top navigation image

EPPLN_BLUE_CORNER_LR Bottom navigation image

PS_HIDE_MENU “Hide Nav” navigation image

PT_SHOW_MENU Left nav “show menu” icon

PT_HOME_TAB_ACTIVE_CENTER Active tab background image

PT_HOME_TAB_ACTIVE_LEFT Left corner of active tab

unchanged

PT_HOME_TAB_INACTIVE_CENTER Inactive tab background image

PT_HOME_TAB_INACTIVE_LEFT Left corner of inactive tab

unchanged

PT_HOME_TAB_INACTIVE_RIGHT Right corner of inactive tab

unchanged

PT_HOME_TAB_LINE Background of top tab page

PT_NAV_CLOSED_FLDR Main Navigation image (bullet)

PT_NAV_OPEN_FLDR Main Navigation image (bullet)


11/13/2002

PT_PORTAL_BEIGE_STRETCH I used this to substitute my own image

PT_PORTAL_GO Search image (“Go” button)

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

PT_PORTAL_IC_HELP Help image for pagelets ?? Not used for this example

PT_PORTAL_IC_HOME Home icon

PT_PORTAL_IC_LOGOUT Logout icon

PT_PORTAL_SHADOW_GRAD I used this to substitute my own image

PT_PORTAL_WORKLIST Worklist icon

PT_SHOW_MENU Left nav “show menu” icon

PT_PORTAL_FAVORITES_ADD Add to Favorites Icon

Insert other GUI related Definitions:

Other GUI Related Definitions

EPPSTYLEDEF_SUB (StyleSheet) Style sheet for Enterprise Navigation

StyleSheet.PTSTYLEDEF (StyleSheet) This is the delivered PeopleTools style sheet. We will only make a few changes, to reduce efforts during future upgrades and fixes. For advanced graphic designers, you may consider adding style classes to the embedded style sheet in PORTAL_UNI_HEADER_NEW, this will give you more flexibility with the attributes used within a class. You could also reference an external style sheet if you already have a corporate repository or standard.

Record.WEBLIB_PORTAL (Optional Record) I only put this definition in here because it makes many of the requests to the definitions listed in this document. We will not be making any modifications to this object in this Red Paper. As a


11/13/2002 reference, I list it here to give you more flexibility in rendering the look-and-feel of your PeopleSoft Portal.


11/13/2002

STEP 3 OF 3: REVIEW THE DEFINITIONS WITHIN YOUR PROJECT Now let’s just double check and make sure you have all the necessary definitions within the project.

HTML Definitions Images and Other Definitions

.


11/13/2002

Chapter 3 - Development Guidelines README

BEFORE YOU BEGIN: TECHNICAL NOTES

What’s a Bind Variable?

As you scan through the HTML in these definitions, you will notice that it is 85-95% HTML, with a few bind values (%Bind(:#)) embedded throughout (this is dynamic content). This should be easy to understand if you have a development background or a background in server-side scripting like, ASP, JSP, Perl, etc. Regardless, the concept is fairly easy to grasp, even if you do not have experience with these other languages. The example below shows how dynamic content is embedded into static content. An ASP comparison would look like this:

In ASP: <a href=”<%=strHomeLink%>”><IMG SRC=”/images/home.gif” border=0></A> In PeopleCode: <a href=”%Bind(:16)”><IMG SRC=”/images/home.gif” border=0></A> The value of the bind number can be found in the calling PeopleCode program that binds the object to the HTML definition. 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 definition).

I do not recommend removing labels (the “Alt” text for example) unless you will always cater to an English-speaking user population (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 these (i.e., the search form), but keep in mind that you are making a change to functionality if you do this—which then has to be maintained by your company.

Should I Modify PeopleCode?

We will not be changing any PeopleCode during this exercise. My goal is to demonstrate an “easy to develop, easy to maintain” solution that can meet the requirements of most organizations. The PeopleSoft Portal offers a lot of flexibility with its branding, so if your branding requirements dictate a more complex solution with some minor or major PeopleCode modifications, then you can dig deeper into the PeopleCode objects mentioned in this document. That said, please keep in mind that your staff will maintain these modifications during PeopleTools Upgrades and Application upgrades (as well as updates and patches). Also, remember document all your modifications in your technical documentation (so that you may refer to them during upgrades, etc).

Chapter 4: Begin Modifying Definitions 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.

LET’S BEGIN! MODIFYING THE HTML DEFINITIONS In this step, we will go over each HTML definition one at a time. We use code examples, as well as tips, so it should be fairly clear on what each definition can do and the kind of flexibility you have.


11/13/2002 I’ll try and list the definitions in the order that makes sense (the list above was in alphabetical order, with a few exceptions)—so I’ll begin with definitions that have the biggest impact on your GUI. I will give the following information about each definition:

Description

Complete Example

What record and function it is being called from

Development Tip

HTML DEFINITIONS THAT WILL HAVE A MAJOR IMPACT ON GUI The list of major HTML definitions that will be covered in detail in this section are listed below, they be covered in the same order listed below: PORTAL_UNI_HEADER_NEW PORTAL_HP_COMPONENT EPPLN_LN_MGR_TEMPLATE_END EPPLN_NAV_SHOW_MENU

PORTAL_UNI_HEADER_NEW

Description: this HTML definition is used for every header in the portal including transactions that bring in external PeopleSoft transactions (like an HRMS self-service transaction). This definition will undoubtedly have the biggest impact on your interface. We will modify the surrounding HTML significantly, based on your branding requirements.

Complete Example: Appendix B-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 be minimized as much as possible. The easiest way of getting around making modifications to the calling program (WEBLI_PORTAL.PORTAL_HEADER.FieldFormulta.GetUniHeaderHTML and GetUniHeaderHTML _PIA) is to substitute your images for vanilla images that are not being used. In this example, we substituted PT_PORTAL_BEIGE_STRETCH with one of our own images. We then simply placed the Bind (#11) in the appropriate part of our HTML (see Appendix B-1). If this is not sufficient, then you’ll have to either make changes to the PeopleCode functions mentioned above, or use an image/object repository for images, JavaScript files, and a custom style sheet (as described in the FAQs).

Lastly, a color-coded HTML editor will ensure the integrity of your HTML (unlike the PeopleCode Editor, Application Designer does not validate your HTML). If you have a choice between using a GUI-based editor vs. a text-based editor (like EditPlus), then go with the text-based editor—GUI based editors put a lot of extra HTML tags into your source. Another useful tool to help clean up your HTML is called Tidy and can be found at: http://www.w3.org/People/Raggett/tidy/


http://www.w3.org/People/Raggett/tidy/

11/13/2002 Related Image Definitions:

For a complete of all the objects that are binded to this object (the Bind variables), see Appendix 1-A. On that note, here’s a list of

PT_PORTAL_IC_HOME PT_PORTAL_FAVORITES_ADD PT_PORTAL_IC_HELP PT_PORTAL_IC_LOGOUT


11/13/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. The main reason for this is contention. If you use the delivered class names and you integrate with another PeopleSoft system (like HRMS) it may bring over the HRMS style sheet if there is HRMS content on the Portal homepage. This means you may have a two style sheets on your homepage – both with attributes about the same style class. You may see this with PSPAGE, for example, when you use the Company Directory pagelet.

So you can use either inline style tags (included in the HTML tag), embedded style tags (include the styles at the top of the HTML document (like I did with PORTAL_2/3COL_LAYOUT), or referencing another style sheet within your repository (see the end of Chapter 2 for details). I do not recommended changing the delivered styles to much because the style sheet is delivered with almost every PeopleTools and Application update or upgrade (so it’s difficult to maintain if you’ve customized many of the style attributes in PTSTYLEDEF, as they’ll need to be re-applied after the upgrade/update).

In the example below, I have renamed the class names and I used an embedded style sheet in PORTAL_2COL_LAYOUT and PORTAL_3COL_LAYOUT (see Appendix B-2 for an example of an embedded style sheet in the “Layout” templates). The content in purple and blue is regular HTML, feel free to copy and modify it to meet your needs.

  <TABLE id="%BIND(:5)" CLASS="BYOG_PAGELET" WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0"> <TR> <TD CLASS="BYOG_PAGELETHEADER" VALIGN=CENTER> %BIND(:1) %BIND(:2)</nobr> </TD> </TR> <TR> <TD CLASS="BYOG_PAGELETBODY" WIDTH="100%"> <Pagelet Name="%BIND(:2)"> <Source Pagelet="%BIND(:4)" href="%BIND(:3)" /> </Pagelet> </TD> </TR> </TABLE> <BR>

11/13/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 definition to organize the pagelets they selected into the number of columns they selected (three, in this case). The example I am presenting here simply has an embedded style sheet for the pagelet style classes.

Complete Example:



<STYLE type="text/css">

TD.BYOG_PAGELETHEADER {

font-family:arial;font-size: 12.5px; font-weight: bold; color: #FFFFFF;

padding-LEFT: 3px; padding-TOP: 2px; padding-BOTTOM: 1px;

background-color: #FD5305;

}

TD.BYOG_PAGELETBODY {

border-top: 1px solid #0404FC; border-bottom: 1px solid #0404FC; border-left: none; border-right: 1px solid #0404FC;

padding-LEFT: 3px; padding-TOP: 1px; padding-BOTTOM: 3px; padding-RIGHT: 3px; background-color: #FFFFA3;

}

</STYLE>

<table width="100%"><tr><td width="23%" valign="top">

%BIND(:1)

</td><td width="6">

</td><td width="43%" valign="top">

%BIND(:2)

</td><td width="6">

</td><td width="33%" valign="top">

%BIND(:3)

</td></tr>

</table>

11/13/2002

What record and function is it being called from: - Compiled code – this is requested by the underlying PeopleTools layer.

Development Tip:

In 8.4 we do not have access to the calling program, therefore we don’t have the same amount of flexibility to pass additional information into this template (or to even use a different template as a showed in my 8.1x version of this Red Paper). The example I am presenting here is how to have different color pagelets (or different attributes in general – border, no border, etc) based on the column it’s in. You could probably extend this functionality by using the ID in the <table> tag (if you don’t know what I’m talking about then don’t worry). I do this by putting DIV tags within each column, essentially naming them. See the first FAQ for the code example.

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 definition to organize the pagelets they selected into the number of columns they selected (two, in this case).

Complete Example: See PORTAL_HP_3COL_LAYOUT

What record and function is it being called from: - Compiled code – this is requested by the underlying PeopleTools layer.

Development Tip:

See development tip for PORTAL_HP_3COL_LAYOUT.


11/13/2002

EPPLN_NAV_SHOW_MENU

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

Complete Example: <DIV ID="SHOW" STYLE="position:absolute; left:0; top:%Bind(:4);z-index:1; visibility:hidden;"> <A href='Javascript:if (parent.frames["NAV"]) {parent.frames["NAV"].toggleNav();}'><IMG SRC="%Bind(:1)" border=0 Alt="%Bind(:6)"></A>

</DIV>

<DIV ID="NAVHDR" STYLE="position:absolute; left:0; top:%Bind(:4);z-index:1; visibility:%BIND(:8);"> <TABLE width="%BIND(:5)" border="0" cellspacing="0" cellpadding="0" height="20"> <TR><TD valign="bottom" bgcolor="#0404FC" height="20" WIDTH="100%">%Bind(:3)</TD> <TD valign="top" bgcolor="#0404FC" height="20" width="24"><IMG SRC="%BIND(:9)" border=0></TD> </TR></TABLE>

</DIV><SCRIPT language="javascript" src="%Bind(:2)"></SCRIPT>

</BODY></HTML>

Development Tip:

Okay, it looks like they hardcoded the top background color in the nav. So you’ll either have to add a style class or change the color code (see my code change in RED). That’s the ONLY thing I changed in this definition.

Now you may also want to change the background colors in the navigation. This has nothing to do with this object, but I figure this is a good place to mention it. Most of the style classes for the navigation can be found in PTSTYLEDEF (Style Sheet). There are only a few classes and this one of the few times that I modify the style sheet. Here are the style classes and a description:

PTSTYLEDEF.PTNAVSELPARENTBK: see screen shot below

PTSTYLEDEF.PTNAVSELCHILDBK: see screen shot below

PTSTYLEDEF.PTNAVSELCHILDLINK: see screen shot below

EPPSTYLEDEF_SUB.EPPADMINBAR: I think this is the description of the navigation menu.

EPPSTYLEDEF_SUB.EPPPAGELET: see screen shot below

EPPSTYLEDEF_SUB.EPPPAGELETHEADER: see screen shot below

Related Images:

PT_NAV_OPEN_FLDR: open folder bullet

PT_NAV_CLOSED_FLDR: closed folder bullet

EPPLN_BLUE_CORNER: upper right corner of navigation

EPPLN_BLUE_CORNER_LR: lower right corner of navigation

PS_HIDE_MENU: Hide menu image at upper left

PT_SHOW_MENU: Show menu button which appears when menu is hidden


11/13/2002

EPPLN_LN_MGR_TEMPLATE_END

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

Complete Example: <TABLE WIDTH="%BIND(:2)" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="19">

<TR><TD BGCOLOR="#0404FC" HEIGHT="19" WIDTH="100%"> </TD>

<TD BGCOLOR="#0404FC" VALIGN="bottom" HEIGHT="19" WIDTH="24"><IMG SRC="%BIND(:1)" BORDER="0" valign="absbottom"></TD>

</TR></TABLE>

</BODY></HTML>

Development Tip:

See development tips for EO_PE_LFT_TEMP_START. Here’s a screen shot of what mine looks like:

© Copyright PeopleSoft Corporation 2002. All rights reserved.

EPPSTYLEDEF_SUB.EPPPAGELETHEADER: Text and background attributes

EPPSTYLEDEF_SUB.EPPPAGELET: background and border

PTSTYLEDEF.PTNAVSELCHILDBK: background color for selected link
PTSTYLEDEF.PTNAVSELCHILDLINK:Font attributes for selected link
PTSTYLEDEF.PTNAVSELPARENTBK:background color for selected section

21

11/13/2002

HTML DEFINITIONS THAT WILL HAVE A MINOR IMPACT ON GUI: The list of minor HTML definitions that will be covered in detail in this section are listed below, they be covered in the same order listed: PORTAL_HP_PERSONALIZE_LINKS_TD PORTAL_HP_USER_TEMPLATE PORTAL_LEFTNAV_EMP PORTAL_NAVIGATION PR_PORTAL_NAVIGATION_TEMPLAA

We’ll start with PORTAL_HP_PERSONALIZE_LINKS_TD on the next page!


11/13/2002

PORTAL_HP_PERSONALIZE_LINKS_TD

Description: HTML used for Personalize Content and Layout links.

Complete Example:  <TD class='BYOG_HOMEPAGEACTIVE' COLSPAN='%BIND(:7)' HEIGHT="20" VALIGN="middle" ALIGN="left"> <DIV ID=BYOG_PERSONALIZE_LOCATION><table cellpadding=0 cellspacing=0 width=199> <TR><TD><HR SIZE=2 WIDTH=20 COLOR=#FD5305></TD><TD align=center class=BYOG_PERSONALIZE> Personalize This Page >> <A onClick="%BIND(:6);return true;" HREF="%BIND(:2)">%BIND(:3)</A> | <A onClick="%BIND(:6);return true;" HREF="%BIND(:4)">%BIND(:5)</A> </TD></TR></TABLE></DIV></TD>

What record and function is it being called from: - Record: WEBLIB_PORTAL - Field: PORTAL_HOMEPAGE - Function: GetHPTabHTML

Development Tip:

The example includes a DIV tag that I use to place the HTML in a specific location on the page (see screen shot below).

HTML.PORTAL_HP_PERSONALIZE_LINKS_TD

11/13/2002

PORTAL_HP_USER_TEMPLATE

Description: surrounding template used when building any homepage.

Complete Example:

None, I only added some class names to some of the table tags.

Development Tip:

The biggest thing here is to set cellpadding and cellspacing to zero, otherwise you’ll 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 only—instead of PORTAL_UNI_HEADER_NEW, which is used for all transactions.

PORTAL_LEFTNAV_EMP

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

Complete Example: None, I didn’t change anything.

Development Tip:

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_NAVIGATION

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

Complete Example:

None, I didn’t change anything.

Development Tip:

The biggest thing here is to set cellpadding and cellspacing to zero, otherwise you’ll have a gap (a couple of pixels) on the top, left, and right side of your browser.


11/13/2002

PR_PORTAL_NAVIGATION_TEMPLAA

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

Complete Example:

None, I didn’t change anything.

Development Tip:

The biggest thing here is to set cellpadding and cellspacing to zero, otherwise you’ll have a gap (a couple of pixels) on the top, left, and right side of your browser.


11/13/2002

YOU ARE FINISHED! Congratulations, you should have a completely new interface on your PeopleSoft Portal!


11/13/2002

Frequently Asked Questions

FAQ: HOW CAN I HAVE DIFFERENT COLOR PAGELETS FOR DIFFERENT

COLUMNS ON MY HOMEPAGE? In 8.4 we do not have access to the calling program for PORTAL_HP_3COL_LAYOUT and PORTAL_HP_2COL_LAYOUT, therefore we don’t have the same amount of flexibility to pass additional information into this template (or to even use a different template as a showed in my 8.1x version of this Red Paper). The example I am presenting here is how to have different color pagelets (or different attributes in general – border, no border, etc) based on the column it’s in. You could probably extend this functionality to have attributes for specific pagelets, like the Enterprise Menu, by using the ID in the <table> tag (if you don’t know what I’m talking about then don’t worry).

I do this by putting DIV tags within each column, essentially naming them. Here’s the HTML example.






.PSCOLUMN1 TD.BYOG_PAGELETHEADER {



background-color: #0404FC;

}




background-color: #FCBC03;

}




background-color: #FD5305;

}

11/13/2002 </STYLE>

<!—[continued on next page]

mprado **** **** **** **** **** **** **** **** **** ****

**** class attributes for BYOG_PAGELETBODY

**** **** **** **** **** **** **** **** **** **** **** -->


.PSCOLUMN1 TD.BYOG_PAGELETBODY {

border-top: 1px solid #0404FC; border-bottom: 1px solid #0404FC; border-left: none; border-right: 1px solid #0404FC;

padding-LEFT: 3px; padding-TOP: 1px; padding-BOTTOM: 3px; padding-RIGHT: 3px; background-color: #FFFFA3;

}


border-top: 1px solid #FCBC03; border-bottom: 1px solid #FCBC03; border-left: 1px solid #FCBC03; border-right: 1px solid #FCBC03;

padding-LEFT: 3px; padding-TOP: 1px; padding-BOTTOM: 3px; padding-RIGHT: 3px; background-color: #FFFFFF;

}


border-top: 1px solid #FD5305; border-bottom: 1px solid #FD5305; border-left: 1px solid #FD5305; border-right: 1px solid #FD5305;

padding-LEFT: 3px; padding-TOP: 1px; padding-BOTTOM: 3px; padding-RIGHT: 3px; background-color: #FFFFFF;

}

</STYLE>

<table width="100%" cellpadding=0 cellspacing=0>

<tr>

<td width="23%" valign="top">

<br><br>



<DIV CLASS="PSCOLUMN1">

%BIND(:1)

</DIV>

</td>

<td width="9">

11/13/2002 </td>



%BIND(:2)

</DIV>

</td>

<td width="9">

</td>



%BIND(:3)

</DIV>

</td>

<td width="4">

</td>

</tr>

</table>


11/13/2002

FAQ: DO I NEED TO DO ANYTHING TO THESE DEFINITIONS IF I MIGRATE THIS

PROJECT TO PRODUCTION? Nope, not in Portal 8.4x

FAQ: CAN I USE DIFFERENT TEMPLATES FOR DIFFERENT PAGELETS? Nope, not in Portal 8.4x. See the first FAQ on the previous page for a workaround.

FAQ: CAN I STORE AND REFERENCE IMAGES, STYLE SHEETS, AND

JAVASCRIPT OUTSIDE OF PEOPLESOFT? Yes, you have three choices for modifying and creating images, style sheets, and JavaScript:

• You can either modify the existing images and style sheets

• You can create new images and style sheets and update the PeopleCode requests

• You can leverage a centralized repository of images, style sheets and JavaScript files (which is what we did in the previous version of this document).

Note: There are pros and cons to all these options, so you will have to weigh your options based on the development environment your organization currently maintains. I will say that with the release of 8.4, it is now more palatable to maintain all your object definitions within PeopleSoft. For those organizations that have a centralized, corporate repository for maintaining web related objects – like images, style sheets and JavaScripts – you may reference these objects within any of PeopleSoft’s HTML definitions. For example: (i.e., within PORTAL_UNI_HEADER_NEW (below) or PORTAL_HP_COMPONENT, etc)

Image Example:

<a proxied=”false” href=”%Bind(:16)”>

<IMG border=0 SRC=”http://library.byog.com/common/images/BYOG_home.gif” ></A>

Style Sheet Example:

<LINK REL="stylesheet" HREF="http://library.byog.com/common/ccs/mybyog.css" TYPE="text/css">

JavaScript Example:

<SCRIPT LANGUAGE="javascript" SRC=" http://library.byog.com/common/javascript/mouseover.js"></SCRIPT>

NOTE: You can also use relative paths for all of these links, for example: “/common/css/mybyog.css”. This is assuming that the web server referenced is the same as the PeopleSoft Portals, or that an alias has been created.


11/13/2002


11/13/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. Don’t forget to modify the pseudo classes listed on one of the property pages of PSHYPERLINK.

You should also specify some default font attributes for <A> and <TD> 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. Here’s an example:

<STYLE TYPE="text/css"> 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 } </STYLE>

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 dynamic bind values (i.e., server-side tags (the ones that have <% blah-blah %> these brackets). The files can be found at:

\\bea\wlserver6.1\config\peoplesoft\applications\PORTAL\WEB-INF\psftdocs\ps

Here’s the list of html files that can be modified to meet your branding requirements:

signin.html

expire.html

cookiesrequired.html

exception.html

sslrequired.html


11/13/2002

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

Here’s the Vanilla code so you can see what all those bind variable values are. For example, BIND(:35) is the worklist HTML (&WLHTML). Now you don’t 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 unless you must (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. &FavoritesHTML,

6. &AddToFavoritesHTML,

7. &HelpHTML,

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. &AddToFavFormHTML,

19. &logoutURL,

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

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

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

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

24. MsgGetText(95, 408, "Sign out"),

25. &Greeting,


11/13/2002 26. &srchURL,

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

28. "",

29. &BreadHTML,

30. &SearchLabel,

31. &HelpJSHTML,

32. "",

33. &strTitle,

34. "",

35. &WLHTML,

36. &domainScript,

37. &Response.GetJavaScriptURL(HTML.PT_SAVEWARNINGSCRIPT),

38. &GoSaveWarnHTML,

39. &SaveWarnCrossDomainScript,

40. &Response.GetImageURL(Image.PT_HOME_TAB_ACTIVE_CENTER),

41. &Response.GetImageURL(Image.PT_HOME_TAB_INACTIVE_CENTER),

42. &Response.GetImageURL(Image.PT_HOME_TAB_LINE),

43. %Request.ExpireMeta);

README: You can add your own from %BIND(:44) and on. If you really must modify this PeopleCode, then I recommend adding about 10 “blank” bind values before starting yours, which will leave room for any additional parameters from PeopleSoft future releases.


11/13/2002

Appendix B-1: PORTAL_UNI_HEADER_NEW <HTML> <HEAD>  %bind(:36) <TITLE>%bind(:33)</TITLE> <STYLE TYPE="text/css"> INPUT.BYOG_SEARCHBOX{font-family:arial;font-size: 9px; color: #333333;background-color: #EEEEEE; } TD.BYOG_SEARCH {font-family:arial;font-size: 11.5px; font-weight: bold; color: #999999; padding-top: 14px; } #BYOG_PERSONALIZE_LOCATION {position: absolute; top: 120px; left:0px; visibility: visible;} .BYOG_HOMEPAGEACTIVE { background-color: #ddddee; padding-TOP: 0px; padding-BOTTOM: 0px; } .BYOG_PERSONALIZE{font-family:arial;font-size: 11.5px; font-weight: bold; color: #333333; padding-TOP: 2px; padding-BOTTOM: 3px; border-top: 1px solid #FD5305; border-bottom: 2px groove #FD5305; border-left: 1px solid #FD5305; border-right: 2px groove #FD5305; background-color:#ffffff; } .greeting { color: blue; font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold} .pthomepagetabactive { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000000; font-size: 9pt; background-image: url(%bind(:40)); border-style: none;} .pthomepagetabinactive { font-size: 9pt; color: #000000; font-family: Arial, Helvetica, sans-serif; border: #FFFFFF none; background-image: url(%bind(:41))} .pthomepagetabline { background-image: url(%bind(:42))} </STYLE>    <script language='javascript' src='%Bind(:37)'></script> <script language='javascript' src='%Bind(:39)'></script>

11/13/2002  %bind(:32)  %bind(:43) <LINK REL="stylesheet" HREF="%Bind(:15)" TYPE="text/css"> </HEAD> <BODY MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" BOTTOMMARGIN="0" RIGHTMARGIN="0" class='PSPAGE'> <form name="form1" method="post" action=%bind(:26)> <TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=100%> <TR> <TD align=left valign=top NOWRAP=true ROWSPAN=3><a proxied=false %bind(:16)><img src="%BIND(:1)" border=0 alt="%bind(:20)"></A></TD> <TD ALIGN=RIGHT VALIGN=TOP NOWRAP=true><TABLE CELLPADDING=0 CELLSPACING=0 > <TR> <TD align=RIGHT valign=TOP NOWRAP=true><img src="%BIND(:13)"><a proxied=false %bind(:16)><img src="%BIND(:3)" alt="%bind(:20)" border="0" align="absmiddle"></a>%BIND(:35)%BIND(:5)%BIND(:6)%BIND(:7)<nobr><a %bind(:19)><img src="%BIND(:8)" alt="%bind(:24)" border="0" Align="absmiddle"></a></TD> </TR></TABLE> </TR> <TR> <TD ALIGN=RIGHT class=BYOG_SEARCH> %BIND(:30)  <input type="text" name="SEARCH_TEXT" size=15 CLASS=BYOG_SEARCHBOX>  %BIND(:38) </TD></TR> <TR><TD ALIGN=center CLASS=greeting> %bind(:25) </TD> </TR> <TR> <TD ALIGN=left COLSPAN=3><img src=%bind(:11) width=100% height=1><BR><BR></TD></TR> </TABLE>  %BIND(:18)    %BIND(:28) </form>  %BIND(:34)  %bind(:29) </BODY> </HTML>

Appendix C – Special Notices © Copyright PeopleSoft Corporation 2002. All rights reserved. 36

11/13/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 PeopleTalk and "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 PeopleSoft may have reviewed each item 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.


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


11/13/2002


Appendix D – Revision History

Authors

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

Mr. Prado’s 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 PeopleSoft’s Portal technology, and he has a solid understanding of PeopleSoft’s AppConnect technologies.

Reviewers

The following people reviewed this Red Paper:

Andrew Bediz – PeopleSoft Consulting

Edgar Vasquez – PeopleSoft Consulting

Revision History

8.1x version:

1. September 24, 2001: Created document.

2. October 10, 2001: Updated to Red Paper Format

3. November 1, 2001: Revised based on reviewer comments 8.4 version:

1. August 22, 2002: Created document.

2. October, 2003: Feedback from the field

3. November 5, 2002: Revised based on reviewer comments

peoplesoft 8.4 enterprise portal gui customization tips

Documents