Saturday, November 29, 2014

PeopleTools 8.54 - Branding - Part 2

This is a continuation of my previous post on my experiments with PeopleTools 8.54 Branding.

The general theme I would like to continue is to explore how we can leverage the new features and configuration provided in PeopleTools 8.54. The idea is to see how far we can go without having to use App Designer (using just the online configuration).

Now that we learnt how we can easily change the logo of the application in Part 1, let us see how we can further brand the application.

Changing the background color of the Branding Header:



We can see from the screenshot that the background color for the branding header div (pthdr2container) is actually an image PT_HEADERBG_CSS.JPG which is repeated to cover the background entire div (repeat-x).

Note: If you are wondering how we can see html and css generated on the browser as in the screenshot above, I am using Firebug which is a Web Developer add-on for FireFox. Most browsers have Web Developer support similar to Firebug. It is highly recommended to use such tools to understand the html, javascript and css that are being used on a page.

PT_HEADERBG_CSS image for reference:






Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note: In this case, I am using a background image that is of similar height and width as the delivered PT_HEADERBG_CSS image because my custom branding header div (pthdr2container) is of the same height as the delivered div. If the custom branding header div is of a different height then please be sure to create your custom background image of similar height to cover the entire div.


- Create custom style to override the background on the branding header div (pthr2container):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)


We can see how a new style was added and how it uses the id selector (#) and class selector (.) to specifically target the element (div) with id = "pthdr2container" and class = "pthdr2container". This style is referencing the custom background image CSK_HEADERBG_CSS.

- Include custom style sheet definition on the Branding System Options Page:

PeopleTools > Portal > Branding System Options


This would ensure that our new style sheet is also loaded while rendering the page.

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).



Changing the background color of the Navigation Drop-Down Menu:



We can see in the screenshot that the background color for the Navigation Drop-Down Menu is coming from the image PT_BREADCRUMB_CSS3. The nav element (pthnavcontainer) is enclosed within the dropdown menu div element (ptdropdownmenu).

PT_BREADCRUMB_CSS3 image for reference:





Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note:Again, in my case I am using a custom background image that is of the same height as PT_BREADCRUMB_CSS3.


- Create custom style to override the background on the Navigation Drop-Down Menu (nav element):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)


We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#) and the descendant selector (e.g.: X Y, where Y is a descendant of X) to target the element (nav) with id = "pthnavcontainer" and is a descendant of element with id = "ptdropdownmenu". This style is referencing the custom background image CSK_BREADCRUMB_CSS3.

Note: As we already have the style sheet CSK_BR_GEN added to the 'Branding System Options', we can directly proceed to test these changes.

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).





Sticking with our theme, we have now implemented a custom logo, custom branding header background image and custom navigation drop-down menu background image by just using the PeopleTools Branding features and configuration available online.

Changing the font color of Branding Header System Links (Home, Worklist, ..., Sign out):



We can see in the screenshot that the System Links on the Branding Header is using the style class of PSHYPERLINK (color: #004b91). As most of you know, this style class is widely used across the application.

Let us see how we can use css to specifically target the required elements and override the font color:

- Create custom style to override the font color of the Branding Header System Links:


We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#), class selector (.) and the descendant selector (e.g.: X Y, where Y is a descendant of X). This style would target all elements with class = "PSHYPERLINK" and are descendants of element with id = "pthdr2syslinks".

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).



Changing the font color of the Navigation Drop-Down Menu:



We can see from the screenshot that the font color (#284562) of the Navigation Drop-Down Menu is using the style .pthnav a (all anchor elements which are descendants of element with class = "pthnav").

Let us see how we can override this delivered font color:

- Create custom style to override the font color of the Navigation Drop-Down Menu:


We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is intended to specifically target all anchor elements (a) that have a descendant hierarchy of #ptdropdownmenu #pthnavcontainer .pthnav. The descendant hierarchy would target all anchor tags that are descendants of elements with class = "pthnav" which are in turn descendants of elements with id = "pthnavcontainer" which are in turn descendants of elements with id = "ptdropdownmenu".

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).



Let us now look at how we can further branding our application with some more common branding requirements.

Note: I am not a big fan of the bright red font color on the Branding Header (it was just used as an example) and besides the orange/yellow and delivered blue go well with the CSK team colors. So I will be reverting the font color changes which I just made for future examples to make it a bit easier on the eyes.

Adding a Hyperlink to the Branding Logo:



Let us assume we want our logo to image to link to another website.

- Create URL Definition to store the hyperlink address:

PeopleTools > Utilities > Administration > URLs


