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 redpaper@peoplesoft.com. 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.
Table of Contents
TABLE OF CONTENTS CHAPTER 1 - INTRODUCTION Structure of this Red Paper Related Materials CHAPTER 2 - GETTING STARTED Background Information Step 1 of 3: Create a new project in Application Designer Step 2 of 3: Insert GUI related definitions into the project Step 3 of 3: Review the definitions within your project CHAPTER 3 - DEVELOPMENT GUIDELINES Before You Begin: Technical Notes CHAPTER 4: BEGIN MODIFYING DEFINITIONS IN YOUR PROJECT Lets Begin! Modifying the HTML Definitions HTML definitions that will have a MAJOR impact on GUI HTML definitions that will have a MINOR impact on GUI: You are finished! FREQUENTLY ASKED QUESTIONS FAQ: How can I have different color pagelets for different columns on my homepage? FAQ: Do I need to do anything to these definitions if I migrate this project to Production? FAQ: Can I use different templates for different pagelets? FAQ: Can I store and reference images, style sheets, and JavaScript outside of PeopleSoft? FAQ: How can I change the hyperlink colors on the homepage? FAQ: How do I change the login, expire, and other WebLogic pages? APPENDIX A-1: BIND VALUES #S FOR PORTAL_UNI_HEADER_NEW IN 8.40 APPENDIX B-1: PORTAL_UNI_HEADER_NEW APPENDIX C SPECIAL NOTICES APPENDIX D VALIDATION AND FEEDBACK README 3 5 5 5 7 7 8 9 13 14 14 14 14 15 22 26 27 27 30 30 30 32 32 33 35 36 38
Customer Validation Field Validation APPENDIX D REVISION HISTORY
38 38 39
11/13/2002
Chapter 1 - Introduction
This Red Paper is a practical guide for a technical audienceWeb 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 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 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.
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:
Personalization: the personalization links must be prominently displayed on every tabbed page.
Tab Page Is Highlighted: the tab page must be a different color from the rest of the page.
Multiple Pagelet Templates: BYOG requires each column to have separate style attributes for the pagelet templates (colors, borders, margins, etc). Prominent Navigation: give navigation a different background colormatching the left-navigation template menu.
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* EPPLN_NAV_SHOW_MENU* PORTAL_GOBTN_NOSAVEWARN HTML for bottom of left-navigation menu. The bgcolor is hardcoded in this definition (its not a style class). HTML for top of left-navigation menu. The bgcolor is hardcoded in this definition (its not a style class) 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 PORTAL_HEADER_HELP PORTAL_HEADER_WL PORTAL_HP_2COL_LAYOUT * PORTAL_HP_3COL_LAYOUT * PORTAL_HP_ACTIVE_TAB PORTAL_HP_INACTIVE_TAB PORTAL_HP_TABS PORTAL_HP_COMPONENT * Top Menu Bar: Add to Favorites html (homepage version) Top Menu Bar: Help html Top Menu Bar: Worklist html Template used to build 2-column homepage. Template used to build 3-column homepage. HTML for Active Tab of a tabbed homepage HTML for Inactive Tab(s) of a tabbed homepage HTML template for multi-tab layout 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 PORTAL_LEFTNAV_EMP Surrounding template used when building any homepage. We will also set the background for the active tab page. 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. This HTML definition is used for every header in the portal. We will modify the surrounding HTML significantly, based on branding requirements. This is the default non-framed template for the portal (without left navigation). We will set cellpadding and cellspacing attributes to zero.
PORTAL_UNI_HEADER_NEW *
PR_PORTAL_NAVIGATION_TEMPLAA
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 EPPLN_BLUE_CORNER EPPLN_BLUE_CORNER_LR PS_HIDE_MENU PT_SHOW_MENU PT_HOME_TAB_ACTIVE_CENTER PT_HOME_TAB_ACTIVE_LEFT Description Top navigation image Bottom navigation image Hide Nav navigation image Left nav show menu icon Active tab background image Left corner of active tab unchanged Vanilla BYOG Image
PT_HOME_TAB_INACTIVE_CENTER Inactive tab background image PT_HOME_TAB_INACTIVE_LEFT PT_HOME_TAB_INACTIVE_RIGHT PT_HOME_TAB_LINE PT_NAV_CLOSED_FLDR PT_NAV_OPEN_FLDR Left corner of inactive tab Right corner of inactive tab Background of top tab page Main Navigation image (bullet) Main Navigation image (bullet) unchanged unchanged
10
11/13/2002 PT_PORTAL_BEIGE_STRETCH I used this to substitute my own image Search image (Go button) Delete image for pagelets Minimize image for pagelets Edit/customize image for pagelets Maximize image for pagelets Help image for pagelets ?? Not used for this example
PT_PORTAL_GO PT_PORTAL_IC_CLOSE PT_PORTAL_IC_COLLAPSE PT_PORTAL_IC_EDIT
PT_PORTAL_IC_EXPAND PT_PORTAL_IC_HELP
PT_PORTAL_IC_HOME PT_PORTAL_IC_LOGOUT PT_PORTAL_SHADOW_GRAD
Home icon Logout icon I used this to substitute my own image Worklist icon Left nav show menu icon Add to Favorites Icon
PT_PORTAL_WORKLIST PT_SHOW_MENU PT_PORTAL_FAVORITES_ADD
Insert other GUI related Definitions:

