Ent Portal 84 Gui

PeopleSoft Portal 8.
4 GUI Customization Tips
Contains: PeopleSoft Enterprise Portal GUI Tips
Author: Mauricio Prado PeopleSoft Consulting Technology Solutions Delivery
PeopleSoft Enterprise Portal 8.4 GUI Customization Tips

November 30, 2004
: 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 the customers 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 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 Customer Validation Field Validation 3 3 5 5 5 7 7 8 9 13 14 14 14 15 23 26 27 27 30 30 30 32 32 33 35 37 38 38 38
APPENDIX D REVISION HISTORY
39
11/30/2004
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 the PeopleSoft Enterprise Portal. In this Red Paper, we discuss guidelines on how to modify the entire look and feel of the PeopleSoft Portal. This is a no frills and to-the-point document on how to put a 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 Portal and Tools releases:

Enterprise Portal 8.40 PeopleTools 8.40.xx through PeopleTools 8.45.xx
The definitions in this document are related to the underlying Enterprise Portal definitions that every portal solution contains. It was developed with Enterprise Portal 8.4 and PeopleTools 8.41. For information on the previous release of the 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 Pure 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 PeopleTools 8.4 and PeopleSoft PeopleBooks: PeopleSoft Internet Architecture Administration (PeopleTools | Administration Tools | PeopleSoft Internet Architecture Administration) PeopleSoft Application Designer (Development Tools | Application Designer) PeopleCode Reference (Development Tools | PeopleCode Reference)
Copyright PeopleSoft Corporation 2001. All rights reserved.
11/30/2004 PeopleSoft Portal Technology PeopleSoft 8.4 Enterprise Portal PeopleBook
11/30/2004
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 B.Y.O.G. company. For our purposes, the goal is not to make the B.YO.G. interface attractive, but rather to put in as many different scenarios (ie, 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: Note. This document has been updated to reflect the latest changes to Enterprise Portal 8.4. Ensure that your Enterprise Portal 8.4 has been upgraded to bundle #13 and is using PeopleTools 8.45 or greater.
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: B.Y.O.G. 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 Copyright PeopleSoft Corporation 2002. All rights reserved. left-navigation template menu.
11/30/2004
STEP 1 OF 3: CREATE A NEW PROJECT IN APPLICATION DESIGNER

In this section, we create a project. Open Application Designer and select File > New > Project. Then select File > Project Properties. Enter meaningful information to help describe this Project:
Select File > Save Project As to save and name your project.We are going to name ours BYOG_PORTAL_GUI. Click the OK button
11/30/2004
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. Enter the name of the definitions listed 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: We will make significant changes to the definitions with asterisks. 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
11/30/2004 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 match the height of your header. The default setting is 110 pixels.
PORTAL_UNI_HEADER_NNS * PORTAL_UNI_HEADER_NS4X (For Netscape 4.x Users)
This HTML definition is used for every header in the portal. We will modify the surrounding HTML significantly, based on branding requirements.
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 Left corner of inactive tab Right corner of inactive tab Background of top tab page unchanged unchanged
10
11/30/2004 PT_NAV_CLOSED_FLDR PT_NAV_OPEN_FLDR PT_PORTAL_BEIGE_STRETCH (Deprecated. Do not Use) PT_PORTAL_GO (Deprecated. Do not Use) PT_PORTAL_IC_CLOSE PT_PORTAL_IC_COLLAPSE PT_PORTAL_IC_EDIT 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 Main Navigation image (bullet) Main Navigation image (bullet) I used this to substitute my own image
Search image (Go button)
PT_PORTAL_IC_EXPAND PT_PORTAL_IC_HELP (Deprecated. Do not Use) PT_PORTAL_IC_HOME (Deprecated. Do not Use) PT_PORTAL_IC_LOGOUT (Deprecated. Do not Use) PT_PORTAL_SHADOW_GRAD (Deprecated. Do not Use) PT_PORTAL_WORKLIST (Deprecated. Do not Use) PT_SHOW_MENU PT_PORTAL_FAVORITES_ADD (Deprecated. Do not Use)
Home icon
Logout icon
I used this to substitute my own image
Worklist icon
Left nav show menu icon Add to Favorites Icon
Insert other GUI related Definitions:

Other GUI Related Definitions
11
11/30/2004 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_NNS. 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 reference, I list it here to give you more flexibility in rendering the lookand-feel of your PeopleSoft Portal.
Record.WEBLIB_PORTAL
12
11/30/2004
STEP 3 OF 3: REVIEW THE DEFINITIONS WITHIN YOUR PROJECT

Llets just double check and to make sure you now have all the necessary definitions in the project.
HTML Definitions
Images and Other Definitions
13
11/30/2004
Chapter 3 - Development Guidelines
README
BEFORE YOU BEGIN: TECHNICAL NOTES

Whats 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 will be familiar to developers with 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 to document all of 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

14
11/30/2004 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 what each definition can do and the kind of flexibility you have. Ill try to list the definitions in the order that makes sense (the list above was in alphabetical order, with a few exceptions). 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 are covered in the same order as listed below: PORTAL_UNI_HEADER_NNS 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:
Application Package: PT_BRANDING. Application Class: BrandingBase 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
15
11/30/2004 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/ Related Image Definitions: For a complete list of all the objects that are binded to this object (the Bind variables), see Appendix 1-A. On that note, heres a list of image objects: PT_PORTAL_IC_HOME PT_PORTAL_FAVORITES_ADD PT_PORTAL_IC_HELP PT_PORTAL_IC_LOGOUT
16
11/30/2004
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.GetUserTabHTML 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 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 too much because the style sheet is delivered with almost every PeopleTools and Application update or upgrade (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/30/2004
PORTAL_HP_3COL_LAYOUT
Description: The template used to build a 3-column homepage. When users personalize their homepage, the system 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/30/2004
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 I 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. 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: The template used to build a 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/30/2004
EPPLN_NAV_SHOW_MENU
Description: this is the HTML for the top of the 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 navigation. 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 is 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: This is the description of the navigation menu. EPPSTYLEDEF_SUB.EPPPAGE: see screen shot below. To use this properly, a peoplecode change must be made. Open Application Package: EPPLN_NAV, Open Application Class: NavTheme Look for method: NavTheme. Change line &styleBkGndColor = PSPAGE; to &styleBkGndColor = EPPPSPAGE; EPPSTYLEDEF_SUB.EPPPAGELETHEADER: see screen shot below. Related Images: PT_NAV_OPEN_FLDR: open folder bullet.
20
11/30/2004 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.
21
11/30/2004
EPPLN_LN_MGR_TEMPLATE_END
Description: This is the HTML for the 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.EPPPAGE: Background and border.
PTSTYLEDEF.PTNAVSELPARENTBK: Background color for selected section.
PTSTYLEDEF.PTNAVSELCHILDBK: Background color for selected link.
PTSTYLEDEF.PTNAVSELCHILDLINK: Font attributes for selected link.
22
11/30/2004
HTML DEFINITIONS THAT WILL HAVE A MINOR IMPACT ON GUI:

The list of minor HTML definitions are listed below in the order they will bediscussed:
PORTAL_HP_PERSONALIZE_LINKS_TD PORTAL_HP_USER_TEMPLATE
23
11/30/2004
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 includess 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
24
11/30/2004
PORTAL_HP_USER_TEMPLATE
Description: The 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 most important 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_NNS, which is used for all transactions.
PORTAL_LEFTNAV_EMP
Description: A 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 the height of your header. The default setting is 110 pixels.
25
11/30/2004
YOU ARE FINISHED!

Congratulations, you should have a completely new interface on your PeopleSoft Portal!
26
11/30/2004
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/30/2004
} </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>
28
11/30/2004
<td width="9"> </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/30/2004
FAQ: DO I NEED TO DO ANYTHING TO THESE DEFINITIONS IF I MIGRATE THIS PROJECT TO PRODUCTION?

No, not in Portal 8.4x
FAQ: CAN I USE DIFFERENT TEMPLATES FOR DIFFERENT PAGELETS?

No, 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 modify the existing images and style sheets, You can create new images and style sheets and update the PeopleCode requests, or 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 of 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>
30
11/30/2004 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.
31
11/30/2004
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_NNS. 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/30/2004
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_NNS, which occurs about half-way down in application package PT_BRANDING.BrandingBase.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/30/2004
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, 44. &CTIHTML, 45. &MCFHTML, 46. &PPMHTML);
1.
README: You can add your own from %BIND(:47) 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/30/2004
Appendix B-1: PORTAL_UNI_HEADER_NEW

