Sunday, November 23, 2014

PeopleTools 8.54 - Branding - Part 1

PeopleTools 8.54 is here! Well it has been out for the past few months. I finally managed to get a VM Instance up and running.

I have been working on Branding PeopleSoft Applications starting from 8.48 and was naturally interested in finding out the new configuration, functionality and features that 8.54 has to offer. As you all know, Branding in PeopleTools has slowly evolved with new styles like SWAN and TANGERINE. I was interested in exploring how it has changed with 8.54 and what it might take to do some custom Branding that most organizations would like to perform at a very basic level.

This post (followed by a few more parts as time permits) is intended to detail my findings while branding a PeopleSoft Application on PeopleTools 8.54.

First thing I noticed with PeopleTools 8.54 is that the PeopleTools Options Page does not allow us to update the Branding App Package and Default Style Sheet any longer.



Notice how the Default Style Sheet, Branding Application Package and Application Class are all disabled? So where do we change this now in 8.54?

PeopleTools > Portal > Branding > Branding System Options



The original branding options (that we are used to from pre 8.54 tools) can be found on this page. And technically we could just customize these options (Default Style Sheet, Package Name and Application Package) similar to prior PeopleTools versions and be done with it from a branding point of view. But let us explore the other configuration items that are available online as part of PeopleTools 8.54.

The Default Branding Theme appears to be at the highest level amongst all configurable options on the Branding System Options page. So let us start by creating a custom Branding Theme similar to DEFAULT_THEME_TANGERINE.

PeopleTools > Portal > Branding > Assemble Themes
- Search for DEFAULT_THEME_TANGERINE.
- Save As a custom theme.
- In my example, I am calling my custom theme CSK_THEME_TANGERINE. CSK is my favorite cricket team in the IPL!!



If we go back to the Branding System Options then we would now see the new custom theme in the drop down for Default Branding Theme.



Let us go ahead and select this new theme as the Default Branding Theme  and save the Branding System Options (so we can customize it accordingly).

Let us now start customizing our Branding Theme (custom copy) step by step.

First item on everyone's list would be to get rid of the Oracle logo and use a custom logo. In previous PeopleTools versions, we would have uploaded our custom logo image using Application Designer and then modified the style sheet (e.g.: pthdr2logoswan) that references the logo image accordingly.

With PeopleTools 8.54, we can upload our custom logo (image) and style sheet objects using the following page:
PeopleTools > Portal > Branding > Branding Objects

I uploaded my custom logo and custom stylesheet that I would like to use for overriding the delivered style.

Image Screenshot:



For simplicity sake, I resized my custom logo to the same height (55) as the delivered Oracle logo.

Style Sheet Screenshot:



Notice that I have referenced the custom logo in my style class as follows:
content: url(%Image(CSK_LOGO));

Note: Objects uploaded via the Branding Objects page would be created as PeopleTools managed objects in the database meaning that we can view and migrate them using App Designer.



Now that we have the necessary objects for customizing the logo, let us see how we can apply them to our custom branding theme.

We will perform this task by using the Assemble Themes page.

PeopleTools > Portal > Branding > Assemble Themes
- Search for our custom theme (CSK_THEME_TANGERINE)



We can see that on this page we can assemble a theme by associating several configurable items most notably the Homepage Header and Footer. As the custom theme is still a copy of the delivered theme, it is referencing the delivered Homepage Header and Footer properties.

Let us create a custom Homepage Header and then associate it with the custom Theme.

PeopleTools > Portal > Branding > Define Headers and Footers



On this page we can see that each of the DIV elements on the header are represented in a tree structure. Here a branch/folder represents a logical container and the leaves represent the DIV elements.

Tree Structure:



Corresponding DIV elements:



Other notable features on the Define Headers and Footers page are the Preview and Style Definitions Options. The Preview option can be used to visually identify the location of each of the folders/containers and leaves in the tree. The Style Definition is available to enter any additional free form style class definitions.






Let us use this delivered Header definition (DEFAULT_HEADER_TANGERINE) to 'Save As' a custom Header (CSK_HEADER_TANGERINE).

On the custom Header definition (CSK_HEADER_TANGERINE) let us delete the pthdr2logoswan element under pthdr2container (we will be replacing this with our custom DIV element).



Now let us add a new child element under pthdr2container as follows:









Note:
- Make sure the order of the new element is '01 - First'.
- The properties and attributes of this DIV element (cskhdrlogo) were cloned from pthdr2logoswan.

Our custom header is now ready with the updated logo:



Let us now go back to 'Assemble Themes' and update our custom Theme (CSK_THEME_TANGERINE) to reference our custom Homepage Header definition (CSK_HEADER_TANGERINE):



Last but not the least, we will update the 'Branding System Options' to add our custom style sheet object:



Now we are ready to test our changes.

Note: Please shutdown, purge cache and reboot your web server before continuing to test.

Test Screenshots:





Just like that we were able to apply a custom logo to the Application on PeopleTools 8.54:
- Without any customizations.
- Without using Application Designer (completely configurable).

In the next part, I would like to experiment with customizing the background color and the font color of the Drop Down Menu (ptdropdownmenu) and the Header Container (pthdr2container). Stay tuned!





Note:
- This post is based on my recent experiments with PeopleTools 8.54 and there could be more efficient ways of doing the same. I welcome all feedback and suggestions and would be more than happy to update this post if any improvements could be made. Again, the intent of this post is to create a quick reference/starter guide for anyone who wants to brand PeopleTool 8.54+ applications.
- This exercise was done based on HCM 9.2 PUM Image 8 (PeopleTools 8.54.01).
- If you find the images are small for viewing then just click on them to view in full size.