Other GUI Related Definitions EPPSTYLEDEF_SUB StyleSheet.PTSTYLEDEF (StyleSheet) Style sheet for Enterprise Navigation (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. (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
Record.WEBLIB_PORTAL
11
11/13/2002 reference, I list it here to give you more flexibility in rendering the lookand-feel of your PeopleSoft Portal.
12
11/13/2002
STEP 3 OF 3: REVIEW THE DEFINITIONS WITHIN YOUR PROJECT

Now lets just double check and make sure you have all the necessary definitions within the project.
HTML Definitions
Images and Other Definitions
13
11/13/2002
Chapter 3 - Development Guidelines BEFORE YOU BEGIN: TECHNICAL NOTES

Whats a Bind Variable?
README
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 thiswhich 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.
LETS 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.
14
11/13/2002 Ill try and list the definitions in the order that makes sense (the list above was in alphabetical order, with a few exceptions)so Ill 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 youll 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 editorGUI 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/
15
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, heres a list of PT_PORTAL_IC_HOME PT_PORTAL_FAVORITES_ADD PT_PORTAL_IC_HELP PT_PORTAL_IC_LOGOUT
16
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 its difficult to maintain if youve customized many of the style attributes in PTSTYLEDEF, as theyll need to be reapplied 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> 
17
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; borderright: 1px solid #0404FC; padding-LEFT: 3px; padding-TOP: 1px; padding-BOTTOM: 3px; padding-RIGHT: 3px; backgroundcolor: #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>
18
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 dont 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 its in. You could probably extend this functionality by using the ID in the <table> tag (if you dont know what Im talking about then dont 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.
19
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 youll either have to add a style class or change the color code (see my code change in RED). Thats 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
20
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. Heres a screen shot of what mine looks like:
EPPSTYLEDEF_SUB.EPPPAGELETHEADER: Text and background attributes
EPPSTYLEDEF_SUB.EPPPAGELET: background and border
PTSTYLEDEF.PTNAVSELPARENTBK: background color for selected section
PTSTYLEDEF.PTNAVSELCHILDBK: background color for selected link
PTSTYLEDEF.PTNAVSELCHILDLINK: Font attributes for selected link
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
Well start with PORTAL_HP_PERSONALIZE_LINKS_TD on the next page!
22
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
23
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 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.
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 didnt 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 didnt change anything. 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.
24
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 didnt change anything. 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.
25
11/13/2002
YOU ARE FINISHED!

Congratulations, you should have a completely new interface on your PeopleSoft Portal!
26
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 dont 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 its 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 dont know what Im talking about then dont worry). I do this by putting DIV tags within each column, essentially naming them. Heres the HTML example.
  <STYLE type="text/css"> .PSCOLUMN1 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: #0404FC; } .PSCOLUMN2 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: #FCBC03; } .PSCOLUMN3 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; }
27
11/13/2002
</STYLE> <![continued on next page]
mprado **** **** **** **** **** **** **** **** **** **** **** class attributes for BYOG_PAGELETBODY **** **** **** **** **** **** **** **** **** **** **** --> <STYLE type="text/css"> .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; backgroundcolor: #FFFFA3; } .PSCOLUMN2 TD.BYOG_PAGELETBODY { 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; backgroundcolor: #FFFFFF; } .PSCOLUMN3 TD.BYOG_PAGELETBODY { 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; backgroundcolor: #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">

28
11/13/2002
</td> <td width="42%" valign="top">
<DIV CLASS="PSCOLUMN2"> %BIND(:2) </DIV>
</td> <td width="9"> </td> <td width="32%" valign="top">
<DIV CLASS="PSCOLUMN3"> %BIND(:3) </DIV>
</td> <td width="4"> </td> </tr> </table>
29
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 PeopleSofts 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.
30
11/13/2002
31
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. 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 <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. Heres 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
Heres the list of html files that can be modified to meet your branding requirements: signin.html expire.html cookiesrequired.html exception.html sslrequired.html
32
11/13/2002
Appendix A-1: Bind Values #s for PORTAL_UNI_HEADER_NEW in 8.40

Heres 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 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 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,
33
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.
34
11/13/2002
Appendix B-1: PORTAL_UNI_HEADER_NEW

<HTML> <HEAD> <!-* ****************************************************************** * DO NOT REMOVE -- Permission To Use Information * ****************************************************************** * The following template only has the dynamic content necessary to * enable all the Portal functionality. I have removed all static HTML * so that you may freely arrange the header (such as, with your own HTML) * to meet the branding requirements of your company. * * This template was created in conjunction with the following document: * Portal 8.4 GUI Tips Red Paper [which can be found in the link below] * * http://www.peoplesoft.com/corp/en/products/technology/literature_library.asp#red * ****************************************************************** * Author: Mauricio Prado * PeopleSoft Consulting * * Date: August 2002 * ****************************************************************** * Additional Technical Information: * ****************************************************************** * This object is requested by the following functions: * 1. WEBLIB_PORTAL.PORTAL_HEADER.FieldFormula.GetUniHeaderHTML * 2. WEBLIB_PORTAL.PORTAL_HEADER.FieldFormula.GetUniHeaderHTML_PIA * * The BIND() variables are passed into the function as parameters * If you wish to change a value of a BIND, you can do so by customizing the * the value in the functions mentioned above. * ****************************************************************** * You may use this template as desired if you do not remove this section * DO NOT REMOVE -- Permission To Use Information ********************************************************************--> %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; fontweight: bold} .pthomepagetabactive { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #000000; font-size: 9pt; background-image: url(%bind(:40)); borderstyle: none;} .pthomepagetabinactive { font-size: 9pt; color: #000000; font-family: Arial, Helvetica, sansserif; 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>
35
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)"><!*** BEGIN HOME LINK *** --><a proxied=false %bind(:16)><!-*** HOME IMAGE *** (PT_PORTAL_IC_HOME) --><img src="%BIND(:3)" alt="%bind(:20)" border="0" align="absmiddle"></a><!-*** END HOME LINK **** --><!-*** WORKLIST LINK (HTML.PORTAL_HEADER_WL) **** -->%BIND(:35)<!-*** FAVORITES LINK (HTML.PORTAL_HEADER_FAVORITES) **** -->%BIND(:5)<!-*** ADD TO FAVORITES LINK (HTML.PORTAL_HEADER_ADDTOFAVORITES) *** -->%BIND(:6)<!-*** HELP LINK (HTML.PORTAL_HEADER_HELP) **** -->%BIND(:7)<!-*** BEGIN SIGNOUT LINK (&logoutURL, etc ) **** --><!-*** LOGOUT LINK *** --><nobr><a %bind(:19)><!-*** LOGOUT IMAGE (PT_PORTAL_IC_LOGOUT) --><img src="%BIND(:8)" alt="%bind(:24)" border="0" Align="absmiddle"></a></TD><!-*** END LOGOUT LINK *** --> </TR></TABLE><!-*** END TOP MENU BAR --> </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

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.
37
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.
38
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. 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 PeopleSofts 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
39

PeopleSoft 8.4 Enterprise Portal GUI Customization Tips

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

PeopleSoft 8.4 Enterprise Portal GUI Customization Tips

Transféré par

Droits d'auteur :

Formats disponibles

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

Customer Validation Field Validation APPENDIX D REVISION HISTORY

STRUCTURE OF THIS RED PAPER

Copyright PeopleSoft Corporation 2001. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

Chapter 2 - Getting Started BACKGROUND INFORMATION

Copyright PeopleSoft Corporation 2002. All rights reserved.

STEP 1 OF 3: CREATE A NEW PROJECT IN APPLICATION DESIGNER

Copyright PeopleSoft Corporation 2002. All rights reserved.

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

Insert the GUI related HTML Definitions:

Copyright PeopleSoft Corporation 2002. All rights reserved.

Insert the GUI related Image Definitions:

Copyright PeopleSoft Corporation 2002. All rights reserved.

PT_PORTAL_GO PT_PORTAL_IC_CLOSE PT_PORTAL_IC_COLLAPSE PT_PORTAL_IC_EDIT

PT_PORTAL_IC_HOME PT_PORTAL_IC_LOGOUT PT_PORTAL_SHADOW_GRAD

PT_PORTAL_WORKLIST PT_SHOW_MENU PT_PORTAL_FAVORITES_ADD

Insert other GUI related Definitions:

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

STEP 3 OF 3: REVIEW THE DEFINITIONS WITHIN YOUR PROJECT

Images and Other Definitions

Copyright PeopleSoft Corporation 2002. All rights reserved.

Chapter 3 - Development Guidelines BEFORE YOU BEGIN: TECHNICAL NOTES

Should I Modify PeopleCode?

Chapter 4: Begin Modifying Definitions In Your Project

LETS BEGIN! MODIFYING THE HTML DEFINITIONS

HTML DEFINITIONS THAT WILL HAVE A MAJOR IMPACT ON GUI

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

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

What record and function is it being called from:

Compiled code this is requested by the underlying PeopleTools layer.

Compiled code this is requested by the underlying PeopleTools layer.

Development Tip: See development tip for PORTAL_HP_3COL_LAYOUT.

Copyright PeopleSoft Corporation 2002. All rights reserved.

EPPSTYLEDEF_SUB.EPPPAGELETHEADER: Text and background attributes

EPPSTYLEDEF_SUB.EPPPAGELET: background and border

PTSTYLEDEF.PTNAVSELPARENTBK: background color for selected section

PTSTYLEDEF.PTNAVSELCHILDBK: background color for selected link

PTSTYLEDEF.PTNAVSELCHILDLINK: Font attributes for selected link

Copyright PeopleSoft Corporation 2002. All rights reserved.

HTML DEFINITIONS THAT WILL HAVE A MINOR IMPACT ON GUI:

Well start with PORTAL_HP_PERSONALIZE_LINKS_TD on the next page!

Copyright PeopleSoft Corporation 2002. All rights reserved.

Record: WEBLIB_PORTAL Field: PORTAL_HOMEPAGE Function: GetHPTabHTML

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

YOU ARE FINISHED!

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

</td> <td width="9">

<DIV CLASS="PSCOLUMN2"> %BIND(:2) </DIV>

</td> <td width="9"> </td> <td width="32%" valign="top">

<DIV CLASS="PSCOLUMN3"> %BIND(:3) </DIV>

</td> <td width="4"> </td> </tr> </table>

Copyright PeopleSoft Corporation 2002. All rights reserved.