- Modify existing style for the Branding Logo:


CSK_HDR_LOGO was created in example provided in Part 1. We can see from the screenshot that the style has been modified to comment out the content attribute.

- Modify logo element in the custom Header Layout Definition:

PeopleTools > Portal > Branding > Define Headers and Footers

-> Additional Options for leaf cskhdrlogo


We have replaced the existing Static HTML (which was a non-breaking space  ) with an anchor element referencing the URL Definition (href), Image Object (img element) and URL Definition Description (title).

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).


Moving Branding Elements using CSS:


Most organizations would like to print the name of the database (e.g.: DEV, TST, UAT, etc) on the branding header for test environments. Let us move the ptgreetingmessage div to make way for the Database name to be printed on the branding header. We will use css to move the ptgreetingmessage div to the bottom right hand corner of the header.


Create custom style to override the alignment and location of the ptgreetingmessage div:


Modify the ptgreetingmessage (div) leaf on Header Layout for logical ordering:


Test changes:


 

Adding Database Name on the Branding Header:


Now that we moved the ptgreetingmessage div and made way for displaying the database name, let us use custom javascript to achieve this requirement. We could directly use the %dbname meta-html in a div to display the database name but we will be using a javascript to write some logic to only display database name in non-PROD environments.

- Create custom style for the database name:


This style is cloned from the delivered greeting style class to replicate the font and location.

- Add new leaf to represent the database name element on the Branding Header Layout:




We added a new child element under the pthdr2container. This element is a static javascript object (cskdbname) which is ordered after the cskhdrlogo element.

Note; In the javascript, replace PROD_DBNAME with the actual name of the Production Database. The javascript is intended to not display the name of the database for Production.

- Test changes:

Recommendations if you are experiencing caching issues:
  1. Clear local browser cache.
  2. Shutdown, purge cache and reboot the web server(s).



I found that adding static javascript to the Header Layout breaks the "Preview" functionality on the page. Here are the results of clicking/expanding the "Preview" functionality on the "Define Headers and Footers" page when it contains a static javascript object.



The reason this occurred is because the document.write in the javascript is overwriting the page. Let us replace the static javascript with a javascript object to avoid the issue with the preview.



Result:


Note: document.write is not generally recommended. In this case, we got away with it because it is being used at the header level and does not interrupt the page that is loaded during runtime.

Although document.write works in our case, to comply with best practice let us replace the document.write with Document Object Model (DOM).

Modified JavaScript (CSK_DBNAME):

if ("%dbname" !== "PROD_DBNAME")
{
   // document.write("<div id='cskdbname' class='cskdbname'><p>%dbname</p></div>");

   // create div for dbname
   var dbname = document.createElement("div");

   // set attributes and innerHTML
   dbname.setAttribute("id","cskdbname");
   dbname.setAttribute("class","cskdbname");
   dbname.innerHTML = "<p>%dbname</p>";

   // insert dbname div after the cskhdrlogo div
   var logo = document.getElementById("cskhdrlogo");
   document.getElementById("pthdr2container").insertBefore(dbname, logo.nextSibling);

}

We have commented out the document.write and replaced with DOM to create the DIV element, set attributes, set innerHTML and finally added the div to the pthdr2container element. We are using the logo.nextSibling as a logical selector for the next child of pthdr2container after cskhdrlogo because we do not know if ptsearchbox would be displayed at runtime (e.g.: in cases where SES is turned off).


So far we have seen some of the more common branding requirements and we were able to achieve all of them by just using the online configuration pages. I hope this is definitely something everyone would be excited about!

In the next part (as time permits), I would like to look into some of the more advanced branding requirements like using a custom image on the PeopleTools Timeout message (which contains the Oracle Logo), displaying a more dynamic, user specific greeting message, adding Google Analytics javascript and migrating the branding modifications.

As always, I would appreciate any feedback/improvements that could be made to the content of this post.

Custom CSS for Reference:

Object Name: CSK_HDR_LOGO


Object Name: CSK_BR_GEN