Updated related branding articles list on August 26th, 2017:

Index of blog posts on PeopleTools Branding:

Customizing DEFAULT_THEME_TANGERINE Theme (continuation of this post):
PeopleTools 8.54 Branding - Part 2
PeopleTools 8.54 Branding - Part 3

Customizing DEFAULT_THEME_TANGERINE_ALT Theme: 
PeopleTools 8.54+ Branding - Part 4A
PeopleTools 8.54+ Branding - Part 4B
PeopleTools 8.54+ Branding - Part 4C
PeopleTools 8.54+ Branding - Part 4D
PeopleTools 8.54+ Branding - Part 4E

PeopleTools Fluid Branding:
PeopleTools 8.54+ Branding - Part 5A
PeopleTools 8.54+ Branding - Part 5B
PeopleTools 8.54+ Branding - Part 5C
PeopleTools 8.54+ Branding - Part 5D

PeopleTools 8.55.x Branding:
Part I - What has changed?
Part II
Part III - Custom Macros and More

PeopleTools 8.55.x - Using Oracle JET:
Part 1
Part 2
Part 3
Part 4

PeopleTools 8.56 - Branding Review

PeopleTools 8.57 | Branding Administration Access and New Roles
PeopleTools 8.57 | Getting Started with Custom Banner aka Company Info Configuration
PeopleTools 8.57 | Custom Banner/Company Info Configuration - Part 2
PeopleTools 8.57 | Custom Banner/Company Info Configuration - Part 3
PeopleTools 8.57 | Custom Banner/Company Info Configuration - Part 4

JavaScript Injection Framework:
Global JS Injection Framework
Java Script Injection Framework - Updates, Bugs and Fixes

Miscellaneous Topics:
Component Branding
PeopleTools 8.54 Branding Objects - Migration Issue and Workaround
Branding Header Definition - Steps to add external link to System Header Links (Open in New Window)
PeopleTools 8.54+ FavIcon for Classic
PeopleTools 8.54+ Role Based Theme Assignment/Override
Using ACE Editor for Online Branding Objects (HTML, JavaScript and Style Sheets)
PeopleTools 8.55 - Fluid UI - Drop-Down Menu/Breadcrumb Navigation vs NavBar/Navigator Conundrum
Fluid UI - New Window Feature - Workaround
Using Different Branding Themes for Different Portals
PeopleTools 8.55+ Branding - Using the Logo as a Hyperlink
Fluid Global Search - Setting Focus on the Search Box
Adding Userid to 'Sign out' Action Menu Item Label
PeopleTools 8.55+ Branding | Conditionally Display Header Icons
Adding Custom Links to Action Menu using DoURLWarning JavaScript Function
Decoupling the 'Add to' Homepages, Favorites and NavBar Functionality
Classic/Fluid Home NavBar Tiles
Enable/Disable Classic Plus with Customizations

