Here's one way to change your PeopleSoft Portal Header from this
to something like this
Preface
I was grateful I discovered @peoplesoftwiki's
great post
about PeopleSoft Branding. It meant that this post wouldn't have to be
quite as long. Because as it turned out I followed the same steps as
@peoplesoftwiki (extending Application Package PT_BRANDING and
overriding the Branding Package on PeopleTools Options page.) I went one
or 2 steps further it seems so I'd like to expand on that.
Before
I begin, I need to tell you the main assumption I made. We are moving
to PeopleTools 8.50 and we have decided to use the new Swan style. This
is important as there is code in PT_BRANDING methods that is wrapped in
if statements checking whether the style = "swan". That meant I only had
to focus on making changes to items where this was true.
And one more thing before going any further: configuration good, customisation bad. (Though I don't always follow that mantra.)
Application Package
So just like @peoplesoftwiki, I extended PT_BRANDING. I made a few changes, including:
- adding new methods to get data out of the system that I wanted to display in the Portal Header
- setGreeting,
to prefix the Users greeting as set in Personalize Content with the
description of the Environment as set in PeopleTools Options
-
getOxfamLinks, to read and labels and links from the message catalog
(labels being the message, and the links being the explanation text) to
be displayed along the top of our branded portal.
- replacing
calls to the delivered HTML Definitions that formed the basis of the
Portal Header. Those 3 methods and the HTML defintions are
- getIframeHeaderHTML - PT_IFRAME_HDR_SWAN
- GetExpPasswordHdrHTML - PORTAL_EXP_PASSWORD_HDR
- GetUniHeaderHTML - PORTAL_UNI_HEADER_NNS_SWAN
The
changes made to the methods getIframeHeaderHTML, GetExpPasswordHdrHTML
and GetPortalUniHeaderNNS were all very similar, so I'll just go in to
details for the method getIframeHeaderHTML. I basically left the code
all the same, except for adding calls to my new methods setGreeting and
getOxfamLinks and another call to get some more text from the message
catalog and a call to the GetPortalHomepageURL() function to retrieve
the Homepage URL.
HTML Definition
To
make use of all this, I would either need to change the delievered HTML
definition or create my own. So I created my own by opening the
delivered PT_IFRAME_HDR_SWAN and doing a Save As to create
OXF_IFRAME_HDR_SWAN. By doing this I had complete control over the HTML I
wanted displayed. The main change I made was to the pthdr2container
<div>, changing it from
<div id="pthdr2container">
<div id="pthdr2logoswan"> </div>
<div id="pthdr2greeting">
<span class="greeting">%bind(:15)</span>
</div>
%bind(:16)
<ul id="pthdr2links">
%bind(:17)
</ul>
</div>
to
<div id="pthdr2container">
<div class="oxfblend">
<div id="pthdr2logoswan"
onclick="javascript:window.location='%bind(:27)';return false;">
</div>
<div id="pthdr2greeting">
<span class="oxfps">%bind(:26)</span>
<span class="oxfgreeting">%bind(:15)</span>
</div>
<ul id="oxfhdrlinks">
%bind(:25)
</ul>
<ul id="pthdr2links">
<span>%bind(:17) </span>
</ul>
</div>
<div id="oxfheaderLine3">
<div class="clearer"></div><!--Important - ensures floats
are contained-->
</div>
</div>
The
main changes were adding new <div> oxfblend, oxfheaderLine3 and
clearer, new <span> oxfps and oxfgreeting and new <ul>
oxfhdrlinks. I also removed %bind(:16), the search box, which we didn't
think made any sense to have in the Portal Header.
Stylesheets
To
make all these new elements on the page look any good, I had to update
the Stylesheet. PSHDR2_SWAN held all the styles to control the Portal
Header. For example, it defined the style pthdr2logoswan which has the
background image as the Oracle Logo. Well we wanted to use the Oxfam
Logo so I made a copy of PSHDR2_SWAN to create OXF_HDR2_SWAN and I made
my changes to that.
Remember, configuration good, customisation
bad. So I copied PSSTYLEDEF_SWAN to create OXF_STYLEDEF_SWAN. And in
OXF_STYLEDEF_SWAN, I replaced PSHDR2_SWAN with OXF_HDR2_SWAN. When you
switch to the new swan style, you update Default Stylesheet on
PeopleTools Options to PSSTYLEDEF_SWAN. I instead switched it to
OXF_STYLEDEF_SWAN.
Images
I
had to create 4 image definitions in App Designer. Each of these are
referenced in the stylesheet OXF_HDR2_SWAN as background images for 4
different elements.
Bringing it all Together
So
here's how it all works together. The PT_BRANDING extended Application
Package (with new methods) calls the new HTML Definitions. Updated or
newly created bind parameters are passed to the custom HTML Definition
to generate the content of the Portal Header. The new stylesheets and
images provide the formatting for the Portal Header HTML. What you can
come up with is only limited by your imagination.