49 comments:

  1. excellent post. One additional question. We want to remove the Menu Drop down and have employees access the application through classic pagelet. Have you found an easy way to do this?

    ReplyDelete
  2. @Anonymous - Thanks!

    It is very easy to remove the Menu Drop Down.

    Main Menu > PeopleTools > Portal Branding > Define Headers and Footers

    Select your Layout ID that you are currently using in your Theme (e.g.: DEFAULT_HEADER_TANGERINE)

    Find the leaf element that is called ptdropdownmenu and delete it using the DELETE button (this will appear once you mouse click on the leaf).

    You can also see this in the "Preview" section to be sure that you are removing the right leaf element. Hope this helps!

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

    ReplyDelete
    Replies
    1. It's a dead link. :(

      Delete
    2. Which one of the links are you having trouble with?

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

    ReplyDelete
  5. @uni_rychannel - you might want to check the order of the dbname element in the pthdr2container div (part of the header definition).

    I used the following style and did not do anything additional for the dbname color and position.

    #pthdr2container.pthdr2container #cskdbname.cskdbname {
    display: inline-block;
    color: #426a92;
    margin: 0 5em;
    vertical-align: super;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: bold;
    }

    ReplyDelete
    Replies
    1. HI Sasank...I am able to display the name of database in my peoplesoft environmeny beside the oracle(yours csk logo) but it is getting displayed only in the preview section.It is not reflecting in the Header section in the PIA.All the changes that I make gets reflected in preview section but nothing on the header section in PIA.Could you please suggest?

      Delete
    2. @Anonymous

      Please check if the Header that you are modifying is referenced in a Branding Theme (PeopleTools > Portal > Branding > Assemble Themes). And then check if that Theme is used in the Branding System Options Page (PeopleTools > Portal > Branding > Branding System Options). I have detailed these steps in Part 1: http://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-1.html

      If you are still experiencing issues, then try restarting your web server (and also clear the cache).

      Delete
    3. Thanks Sasank!Its working now.gr8!
      Please could you also tell me if we can display the name of the database whcih appers in PSOPTION table(shortname/longame)

      Delete
  6. Hey Sasank. I want to add user id (from which we are login into PIA) below the oracle logo using app package PT_BRANDING in application tools 8.54 and app release 9.2. Please tell me how can I do that.

    ReplyDelete
    Replies
    1. @Anonymous - You can review Part 3 of my posts here: http://pe0ples0ft.blogspot.in/2014/12/peopletools-854-branding-part-3.html

      It details how to add userid on the Branding. You might have to change the position of the html element according to your needs and possibly use a different style to align to the left below the Oracle logo. Thanks!

      Delete
  7. There is a much easier way to show the database name in the header - you just need to add a "Basic Text" element, set the "Text" attribute type to "System Variable", and then pick "%DbName" from the "System Variable Name" drop down. The supported system variables are: %Date, %DateTime, %DbName, %Node, %Portal, %Time, %UserDescription, and %UserId.

    ReplyDelete
    Replies
    1. @Frank Pang - I agree. But if you look at the below text in my blog you would understand that I am trying to add some conditional logic. The idea was to demonstrate how to use javascript to conditionally display something. In fact, in my javascript I am using the %dbname system variable.

      Refer the following text:
      "We could directly use the %dbname meta-html in a div to display the database name but we will be using a javascript to write some logic to only display database name in non-PROD environments."

      Delete
  8. Hi Sasank,
    With %userid,we are getting the user that has logged in.But once the other user login,it shows some other user ID.
    i have cleared the websev and IE cache.But the same issue is occuring.
    Could you please suggest?

    ReplyDelete
    Replies
    1. This behavior is common due to some web profile cache settings that causes the homepage objects to cache at several levels (browser and web server).

      Main Menu > PeopleTools > Web Profile > Web Profile Configuration > Select your current web profile:
      ==> Caching (Tab)

      You might want to review some of the configuration that is appropriate to your environment.

      Did you try purging the web server cache as well as your IE (browser) cache between logging in as user A and logging in as user B?

      Delete
    2. yes I tried purging the web server cache as well as your IE (browser) cache between logging in as user A and logging in as user B..but still shows user A logged in.
      Also went through The web profile config..It seems Ok....Any other approach for the same?

      When I save the javasript object it gives correct userid that has logged on but next time when I loggin with user B..it shows User A only

      Delete
    3. Do you have a load balancer that is additionally caching things? You might want to check that with your administrators.

      Also, you definitely need to review your web profile configuration for this sort of caching issue.

      Please review the following document on my oracle support:
      E-PORTAL: Portal Cache Issues Affect Menu & Navigation Results (Doc ID 614819.1)

      Option 4, 5, 6 seem relevant to you. Thanks!

      Delete
    4. Hi Sasank..I have tried clearing the cache,both for IE as well as web server.But the problem still persist.Is it because of the java script code that has been written?I have used %USERID.
      When I save the javasript object it gives correct userid that has logged on FIRST Time but next time when I loggin with user B..it shows User A only.Also could you please tell me if anything in particular in Main Menu > PeopleTools > Web Profile > Web Profile Configuration > Select your current web profile:
      ==> Caching (Tab)
      I have tried checking unchecking the different check boxes but problem is still existing.Could you please advice on the same?

      Delete
    5. I would have to look at it to suggest any options.

      First of all, what are you doing with %userid? Are you trying to display the userid on the header? If so, did you check out my next part (continuation of this post)?

      http://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html
      Refer Section: Display Dynamic and User Specific Greeting Message using Custom Branding Elements

      Perhaps you could try creating custom Branding Elements for your requirement?

      If you are using javascript and you have already cleared your browser cache, then it is definitely getting cached at the web server level. You could try disabling 'Cache Proxied JavaScripts' on the web profile in a test environment to confirm if that is the case.

      Note: I don't recommend disabling caching on the web profile in production because it could lead to general system wide performance degradation. My suggestion would be to look into using custom system elements (as previously stated). Alternatively, if you can explain your requirement and your usage of %userid, then I could suggest other options.

      Thanks!

      Delete
  9. I want to first thank you for your blog it have been very helpful for our branding upgrade. I was wondering if anyone else has run into this issue. When I use the basic text with type system variable %UserDescriptionit works and displays the correct info, but when I use the %UserDescriptionin the javascript it displays the static text "%UserDescription". I can get other system variables to display correctly with the javascript but not %UserDescription. Any thoughts?

    ReplyDelete
    Replies
    1. You are very welcome!

      The reason %UserDescription is not working is because it is not a meta-html variable. You can only use meta-html in javascript.

      Refer PeopleBooks for full list of meta-html variables:
      http://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tpcl/langref_AlphabeticalListofMeta-HTMLElements-073b31.html#topofpage

      Here is an example of how I used %UserDescription in an App Package created for a Branding Element Type to display on the branding header as a greeting.
      http://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html
      Refer Section: Display Dynamic and User Specific Greeting Message using Custom Branding Elements

      May be you could create a similar Brandling Element and use that instead of using a javascript? Hope this gives you some ideas. Thanks!

      Delete
    2. Thanks for you reply I will defiantly give that a try!

      Delete
  10. Hi Sasank, first of all I want to thank you for useful and helpful information about branding upgrade. I just wondering if it is possible to create a customized Meta-HTML element that javascript will recognize and display the value? For example %username..

    ReplyDelete
    Replies
    1. I have run into issues with meta-HTML and javascripts objects (which are created using PeopleTools > Portal > Branding > Branding Objects). Ideally, I would expect the meta-HTML references to get resolved at runtime as these javascripts are manage objects (HTML).

      Although, I have not written custom meta-HTML myself, I know it can be done. I worked around some of the meta-HTML issues while toying with Fluid so the below post might give you a few ideas.
      http://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5b-fluid.html

      Also, Jim Marion has described how to write custom meta-HTML in his book. That is definitely the best resource for your requirement:
      PeopleSoft PeopleTools: Tips and Techniques - Chapter 9 - Page 350

      Delete
    2. Thank you Sasank, I will defiantly try that.

      Delete
  11. Sasank, we upgraded to 8.54 tools in one of our test environments. The default stylesheet - PSSTYLEDEF_TANGERINE is not being applied automatically to the pages.

    Checked the "Branding System options" where we are using "DEFAULT_THEME_TANGERINE" as the default theme.

    Any suggestions, please.

    Thanks,
    Sree

    ReplyDelete
    Replies
    1. Hi Sree,

      I am not sure why the theme is not getting applied after the upgrade. I am sure you check this but just to be sure you may want to see if the web server cache was cleared, etc.

      If all that looks good and your theme on Branding System Options is pointing to DEFAULT_THEME_TANGERINE then I wonder if there were any steps missed during the upgrade to 8.54.
      Refer to this comment thread:
      http://pe0ples0ft.blogspot.com/2014/11/peopletools-854-branding-part-1.html#c5490904228159443836

      Let us know how it goes!
      Thanks,
      Sasank

      Delete
  12. One other question, Sasank. Where do I find the properties for "ptgreetingmessage" and "ptdropdownmenu"

    Thanks,
    Sree

    ReplyDelete
    Replies
    1. Are you referring to the style properties? You could just inspect the DOM elements on the browser using developer tools to figure out the stylesheet object.

      Let me know if that answers your question.

      Delete
  13. Hello Sasank,

    I wanted to two separate theme in my peoplesoft application and theam will be loaded based on roles.

    when i tried above mentioned mentioned, i can achieve the same for 2nd theme, as default theme will be only one.Could you please suggest how can modify the e background color of the Navigation Drop-Down Menu and system link like (home, logout, etc..).
    I am having difficulties in adding additional style sheet to custom 2nd theme.

    ReplyDelete
    Replies
    1. Hi Gaurav - I have not tried this myself but I believe you can assign themes to specific roles using the Assign Themes page.
      Navigation: PeopleTools > Portal > Branding > Assign Themes

      PeopleBooks (8.54 and 8.55):
      http://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tprt/task_AdministeringSystemBranding.html#u243e4a38-1a69-40df-afca-ed49df22cd5f
      http://docs.oracle.com/cd/E66686_01/pt855pbr0/eng/pt/tprt/task_AdministeringSystemBranding.html#u243e4a38-1a69-40df-afca-ed49df22cd5f

      Delete
    2. I just tried it and it seems to work without any issues.

      Refer:
      https://pe0ples0ft.blogspot.com/2016/08/peopletools-branding-role-based-themes.html

      Delete
  14. Hi, can we hide/ unhide the pshdrlinks based on peoplesoft pages. For eg can we did show it on landing page and hide it on normal peoplesoft component pages ?? By the way excellent post

    ReplyDelete
    Replies
    1. Yes. You can do that. You may have to write some custom javascript code or update the app class that generates the header links.

      Delete
    2. Can you pls, help me on this

      Delete
  15. Hi Sasank,
    Can we update or insert values in to a record when we click on header link?

    ReplyDelete
    Replies
    1. Sayeed - Yes. If your header link is done as a custom implementation (with an App Class) then you can perform any SQL updates in the PeopleCode.

      Refer: Part 3 as a starting point.

      Delete
    2. We have tried with custom app class peoplecode to perform SQL actions, But the method triggers only first time after login. It is not updating every time when we click on Header link.

      Delete
    3. You may want to raise a service request with Oracle. I have not seen this sort of issue. The App Class should fire regardless of whether it is the first time or the subsequent time.

      Are you seeing any errors on the client side (browser console)?

      Delete
    4. No error, But it updates only first time after login. I have called a javascript after Record update peoplecode. Javascript is getting triggered on each click on header click but Peoplecode record update is updating only once.

      Delete
  16. Hi Sasank,
    will it be able to call a peoplecode event from Header link?

    ReplyDelete
    Replies
    1. Yes. It really depends on the implementation of the underlying Branding Element that you are adding to the Header Link. If you see some of the delivered links, they are implemented using PeopleCode (app class). Refer the following blog post section where I have some details on how to add custom links to the header implemented via Branding Elements (using an Application Class):
      PeopleTools 8.54 - Branding - Part 3 - Custom Links

      Delete
  17. How we can give a URL Link to Greeting TEXT on Header.

    ReplyDelete
    Replies
    1. I would recommend using the following blog post as a starting point:
      https://pe0ples0ft.blogspot.com/2014/12/peopletools-854-branding-part-3.html
      Go to "Display Dynamic and User Specific Greeting Message using Custom Branding Elements" section.

      You can control the HTML using the App Class where you can add a hyperlink as per your requirements.

      Delete
    2. In your page header having "HCM92854" same place i have to create my "TEXT" and i want to add URL to that text. i have done in 9.1 app package using HTML its working. now requirement for 9.2. plz contact amanp1419@gmail.com ASAP.

      Delete
  18. Hi Sasank, this is a wonderful blog. Thank you very much. I have a question: Can we add a footer to all Peoplesoft custom pages components using branding? Our client wants to display a Proprietary banner statement in all the pages. Can you please help?

    Thanks
    Mydeen

    ReplyDelete
  19. Hi I have a question with regards to the branding on PT 8.54. I have implemented Live Chat system (slaask.com) and would like to pass %UserDescription and %EmailAddress SYTEM VARIABLE. %UserID and %DbName works fine, but rest of the system variables don't get passed. They appear as %UserDescription or %EmailAddress.

    Any idea what might be the cause or any hints how to make it work?

    Also, is there a way to expose more system variables to third party via html or javascript objects? Like component name or user roles etc.

    ReplyDelete
    Replies
    1. Hi Mamuka - I have encountered the same problem as well. I don't think all meta-html variables/functions are available in JavaSript.

      I worked around this problem by writing IScript functions and calling them. E.g.: I created an IScript to provide the web server cache directory location/URL for an Image to work similar to %Image meta-html function.
      Refer: https://pe0ples0ft.blogspot.com/2016/05/peopletools-855-using-oracle-jet-jquery_29.html#1

      Unfortunately, this will mean we will have to make an additional request for the IScript! But I hope this gives you some ideas.

      Delete