The following html code has been deprecated by PORTAL_UNI_HEADER_NNS. This section will not be updated to reflect the newest changes.
<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 (ie, 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;}
35
11/30/2004
.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>  %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)
36
11/30/2004
</form>  %BIND(:34)  %bind(:29) </BODY> </HTML>
Appendix C Special Notices

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 each item may have been reviewed by PeopleSoft for accuracy in a specific situation, there is no guarantee that the same or similar results will be obtained elsewhere. Customers attempting to adapt these techniques to their own environments do so at their own risk. Any pointers in this publication to external Web sites are provided for convenience only and do not in any manner serve as an endorsement of these Web sites.
37
11/30/2004
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/30/2004
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 4. November 3, 2004: Updated to reflect changes post: Bundle #13 & PeopleTools 8.45
39

Ent Portal 84 Gui

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ent Portal 84 Gui

Hochgeladen von

Copyright:

Verfügbare Formate

PeopleSoft Portal 8.

4 GUI Customization Tips

Contains: PeopleSoft Enterprise Portal GUI Tips

Author: Mauricio Prado PeopleSoft Consulting Technology Solutions Delivery

PeopleSoft Enterprise Portal 8.4 GUI Customization Tips

APPENDIX D REVISION HISTORY

Enterprise Portal 8.40 PeopleTools 8.40.xx through PeopleTools 8.45.xx

STRUCTURE OF THIS RED PAPER

11/30/2004 PeopleSoft Portal Technology PeopleSoft 8.4 Enterprise Portal PeopleBook

Copyright PeopleSoft Corporation 2002. All rights reserved.

Chapter 2 - Getting Started BACKGROUND INFORMATION

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:

PORTAL_HP_PERSONALIZE_LINKS_TD Contains html for content/layout links

Copyright PeopleSoft Corporation 2002. All rights reserved.

PORTAL_UNI_HEADER_NNS * PORTAL_UNI_HEADER_NS4X (For Netscape 4.x Users)

Insert the GUI related Image Definitions:

Copyright PeopleSoft Corporation 2002. All rights reserved.

Search image (Go button)

I used this to substitute my own image

Left nav show menu icon Add to Favorites Icon

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

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.

Copyright PeopleSoft Corporation 2002. All rights reserved.

EPPSTYLEDEF_SUB.EPPPAGELETHEADER: Text and background attributes.

EPPSTYLEDEF_SUB.EPPPAGE: 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:

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.

YOU ARE FINISHED!

Copyright PeopleSoft Corporation 2002. All rights reserved.

Copyright PeopleSoft Corporation 2002. All rights reserved.

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