78 comments:

  1. Part 2: http://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-2.html
    Part 3: http://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html

    ReplyDelete
  2. Hi Sasank,

    Great posting. very hands on and contains great info. I have several questions:

    1. You mentioned "The properties and attributes of this DIV element (cskhdrlogo) were cloned from pthdr2logoswan", how do do I that? I don't see any of the attributes in the page. I am using HCM 9.2 PUM Image 9 on PT8.54.03.

    2. If I plan to change the greeting text with the USERID and DB Name without using App Designer App Package, how do I use this custom header to acheivve that?

    Thanks for your help.

    Y1

    ReplyDelete
  3. Hi Sasank,

    I saw your posting #3 with the Greeting Text. I will try to follow that. If you could let me know how to clone the properties and attribute for this "DIV", I appreciate your help.

    Thanks,
    Y1

    ReplyDelete
  4. @Y1 - Thanks for the feedback! Glad to hear that the post was helpful.

    1. The series of screenshots prior to my statement "The properties and attributes of this DIV element (cskhdrlogo) were cloned from pthdr2logoswan." should give you the steps to clone your custom element (similar to cskhdrlogo) from pthdr2logoswan. The cloning is not a delivered function, I did it manually.
    - Firstly, I deleted pthdr2logoswan.
    - Then I clicked on pthdr2container and used the 'Add Child' Button.
    - Added the Child Element 'cskhdrlogo' setting the type to 'BasicHTML'.
    - Then I added the element properties (style, parent, Order).
    - Lastly, clicked on the 'Additional Options' Link and entered the 'Static HTML' value.

    2. You are right. You can leverage the details in Part 2, Part 3 and improvise the Greeting Text without having to use the App Class approach. You can follow a similar approach of how I displayed the DB Name in Part 2 using meta-html. You can use %dbname and %userid meta-html values. You can find more details on meta-html here:
    http://docs.oracle.com/cd/E13292_01/pt849pbr0/eng/psbooks/tpcl/book.htm?File=tpcl/htm/tpcl04.htm

    Let me know if you have any other questions. I would be happy to help where I can!

    ReplyDelete
    Replies
    1. I think my problem is the stylesheet for cskhdrlogo. I followed your steps but after I added the new child (cskhdrlogo) with those attributes you listed, preview did not display the logo. If I looked at delivered pthdr2logoswan there is no value assigned in the style class. I saw later there was a step to add the custom CSK_HDR_LOGO stylesheet into the theme, maybe this should happen before I delete the logo? I actually changed the type from "Basic HTML" to "Basic Image" and was able to see the logo on the custom header... but why is the basic HTML not working?

      Thanks,
      Y1

      Delete
  5. @Y1 - Yes. You are right we need to have the style class defined first before you do the steps to add the cskhdrlogo.

    I used basic html in my example but you should be fine to use even the Basic Image if that works for you. The reason for using basic html was to further expand it (you will see that in Part II) where I converted the image to a hyperlink using an anchor tag in the html.

    Does that answer your question?

    ReplyDelete
  6. Sasank,
    When you say "Note: Please shutdown, purge cache and reboot your web server before continuing to test," what do you mean by shutdown and purge cache? Shut down my browser or one of our servers (app or web)? Also, for purging cache, is that the browser's cache or one of the server's caches (app or web)?

    Thanks!

    ReplyDelete
  7. @Tim,

    By "Note: Please shutdown, purge cache and reboot your web server before continuing to test", I mean the web server. We need to do that to avoid stylesheet caching issues at the web server level.

    So basically, shutdown the web server using PS Admin, delete/purge the cache folder on the web server and reboot the web server again using PS Admin. This generally gives me the best results. Here is a quick post of how to clear web server cache if you are using a locally installed PUM Image.
    http://pe0ples0ft.blogspot.com/2014/11/peoplesoft-pum-image-virtual-machine.html

    Additionally, if you are still experiencing caching issues, then yes, clearing user's browser cache also helps (because sometimes the javascripts, stylesheets that are cached on the user's browser might also get stale particularly when we are constantly making changes during development/testing phases).

    Thanks!

    ReplyDelete
  8. Sasank,

    I am still having problem with the image and custom stylesheet, I saw your posting #2 has the CSS for cskhdrlogo, I copied that into my environment but still not able to display it. I cleared web server, app server, browser cache, no go.

    So I have to stick with basic image type to display the logo. So I have the workaround and it's fine.

    Now I want to use DEFAULT_THEME_TANGERINE_ALT to make the header like the new FLUID theme. I used similar steps, created my own custom theme, custom stylesheet and attached the logo as basic image. but then the logo showed up in the center and not at the left corner. Which section in the stylesheet DEFAULT_THEME_TANGERINE_ALT drives the position of the logo? I can see it has the text-align center but does this impact the logo?

    Thanks,
    Y1

    ReplyDelete
  9. @Y1 - The basic HTML should work. I have used it on two different applications. But if the basic image is working better for you then that should do!

    With regards to DEFAULT_THEME_TANGERINE_ALT: Good question! I have not played with that theme or FUILD much but I am assuming that the 'overriding style process' would be the same. It should begin with identifying the current style that is being used by the element (using tools such as firebug) and then appropriately overriding the style.

    I tried the following and it seems to align to the left:
    - Clone DEFAULT_THEME_TANGERINE_ALT (theme) and give it a custom name.
    - Clone DEFAULT_HEADER_TANGERINE_ALT (header) and give it a custom name.
    - Reference the custom header in the custom theme.
    - Update the custom header to reference a custom Basic HTML with custom style.
    - Override style.

    Review below link for screenshots:
    http://pe0ples0ft.blogspot.com/p/test.html

    What are you seeing in the style when you debug the element on the browser?

    ReplyDelete
  10. Sasank,

    Finally I got it. I reviewed your posting #2 several times and finally understood that the custom stylesheets need to be added to the branding system options first, then when referred in the custom header, it did show up. Finally got it to work. Thanks so much for such detail steps. Now the other theme also works...

    Next item for me is to display DB Name with User Name, I followed your steps in posting #2, managed to use Java Script Object with %userid and %dbname, also got it to display. But there is a big gap between the logo and the text string, I tried to change the CSK_BR_GEN CSS but still can't get it to work. I changed the text-align, margin but still didn't get it to work. Would you be able to show it to me?

    Also, for our non-production environment, we want to append another custom value from the URL string to the %userid and %dbname. For example, we created DB_REFRESH_DATE in URL maintenance and set the value 2015-01-12. Is there a way I can use %URL to get the value out then append to the text string so the Java Script can display it?

    Thank you...

    Y1

    ReplyDelete
    Replies
    1. @Y1 - You are welcome! :)

      Yes, I also found that the DBNAME is getting centered on the ALT Theme. I used the float (left) property to align the DIV closer to the logo.

      You can use the %URL meta-html as you have suggested. You need to reference it in the javascript similar to how we used %dbname.

      Here are screenshots from some quick testing at my end (seems to work per your requirements):
      http://pe0ples0ft.blogspot.com/p/test1.html

      Delete
  11. Hi Sasank,

    Thanks for the terrific tutorial.

    We recently upgraded a copy of our database from Tools 8.53 to 8.54.05 for developers to explore the new Tools version. I’ve been following your guidelines (peopletools-854-branding-part-1.html) for replacing the Oracle logo with a custom logo for display within the Homepage Header defn.

    I am able to successfully display my custom logo within my custom header defn via the Preview option on the Define Headers and Footers page, but on the “real” homepage header, the Oracle logo continues to display.

    I’ve cleared web server cache and bounced the webserver (there’s just one for this environment) multiple times, and repeatedly reviewed my setup to make sure I updated all the necessary references to point to my custom defns prior to bouncing. I even went so far as to delete all the custom objects I created (my clones of DEFAULT_THEME_TANGERINE and DEFAULT_HEADER_TANGERINE, as well as the custom Image and Stylesheet defns I uploaded / added), clear cached / bounce web server again, restarted from scratch and recleared cache / bounced server again after I could see the custom logo via the Preview option… and still ended up with the same problem.

    In reviewing your post, I looked carefully at slide #7 and did a line-by-line compare of the html shown in your screen shot for the "Define Headers and Footers" page as loaded with the delivered "DEFAULT_HEADER_TANGERINE" defn (i.e. where you discuss the pre-modified definition).

    I notice some discrepancies and am wondering if they might provide a clue to my problem. [Note I’m using the "Inspect Element" tool -- available in Firefox when you right-click a page -- to examine the html. FF is version 35.0.1., running on Windows 7 Enterprise.]

    I was going to include a screen shot, but I see I can only upload text comments, so I've entered the relevant part below. Note I inserted some blank spaces inside the html tags so they would upload to you without being rejected.


    ================


    [...] (same as your screenshot up until just after the first "< div>< /div>" element, which is where I start below)

    < div>< /div>
    < !-- Begin pagelet: UniversalNavigation URL: https%3%2... -->
    < div class="ptprtlcontainer">
    < div id="ptifrmpopup" style="display:none;">< /div>
    < header id="pthdr2container" aria-label="Universal Navigation Header" role="Banner" >
    < table id="pthdr2table" width="100%" cellspacing="0" cellpadding="0" border="0" >
    < tbody>
    < tr>
    < td width="113" align="left">
    < div id="pthdr2logoswan"> < /div>
    < /td>

    [ ... ]

    ================



    The html matches yours up until the "< !-- Begin pagelet: ...> comment line. Most noticable to me was the absence of a < div id=”DEFAULT_HEADER_TANGERINE” class=""> element for my page’s html.

    Any guidance / suggestions will be greatly appreciated!

    Thanks,

    Anne

    ReplyDelete
  12. @Anne - Thanks for your comments. I got an email notification of your question but I don't seem to find it here on this post (it might be because of the html you tried to paste).

    It is a bummer that blogger does not allow images in the comments. Would you be able to share the screenshot by hosting it online? Perhaps you could try http://snag.gy/

    I have one suggestion for your problem because I was recently helping someone who had a similar issue.

    Can you check if you have customized your delivered app package PTBR_BRANDING or html objects (i.e.: brought forward any previous custom changes as part of retrofitting)? This could be the cause of your problem. I would suggestion that you revert all customizations that were made prior to starting with the steps that I have detailed.

    Along the same lines, another suggestion would be to test the logo change on your demo 8.54.05 instance. That might give you some clues to identify any potential issues with your upgraded environment.

    Thanks!

    ReplyDelete
    Replies
    1. Hi Sasank,

      I apologize for the delayed response, as happens sometimes my efforts have been redirected recently to production support. :-)

      I tried out the snag.gy site you suggested, that is about as easy as things get! Thanks for turning me on to it, I will definitely use it when I'm ready to repost my question.

      I haven't had a chance yet to review the contents of my original post attempt and confirm that all our prior custs are removed per your suggestion. I want to do that before reposting here (so I don't waste your time, or anyone else's, if that turns out to be the issue).

      I know our 8.53 branding mods were implemented using a clone of the PT_BRANDING app package, so I assumed that by repointing the config to the PTBR_BRANDING I would be bypassing them; but there could be other objects we touched that are being referenced, so I'll need to check that more carefully. I didn't do that work so I'm not 100% familiar with the details.

      The idea to try it in an 8.54.xx DMO instance is a good one, unfortunately we don't have one up yet. ;-) That should change in the next couple of weeks, though.

      Thanks again,

      Anne

      Delete
    2. Hi Sasank/Anne,

      I am facing the same issue as yours. We recently upgraded from 8.53 to 8.54.11 and after creating custom headers and themes, i could see the changes in Preview but not in the actual header.

      And i couldnt find the DIV element DEFAULT_HEADER_TANGERINE in the HTML definitons as well.

      But all these works like charm in our 8.54 demo env..

      Please let me know if you have any updates.

      Regards,
      Selva.

      Delete
    3. Hi Selva,

      Can you please check if you are using the correct Theme in your Branding System Options? Also, check if your custom theme is referencing your custom Header appropriately.

      The steps detailed above should work on any PeopleTools 8.54+ application.

      Delete
    4. Hi Sasank,

      Yes, i verified that the correct theme is applied and the custom theme is referencing custom Header.

      FYI, the PeopleTools upgrade from 8.53 to 8.54 is a pain in terms of using the new branding framework. There are missing scripts to populate the new tables related the branding framework. We had to work with Oracle Support to get the scripts and to make the branding framework work. But still its not reflecting the changes made in the Branding System Options.

      And looking at the solution suggested by Oracle Support to apply branding changes (Doc ID 1966646.1) , i have no hope on them. I cant imagine how much they undermine the good work done by development team.

      Regards,
      Selva.

      Delete
    5. Hi Selva - I apologize - I missed to see that you previously mentioned that it works in your 8.54 demo environment.

      I have worked on a couple of instances where we upgraded to 8.54. But not 8.53 to 8.54 so cannot comment on that. It is common that in certain upgrade paths, some objects get stripped out for various reasons. As you have done rightly, it is best to work with Oracle to get the appropriate scripts to catch up on those objects/configurations. It seems like there is something missing in your upgraded environment. Please continue to work with Oracle on that and see if you can figure out why it is not working on the upgraded environment while it is working on the demo instance. Actually, you could also trace your peoplecode and compare between your demo 8.54 and upgraded environment. Just an idea!

      Also, I was previously helping out someone who had a similar problem and it turned out there were some customizations on PT_BRANDING (app package) that they had carried forward to their upgraded environment which was causing issues. So you might want to check if you have any of those which you can revert back to delivered code?

      Other than that, if you are able to share some screenshots of your branding configuration then I might be able to suggest a few other options.

      With regards to Doc ID 1966646.1, it is ridiculous (to say the least) that Oracle have put out a document suggesting that we should customize a delivered object! I cannot believe that after all the configurations which are made available online with PeopleTools 8.54, we are told to replace/customize delivered objects. With all due respect, I personally would not follow what they are suggesting in Doc ID 1966646.1. I suggest that you continue to troubleshoot your issue and find a resolution!

      Hope this helps.
      Thanks,
      Sasank

      Delete
    6. Hi Sasank,

      Thanks for your detailed response. Respect your efforts to share & help.

      I will explore on the PeopleCode trace option soon.

      Regarding customizations, yes we had some customizations in PT_BRANDING but we did not reapply them in 8.54.11. So it is still as delivered. And i have sent you the screenshots.

      Thanks & Regards,
      Selva.

      Delete
    7. Selva,

      I looked at the configuration that you sent to me and everything looks good.

      If it works in your demo and not in your upgraded environment there is definitely some missing objects/configuration.

      It might be worth setting a trace on the login page (using the &trace=Y parameter) and comparing your results between demo and your upgraded environment.

      Like you said, it could be something to do with the migration path from 8.53 that is causing this issue. Any progress on the service request with Oracle?

      Keep us posted so it might help others who are on the same boat!

      Thanks!

      Delete
    8. Thanks Sasank,

      Oracle support requested for some inspect element screenshots and they are working on it now. I will update once i get any lead.

      Delete
    9. Hi Sasank,

      Our admin guys just reran one of the upgrade steps and it is fine now. It is the Task 2-13, loading base data with pt854tls.dms .

      Regards,
      Selva

      Delete
    10. @Selva - That is great news. Thanks for sharing this information with us! :)

      Delete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Hi Sasank,

    Is there a way to customize the login page using configuration similar to branding on the header?

    Thanks

    ReplyDelete
    Replies
    1. @Richard - Great question.

      The login/logout/expire pages are all html, css files sitting on the web server. So any customization of those files should be handled separately. There is no way to use the Branding Configuration for that purpose.

      If you want to customize those external pages on the web server, then you would need to modify the associated html, css (e.g.: signin.html, signin.css).

      Thanks!

      Delete
  15. Excellent post Sasank.. Way to Go! :)

    ReplyDelete
  16. Does it work in IE for you? We implemented sililar stuff (i.e. adding logo, adding some text to the right end on the menu bar). It works fine on Chrome, but in I.E. there is a white line to start off the page. And the global search bar's links don't work (dropdown, search button)

    Thanks,

    ReplyDelete
    Replies
    1. @Ryan - I have not had any issues with IE.

      But I am using IE 11. What version are you testing on? Also, any chance you can share a screenshot using http://snag.gy/ or something similar?

      Delete
  17. The logo I uploaded in 8.53 tools is off when I upload it to 8.54 tools. It's exactly the same image but now it's displaying about 1/4 inch below and covers the head line. Any idea why that would be? No other modifications were made.

    ReplyDelete
    Replies
    1. @RL Myers - How did you load the logo on to your 8.54 application? Lot of things have changed with the PeopleSoft delivered code related to Branding in 8.54. I am wondering if it could be because you brought forward some of the existing branding customizations from 8.53 to 8.54.

      If you had customizations on the PT_BRANDING app package in 8.53, then you might want to re-think if you really want to bring it forward to your 8.54 environment. Starting 8.54 you can configure a lot of things without having to customize code for Branding tasks. So you might be better off re-implementing your branding in 8.54 rather than retrofitting.

      You probably are aware of these concepts already but you might want to go through this blog post and some of the links I provided towards the end for steps to incorporate branding in 8.54.

      Let me know if this makes sense and/or if you have any further questions! :)

      Delete
  18. Hi Sasank,

    I got my hands on an 8.54 Interaction Hub PUM image a few weeks ago and the first thing I noticed was how much the branding framework had changed from how it is in 8.53. The tree structure was pretty confusing but going through this series of posts was extremely enlightening. Thanks for doing this!

    ReplyDelete
    Replies
    1. Rauhan - Thanks for the feedback. Glad to hear that these posts are serving the intended purpose! :)

      Delete
  19. Hi Sasank,

    Thanks for your post regarding branding.

    Could you please let me know how to change the logo in Peoplesoft Login page.

    Thanks.



    ReplyDelete
    Replies
    1. Glad you figured it out. For the benefit of others, the PeopleSoft login page actually resides on the web server and cannot be modified using any of the Branding options or by updating objects in App Designer.

      To update/customize the login page we need to modify the signin.html file on the web server. We can find the file under the following directory on the web server:
      /webserv//applications/peoplesoft/PORTAL.war/WEB-INF/psftdocs//

      Also, consider customizing the following files for consistency.
      signin_fmode.html (used in Fluid)
      signintrace.html (used for Tracing with parameter &trace=Y)

      If you want to leverage delivered caching on the web server, then place your custom images in the following directory:
      /webserv//applications/peoplesoft/PORTAL.war//images/


      Delete
  20. I am able to change it now.

    Thanks.

    ReplyDelete
  21. anna please post information on internetportals.and how to give interconnection between peoplesoft in websites

    ReplyDelete
    Replies
    1. Kishor - You might want to post your question on Oracle Technology Network Forums.

      https://community.oracle.com/community/oracle-applications/peoplesoft_enterprise/peoplesoft_general_discussion

      There might be others who can help with your questions. I am not sure I understand your requirements.

      Delete
  22. Hi Sasank,

    Lot of information about branding branding. Can you guide me how to change the default text color of the peoplesoft page.

    -Regards
    Swamy

    ReplyDelete
    Replies
    1. Swamy - I responded to you question on My Oracle Support Community. Hope that helps. Good luck.

      https://community.oracle.com/thread/3890995

      Delete
  23. How do you change the default style sheet based on which web profile you are accessing? We have 4 different web profiles running under one instance. Branding just lets you change it for one web profile. I want to dynamically change it depending on which profile I accessed. So using your example above I can replace the Oracle logo with 4 different values depending on which profile I logged in through.

    ReplyDelete
    Replies
    1. I am not sure if there is a way to control the branding based on the current active web profile.

      Would these 4 web profiles be served using different URLs? If so, you could write some javascript/jQuery to conditionally replace logo image.

      You could also try to use a different Portal definitions for each web profile. I know you can assign Default Themes to Portal definitions using the Assign Themes page (Main Menu > PeopleTools > Portal > Branding > Assign Themes). Thanks!

      Delete
  24. Yes, all 4 use different URL's. In the past we modified the PT_Branding app package. We were just wondering if we could let those customs go and just use branding. Seems I need to modify PTBR_Branding now.

    ReplyDelete
    Replies
    1. I don't think you need to customize PTBR_Branding App Package.

      If your URLs are different then you could use that to distinguish between different profiles and conditionally override the logo image accordingly (using javascript/jQuery).

      I think I have some examples somewhere on my site or on the OTN forums. Let me see what I can find for you.

      Delete
    2. Here is the example:
      https://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-4d.html

      I used the URL to conditionally remove certain items from the branding. You can use the same approach to override the logo instead.

      Let us know how you end up tackling this requirement.

      Delete
  25. Followed everything you recommended and it all worked great. Thank you. Another question, rather than having to control each element in Branding based on the login URL would there be anyway to change the default branding theme upon login? This way I could just build a default theme for each of my sites and swap them in and out depending on the login URL.

    ReplyDelete
  26. Actually found what I was looking for. You can use Assign Themes to override the default theme based on the portal logged into.

    ReplyDelete
  27. Glad you did! I was going to ask if the portals will be different for each of your web profiles, if so then the Assign Themes would be your ideal solution!

    I just saw that I previously mentioned that in response to your first comment but we got side tracked with the dynamic logo override option. :)

    In case, we had been in a situation where all four web profiles used the same portal (which is a possible scenario) and if we are not averse to customizing then we could write some dynamic logic on the getCurrentThemeAssignmentForPortal method under PTBR_BRANDING.BrandingManager.OnExecute. Just wanted to mention that as a worse case scenario workaround.

    Again, I am glad you have separate portals so you are actually leveraging the Assign Themes functionality! :)

    ReplyDelete
  28. Hi Sasank,
    Really helpful blog. It worked really well! However, the logo changes depending on the %DBNAME. You said something about putting it in basic html but unsure how all the pieces fit together Css/HTML/Javascript within the branding Can you suggest how to do that? Thanks!

    ReplyDelete
    Replies
    1. meaning, the logo needs to change depending what database you are logged into.

      Delete
    2. If you want to write some dynamic javascript then you could follow something like this:
      https://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-4d.html

      If it is getting too complicated to handle via JavaScript then may be you could use some server side coding (PeopleCode) to handle this requirement. You can refer to Cache's PeopleSoft Blog where he has addressed a similar scenario:
      http://cache-peoplesoft.blogspot.com/2015/06/peoplesoft-854-dynamic-branding.html

      Let us know how you end up handling it!

      Delete
  29. A very well done explanation of branding changes. Easy to follow and thorough.

    ReplyDelete
  30. Hi Sasank,
    Very nice info you've got here :)
    Do you, by chance, know the answer to the following 2 questions :
    1. after restart of WebServer (clear cache too), when log-in first time in PS in the cache directory a couple of .css files are generated. Do you know based on what are they generated? I did modify in App Designer a class from the default stylesheet and in the .css I find 2 entries for this class : one mine from App Designer and another from I don't know where. And this second has a different color which overwrites my color from App Designer.
    2. How could we migrate to next environment a Header/Footer defined in Web and which also contains a Basic HTML element (HTML code which is accessed via hyperlink Additional Options, Static HTML field)
    Thank you very much

    ReplyDelete
    Replies
    1. For the 2nd question found - PS_PTBR_LTELTAT.PTBR_ATTR_LVALUE
      Hope you could guide me on the question #1.
      Thank you very much!

      Delete
    2. 1. What are the names of these two style sheet/css files? It may be that a delivered style might be overriding your style class.
      2. Review the following posts:
      http://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html
      http://pe0ples0ft.blogspot.com/2015/04/peopletools-854-branding-objects.html
      https://support.oracle.com/epmos/faces/DocumentDisplay?id=2011383.1&displayIndex=1

      Thanks!

      Delete
  31. My PS_PTBR_OBJECT_TBL table is empty, as I modified the class properties in App Designer.
    1. I copied the standard PTSTYLEDEF_TANGERINE and created a CUST_PTSTYLEDEF_TANGERINE_92.
    2. Here I modified multiples classes, one of which is PSSRCHRESULTSHDR (here I modified the font to White).
    3. Setup this stylesheet as default on the theme.
    4. Restarted Webserver + cleared cache
    5. After longin, in the CUST_PTSTYLEDEF_TANGERINE_92_148.css from the cache, there are 2 entries :

    .PSSRCHRESULTSHDR{font-family:Verdana,Arial,sans-serif;font-size:9pt;font-weight:bold;font-style:normal;color:rgb(255,255,255);background-color:rgb(88,29,116);}

    and somewhere below :

    .PSSRCHRESULTSHDR:link, .PSSRCHRESULTSHDR:visited {
    border-style: none;
    color: #426a92;
    font-family: Arial,sans-serif;
    font-size: 8pt;
    font-weight: bold;
    }

    6. When I havigate to a search page and search for some data, the color of the text from the header is #426a92 and not white. Looked in the PSSTYLECLASS table and updated all classes so no more color 9595458 is present, but after restart/clear of cache, the same .css is created.
    Also I found some comments in this .css, like :
    // min-width doesn't work in IE. This is a hack to ensure that when Row labels have a minimum width of 70px.

    but didn't find this on unix server (webserv directory) not in the PeopleCode (thought it's generated by an App Package - PTBR_BRANDING) but no luck.
    If I knew who generates this .css, I'd see what additioanl changes I have to made

    Thank you for your help Sasank!

    ReplyDelete
  32. Solved - the PTSTYLEDEF_TANGERINE StyleSheet contains also some FreeForm Sub StyleSheets, one of which is PTPUSHBUTTON_CSS3 and here we find the overriding of PSSRCHRESULTSHDR defined in PSSTYLEDEF_TANGERINE.
    Thanks again and have a good one Sasank!

    ReplyDelete
  33. Great! Glad you figured it out. What tools version are you on and what delivered theme did you clone?

    I was going to suggest that you might want to look at PTSTYLEDEF_TANGERINE (Style Sheet) > PSSRCHRESULTSHDR (Style Class - Fixed Form) > Go to the Miscellaneous Tab > Under Pseudo Classes - Look at the classes defined for Link and Visited > They are pointing to PSSRCHRESULTSHDRTXT which is also part of PTSTYLEDEF_TANGERINE.

    Anyway, all that said, I am glad you got it working. I would suggest that you take a look at my second post (see link below). Instead of directly updating the style sheet on the theme or Branding System Options (to point to your custom styles), I would suggest that you let your custom theme use the delivered style sheet. You can then override just the styles that you want to change using the "Additional Style Sheet Objects" grid on Branding System Options). That way, you are still using the delivered styles for the most part (and any new updates that might come through as part of your tools patching/upgrades) and at the back end you will just overlay your custom styles.

    Thanks!
    http://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-2.html

    ReplyDelete
  34. Hi Sasank,

    This is really terrific information. Thanks for sharing it to us.

    Today, i did some configuration stuff in My Page Dashboards & Learning Home Dashboards in ELMS v9.2 and PeopleTools v8.54. I have selected required pagelets and pagelet option as REQUIRED. When i have moved on to TAB LAYOUT in Structure & Content page and did the alignment of those pagelets. I am not able to see same alignment of those pagelets when i login as Employee or Manager. Infact i can seel all the pagelets which are listed but the alignment is not as per the setup i did. I have cleared Web Server Cache & Bounced it. I have cleared CACHE in my system in all browsers as well. Still alignment looks question mark. Kindly help in resolving this issue?

    ReplyDelete
    Replies
    1. Does this issue occur for all users or just the one user are testing with? I wonder if the test user has done some personalization on the Classic Homepage?

      Also, what is the option you selected for the drop down in the Tab Content page? Opt-Dflt, Optional, Req-Fix?

      Delete
  35. Sasank, Thanks for detailed post. Helped to display custom logo in 8.55.05 database. Kudos. Gautam

    ReplyDelete
  36. I have a page with an HTML object and I am trying to change the font through Component Branding. I added this:
    .PSHYPERLINK{
    color:#ff0000;
    }
    to the custom style sheet. But its not changing it in the HTML Area. Can you override a HTMLAREA on a page?

    ReplyDelete
    Replies
    1. Is the HTMLAREA using .PSHYPERLINK? If so, then yes it should work.

      Although, there is a gotcha with Component Branding at least in PT 8.54.

      Check this thread out on MOS Community:
      https://community.oracle.com/thread/3647802

      Thanks!

      Delete
    2. its not PSHYPERLINK, its a step process and shows the path. example Step 2 of 4

      Step 1 --> Step 2 --> Step 3 --> 4 and it bolds the current step.

      The HTML area is populated using PeopleCode and I am assuming the Component Branding has already happened.

      Delete
    3. Yes. The component branding will occur before PeopleCode.

      My question/assumption was, you said you changed the style class .PSHYPERLINK using Component Branding, so are using it somewhere in the HTMLAREA and expecting your custom .PSHYPERLINK to take effect?

      Like I said, component branding should work except the issue I previously mentioned regarding PeopleTools 8.54.

      You can easily verify if the component branding has added your custom style sheet by looking at the HTML elements using any browser's developer tools ? inspect element feature (Google Chrome is my favorite). If it is not, then you may be running into the 8.54 issue (https://community.oracle.com/thread/3647802).

      If you are seeing the custom style sheet as part of the HEAD in the HTML, then there may be other issues with the style override. Inspect the specific element in question and see how the styles are getting overlaid (again using any browser's developer tool).

      Delete
  37. Seems Like with 8.55.16 I am getting the following errors in Work Lists
    PT_COMMON_MIN_57.js:2032 Uncaught TypeError: Cannot read property '1' of null
    at getScriptUrl (PT_COMMON_MIN_57.js:2032)
    at PT_COMMON_MIN_57.js:2073
    at PT_COMMON_MIN_57.js:2073
    PT_COMMON_MIN_57.js:2032 Uncaught TypeError: Cannot read property '1' of null
    at getScriptUrl (PT_COMMON_MIN_57.js:2032)
    at PT_COMMON_MIN_57.js:2073
    at PT_COMMON_MIN_57.js:2073
    PT_COMMON_MIN_57.js:2032 Uncaught TypeError: Cannot read property '1' of null
    at getScriptUrl (PT_COMMON_MIN_57.js:2032)
    at PT_COMMON_MIN_57.js:2073
    at PT_COMMON_MIN_57.js:2073
    PT_COMMON_MIN_57.js:6817 Uncaught TypeError: Cannot read property 'classicBackButton' of undefined
    at AddToHistory (PT_COMMON_MIN_57.js:6817)
    at WORKLIST:1304
    PT_PAGESCRIPT_win0_MIN_17.js:1158 Uncaught TypeError: Cannot read property 'classicBackButton' of undefined
    at UpdateBreadCrumbs (PT_PAGESCRIPT_win0_MIN_17.js:1158)
    at HTMLDocument.onLoadExt_win0 (WORKLIST:218)
    at init (PT_COMMON_MIN_57.js:1374)
    at handle (PT_COMMON_MIN_57.js:1478)
    at element.handle (PT_COMMON_MIN_57.js:1413)
    PT_AJAX_NET_MIN_17.js:145 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
    (unknown)
    Object
    (unknown)
    Object
    PT_PAGESCRIPT_win0_MIN_17.js:1259 Uncaught TypeError: Cannot read property 'getStoredData' of undefined
    at preSubmitProcess_win0 (PT_PAGESCRIPT_win0_MIN_17.js:1259)
    at submitAction_win0 (WORKLIST:119)
    at :1:1

    ReplyDelete
    Replies
    1. @William - I have implemented the Branding detailed in my posts in 8.55.16 without any issues. Including the JS Injection Framework as detailed in my post here:
      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

      You may want to remove all Branding configurations/customizations to check if the error still persists.

      What event related to Work Lists is triggering this error?

      Delete
  38. Hello Sasank,

    Thanks for the wonderful posts regarding fluid and it is really helpful in many ways. Also, I do have a requirement in peopletools 8.54, which is to redirect to fluid sigon page when we are accessing from mobile and classic sign on page when we are accessing from desktop. Currently we are able to do it by appending the "fmode = 1" with the URL and we have modified the sigin_fmode.html to incorporate our customizations. IS there any other way shall we achieve this with out modifying the URL. Basically, with the same URL, we have to redirect to different sign on pages based on the device (mobile/desktop). It would be great, if you provide some advise on this. Thanks!

    -Raja

    ReplyDelete
    Replies
    1. Hi Raja,

      If you are on 8.54, there is an option which is no longer available in 8.55+ to only allow Fluid on the mobile (basically disable Fluid for the Desktop). I believe that is what you are trying to achieve. You need to configure this on the web profile general properties tab as show in this link:

      https://snag.gy/HUPcpY.jpg

      Make sure you set this for the appropriate web profile that is used in your environment. This screenshot is just an example.

      Delete
    2. I should add that it would take care of the end result that you would like to achieve.

      If you are only concerned about redirecting a different signon page (for displaying different information at login screen) then your custom approach is the only way. But I believe, unless you are displaying different information on the login screen, you don't need to use different signon pages if you are trying to control the end result of disabling 'Fluid' on the desktop.

      Let us know if this helps.

      Delete
    3. Hello Sasank,

      Thanks much for your response. We have already done the configuration you have mentioned for disabling Fluid for the Desktop. However, it has an impact only on home page (once we login, instead of classic menu, we will see fluid home for mobile). What we are trying to do is trying to change the sign on page itself based on the devices. If we come from desktop then the classic sign on page has to appear where as from mobile, has to see the fluid sign on page).

      Currently it is getting classic sign on page for both mobile as well as desktop unless we append the "fmode=1" with the URL. We have modified the signon_fmode.html but still it is not automatically taking to fluid sign on page. If you have any approach to follow please advise.

      Also, in such cases, Do we need to have 2 URLS (1 is for desktop and 1 is for mobile)? Please advise this too. Bcoz Oracle is saying that we have to maintain 2 URLs based on PC/Tablet. We are also trying to achieve the same with customization. Please let us know, your thoughts on this too.

      Thanks much!

      -Raja

      Delete
    4. Hi Raja,

      To my knowledge, regardless of whether you go to cmd=login or cmd=login&fmode=1, both take you to similar looking pages. They are both responsive. At least, that is what I have seen.

      Also, if you look at the following document in My Oracle Support:
      E-PIA: Web Profile/Expire Page (expire.html) Contains "&fmode=1" In The 'Sign In To PeopleSoft' Link (Doc ID 1995386.1)
      It states "The development team accidentally delivered this logic, and it was meant for internal testing. The fmode logic has been completely removed in PT 8.54.10."

      So, basically, this fmode logic will not be available for longer. I am assuming you are on PeopleTools < 8.54.10? Just wanted to point that out.

      Having said all that, I understand that you may want to display different information based on the device form factor. So, you could use two completely different login screens as you have done or you could use the same login screen and display different information based on device form factor. In both cases, you will need to write your own logic, there is no delivered option for this type of requirement.

      Delete
    5. Hello Sasank,

      Thank you so much again for your response. I really appreciate the commitment you have on responding questions.

      For the first one, no I believe. The page is not responsive for cmd=login, however if we append fmode=1 with it then it is responsive in 8.54. Thats what I can see from the screen. Because we are trying to enable fluid only for mobile/tablet not for PC (so, if we access it from PC then it will be a classic and it will be responsive, if we access it from tablet/mobile).

      Yes, I have seen it before.

      Am with you on the 3rd point (fmode will not be available for longer) and we are in 8.54.19.

      Yes, we are trying to do the same Sasank. Will let you know, if any clarifications.

      Thanks again for your valuable time.

      -Raja

      Delete