Wednesday, April 20, 2016

PeopleTools 8.55.x - Branding - Part III - Custom Macros and More

In my previous blog posts, we saw how we can brand PeopleSoft applications which are on PeopleTools 8.55 using the new Theme Macro Sets functionality (Part I and Part II). The Theme Macro Sets provides a great way to override targeted styles (e.g.: Header Logo, Icon images, background colors, etc.) using online configuration. The delivered Them Macro Set contains 177 macros which targets specific styles for some common Branding tasks.

Creating Custom Macros:

The concept and functionality of the Macro Set are great, but what if the 177 macros that are available do not meet our requirements? In Part II, I demonstrated how we can fall back to using the Theme - Fluid Global Override Style Sheet under such circumstances. In this section, I will detail how we can still bring those custom style sheet overrides into the Theme Macro Set as custom macros. Once we create the macros, we don't need to update the style sheet anymore. All we need to do is update the macros if there are any further changes (I guess making it a little user friendly depending on who is making the changes). This is particularly useful for customers who have a more dynamic branding which changes frequently depending on the time of the year vs being static after implementation.

Macros in Theme Macro Sets are nothing but variables used in the Theme - Fluid Global Override Style Sheet which are substituted at runtime.

Going back to my example in Part II, we used the following styles in the Theme - Fluid Global Override Style Sheet for changing the Dot Styling on the Fluid Landing Page Footer:

.lpfooter .dot.on {
  background: #EEEB4D;
}
.lpfooter .dot {
  background: #E8E29E;
  border: 2px solid #1d418c;
}

Let us re-write the above styles using custom variables (macros).

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Edit the custom Fluid - Global Override Style Sheet (CSK_BRAND_FLUID_TEMPLATE) and update the styles as follows:

.lpfooter .dot.on {
  %CSK_FOOTER_DOT_ON_CSS;
}
.lpfooter .dot {
  %CSK_FOOTER_DOT_CSS;
}


Now, let us add these macros (variables) to our Theme Macro Set:

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Select the custom Theme Macro Set and add the custom variables in the 'Macro List' grid:


Results:


Similarly, we can add other Fluid Style Sheet overrides as custom macro definitions if necessary.

Moving along, the rest of this blog details some advanced branding tasks which can be done in PT 8.55 similar to PT 8.54. I am posting links for those items here for continuity.

Creating an environment specific header for Non-Production databases:

Fluid Housekeeping Steps: Fluid Branding - 8.54 - Part 5B
Task steps: Fluid Branding - 8.54 - Part 5C

We will notice that the above steps would only work for the "Fluid" pages. To make it work on "Classic" pages, we need to perform some additional steps.

Step 1: Update the javascript to modify the jQuery selectors

// Display Database Name using jQuery once the document is ready;

var $jq1 = jQuery.noConflict();

$jq1(document).ready(function(){

   // Make sure we are only adding the div once;
   if ( $jq1("#cskdbnamecontainer").length === 0 ) {

      // Add div to display DB Name;
      $jq1( "#PT_HEADER, #ptbr_header_container").prepend( "<div id='cskdbnamecontainer' align='center'><span id='cskdbname'>Test Environment: %dbname</span><a href='#' id='cskdbnamehide'>Hide</a></div>" );

      // Add jQuery to hide the DB Name when the 'Hide' link is clicked;
      $jq1("#cskdbnamehide").click(function(){
         $jq1("#cskdbnamecontainer").hide();
      });

   }

});



You can see that I added an additional selector (#ptbr_header_container) to the jQuery so that the contained javascript code executes for Classic as well.

Step 2: Inject custom styles into Classic - Theme Style Sheet

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Append the following styles to CSK_BRAND_CLASSIC_TEMPL_FLUID


Custom styles for reference:

/* Fluid - Display DBName for non-Prod environments */
#cskdbnamecontainer {
   height: 26px; 
   background-color: rgb(204,204,204);
}
#cskdbname {
   color: rgba(229,47,0,1);
   line-height: 26px;
   font-weight: bold;
   padding-right: 10px;
}


Step 3: Inject the custom javascript into Classic using Branding System Options

NavBar > Navigator > PeopleTools > Portal > Branding > Branding System Options


Results:



Adding Custom Links to Actions List Menu:

Fluid  Branding - 8.54 - Part 5C

Again, we will notice that the above steps would only work for the "Fluid" pages. In order to add custom links on "Classic" pages, we need to perform some additional steps to update the header definition (CSK_HEADER_FLUID).

NavBar > Navigator > PeopleTools > Portal > Branding > Define Headers and Footers





Note: The reason I am using a Static URL as the means to add the custom URL is because the URL object option does not seem to substitute the URL correctly. It appears to be a bug in 8.55.

Results:


Overriding the Favorite Icon:

Fluid Branding - 8.54 - Part 5C

Again, this will only work for "Fluid" pages.

Here are the steps to create a Favorite Icon for Classic Pages:

Step 1: Update custom javascript - CSK_FL_IR_JS

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Update CSK_FL_IR_JS javascript object as follows:


Javascript for reference:

// Get Image URL for CSK_LOGO (FavIcon);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskFavIcon&img=CSK_LOGO_FAVICON' type='text/javascript'%3E%3C/script%3E"));

var $jq = jQuery.noConflict();
$jq(document).ready(function(){

  // If Classic;
  if ( $jq("#ptbr_header_container").length > 0) {

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

     // set attributes and innerHTML
     favIcon.setAttribute("rel","shortcut icon");
     favIcon.setAttribute("href", cskFavIcon);

     // insert favIcon div in the head element
     document.getElementsByTagName('head')[0].appendChild(favIcon);

  } else {

 
     // Replace Browser Favorite Icon(s);
     $jq('head link[href*=LOGO_FAVICON]').attr('href', cskFavIcon);
 
  }

});


Results:



Overriding the "Processing" Icon:

PT_PROCESSING_FMODE:


Fluid Branding - 8.54 - Part 5D

30 comments:

  1. Sasank, your posts are awesome! Not sure how long it would have taken me to figure all of this out for myself (if ever!).

    We are actually in the middle of upgrading to 8.55 ourselves, so I was hoping you could provide information on some other things:

    1) In the fluid header, is there a way to consistently keep the Header Logo present? (keeping in mind that we don't want to necessarily lose the "back button" functionality)

    2) In the fluid footer, would it be possible to insert text somewhere, such as a link to our Privacy Policy?

    Thanks again, keep blogging!

    ReplyDelete
    Replies
    1. Hi Rauhan - Thank you! Sorry for the delay in responding.

      1. This is going to be tricky. The reason being, we will be running out of space quite easily on the header with the Back Button, Page Title, Other Icons, etc. especially on a small form factor. So to add a logo permanently in the PeopleSoft delivered header for the transactional/non-homepage pages might be challenging. That said, you could add an additional layer of branding header similar to the example I provided for adding the Database name to the header.Click here. May be you could add your logo to a similar div?

      If you want to add it to the delivered Branding header frame, then you will need to play with PT_HEADERPAGE and/or write some custom css+jQuery to add the logo and then shift the rest of the contents (including the Back button) accordingly.

      2. Great question. Not sure how we can achieve this in Fluid. I never thought about that requirement. There is a footer definition associated with the Branding Theme definition but I believe that only works for Classic. Again, you could use the same link I provided for question 1 and try to add something custom in the footer in a similar fashion. I will definitely post back a comment in this thread if I find an efficient way to make this work.

      Thanks!

      Delete
  2. hi sasank, I regularly visit your blog, very informative. Can you share some insight on people tools upgrade from 8.53 to 8.55

    ReplyDelete
    Replies
    1. @sandeep909 - Thanks!

      That seems like a very broad topic. Are you looking for any specific information?

      If you are not on it already, there is a good dicussion forum on OTN specifically dedicated to Lifecycle Managment.
      https://community.oracle.com/community/support/peoplesoft/install_upgrade_-_psft

      This might be a great place to ask questions on upgrades!

      Delete
  3. Hello Sasank, Very Interesting blog, I really like how you have put all branding information together.

    Have you ever thought or tried to change the position of icons top header bar (like Menu, notification, action) icons. for. e.g. moving Menu icon from Right side to Left side. Introduced left horizontal menu and based on device it will resized from icon only menu to Icon with text menu.

    Thanks,
    Bhavik

    ReplyDelete
    Replies
    1. If you go into the style sheet for pt_brand_fluid or your version of it there is a section of code that positions the icons: /* Set up positioning for all buttons including the go button in the search tray */
      :root:not(.psc_mode-ag) .ps_box-button.ps_header_button .ps-button:after, /* 855-806 */
      :root.psc_mode-ag .ps_box-button.ps_header_button:not(.ps_header-next):not(.ps_header-previous) .ps-button:after, /* 855-806 */
      .ps_box-button.pts_gsearch_go .ps-button:after
      {
      position:absolute;
      height:1.72em;
      padding:0.7em;
      width:1.72em;
      top:0;
      %AlignStart:0;
      %AlignEnd:0;
      bottom:0;
      margin-top:-1px; /* special adjust */
      }

      I changed some of those elements to move the icons down a bit. However, the hover is off. Not sure how to fix that yet.

      Delete
    2. I am sorry. I know this is a very late response. I missed this comment. But I hope it gives you some ideas if you are still looking for a solution.

      If you looking to push down the icons, you may want to try just padding the top, instead of padding 0.7em on all sides.

      I would suggest the following padding instead:
      /* padding:0.345em; */
      padding: 0.7em 0.345em 0.345em 0.345em;

      Delete
  4. Bhavik - Thank you!

    No. I have not tried to do something like that. But it should be possible with some CSS3 and perhaps jQuery logic.

    ReplyDelete
  5. I am implementing the environment specific header and I ran into an issue. When the header displays on Classic Home it causes the home page to redraw 2 times when navigating there. It only seems to happen when there are pagelets based on component's on the Classic Home Page. If only the Menu Pagelet or other pagelets not based on components are displayed then the issue does not happen. Any suggestion on how to fix this? Otherwise it seems to be working great everywhere else.

    Mario

    ReplyDelete
    Replies
    1. Mario - I am not seeing this issue. You can see in my screenshot below, I added a few component based pagelets on my Classic Homepage.
      https://snag.gy/acUMNZ.jpg

      Although, I changed my bootstrap a little bit since this post:
      https://pe0ples0ft.blogspot.com/2016/06/peopletools-855-using-oracle-jet-jquery.html

      Are you able to share a screenshot using https://snag.gy/ or something like that?

      Delete
    2. Thanks for getting back to me. I didn't mean the header is repeating 2 times. What is happening is the screen is refreshing 2 times so the screen draws then redraws a second time. The header appears once and is correct, it's just that the screen refreshes twice (blinks 2 times as it redraws). Do you think the changes you mention might address this?

      Delete
    3. Sorry - I understand what you meant now. Though, I have not experienced the reloading issue.

      You could try changing the javascript injection part by following these posts:
      Part 1
      Part 4

      Delete
  6. I followed your instructions to use PT_UTIL for the injection of the Bootstrap JS instead of using Branding System Options and that fixed the issue of the Classic Home reloading 2 times. I have not tried the Oracle Jet version yet. Thanks for helping me resolve that issue. Is there any way to get the information contained in other system variables other than %DBname into either the Bootstrap or DBname javascripts? I would like to vary the DBheader information based on user security information. For example %PrimaryPermissionList.

    ReplyDelete
    Replies
    1. Glad to hear that your issue is now resolved.

      I think you can only use meta-HTML variables in javascript (not all system variables that are available for PeopleCode).

      https://docs.oracle.com/cd/E58500_01/pt854pbh1/eng/pt/tpcl/langref_AlphabeticalListofMeta-HTMLElements-073b31.html#topofpage

      Delete
  7. HI Sasank,
    We are upgrading from PT 8.54 to PT 8.55 (staying on CS 9.0 application for awhile). I have followed your steps for getting the environment name into the heading and cannot seem to get passed an error that "SCRIPT5009: 'require' is undefined. File: WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS, Line: 2, Column: 60" I've had a couple of our javascript guys help look over my work.. nothign seems to work. I am able to get the bootstrap up and running but it is when I add this (below) that it goes bad. Can you help?

    // requires js configuration
    var cskWsPath = '/cs/'+getSiteName()+'/oraclejet/js/libs/';
    requirejs.config({
    //% Path mappings for the logical module names
    paths: {
    'jquery':cskWsPath+'jquery/jquery-2.1.3.min',
    'jqueryui-amd':cskWsPath+'jquery/jqueryui-amd-1.11.4.min'
    },
    //% Shim configurations for modules that do not expose AMD
    shim: {
    'jquery': {
    exports: ['jQuery', 'JetCSKJQ']
    },
    'jqueryui': {
    deps: ['jquery']
    }
    }
    });

    ReplyDelete
  8. oops the error is "requirejs is undefined".

    ReplyDelete
    Replies
    1. Hi Carmen - How are you loading the bootstrap js (CSK_FL_BOOTSTRAP_JS)? Are using the PT_HEADERPAGE.Activate?

      If so, I suggest that you use the approach detailed in the following posts:
      https://pe0ples0ft.blogspot.com/2016/06/peopletools-855-using-oracle-jet-jquery.html
      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

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

    ReplyDelete
  10. Hi, can me migrate custom Theme Macroset through DMS?

    ReplyDelete
  11. Hi Sharath - You can use delivered Data Migration Workbench - Data Sets for migrating Branding related objects.
    Navigation: PeopleTools > Lifecycle Tools > Migrate Data > Data Set Designer, Data Migration Workbench
    E.g.: You can use PTBR_MACRO for migrating Macro Sets.
    https://snag.gy/pmavHL.jpg

    If you want to use DMS, you can use the PTBR_MACRO data set, figure out the underlying tables and write your own custom scripts.

    I would recommend using Data Migration Workbench!

    ReplyDelete
  12. Hi Sasank,
    Your blog is outstanding and the information has been very useful. Is there a similar method to change the banner and log for the page when the password is expired (component EXPIRE_CHANGE_PSWD)? If you are just changing your password through the Change My Password link the new theme macro set works perfectly, but if your password is already expired you go to the delivered banner with the Oracle logo. Please advise if you have any advice or insight. Thanks so much for your time.

    ReplyDelete
    Replies
    1. Breezy - The reason why the EXPIRE_CHANGE_PSWD page is not using your custom branding is because the CREF is using a different template.
      Refer: https://snag.gy/FBl6Xi.jpg

      I am assuming there is a reason why Oracle did it this way. Usually the change password external site (uses a public account for authentication) and some of the icons on the branding like the Notifications, Action Menu, etc might need additional security. That is the only reason I can think of.

      You could try to set the template to blank and see how it behaves. When I did that, it blanked out my header for some reason. It seems to redirect to the psc servlet even if I try to go to psp. May be a question for Oracle?

      Also, found the following documents on My Oracle Support website which are relevant to this topic:
      Bug 21666334 : CHANGE PASSWORD LINK IS NOT OPENING IN THE FLUID MODE WHEN PASSWORD EXPIRED
      E-FLUID : Change Password page is not opened in Fluid Mode when Password expires (Doc ID 2060033.1)
      E-SEC: When Will "Change Password" Be Available Based On Fluid (Doc ID 2154070.1)

      Delete
  13. Sasank,

    Really enjoy your posts! Good stuff! I recently put in your dbname in the title bar modification & it works really good. I made a modification to include the variable %UserID in the JS but this variable doesn't seem to be working correctly because the JS doesn't refresh itself or the variable is not retrieved dynamically? Is there a way around this to include a dynamic variable like %UserID in the title bar so you know what data base you are in along with what user you are logged in as? Any help would be appreciated...my JS is below:

    Thanks. Dave

    // Display Database Name using jQuery once the document is ready;

    Same as your code here...

    // Add div to display DB Name;

    ...id='sbcdbname'>%dbname --- %userid </...);

    Same as your code here...

    ReplyDelete
    Replies
    1. I would think we would want the variables to be retrieved once every time a new user logs onto the system...I used to do this in the PT_BRANDING app package & then pass the results into the HTML through a bind variable. It's much different now! Thanks again for any suggestions! Dave

      Delete
    2. Sorry Sasank...forgot to detail the issue. It seems to retrieve other cached values like I will log in as 'PS' & it will show 'TMP301' in the title bar which is another developer working in DEV. Seems to keep a cached value even though we log in as different users. Thanks for your time & any suggestions on this one:) Dave

      Delete
    3. I had the same experience as well. I think only certain meta-html work on the client side (i.e. as part of javascript running on the browser).

      One workaround would be to create your own IScript that returns the data you need and access it from your javascript.

      Delete
    4. Thanks for you reply Sasank! Yea, I am not sure if %dbname even works correctly but it only has one value to return so it doesn't matter if it returns a cached value. Do you have an example of iscript accessed from JS on your blog that I can follow? Thanks again, Dave

      Delete
  14. Hi Sasank, great article again !!!
    I had stylesheet which were using in PT 8.54 classic only. Now moved in PT 8.55 where using fluid and classic both. I created one fluid theme following your article but the momnet I select Fluid as theme , all the customization in classic go away and even icon of sign out And Home etc start coming as Fluid branding in Classic home page
    Kindly suggest how to keep classic style different with Fluid so that none of them overrideeach other
    Regards,
    Vipul

    ReplyDelete
    Replies
    1. Hi Vipul - What you have described is the default recommended behavior in PeopleTools 8.55.

      You might want to review the following blog post if you want to revert back Classic (not recommended):
      https://blogs.oracle.com/peopletools/fluid-header-and-navigation-is-the-new-standard

      Delete
  15. Hi Sasank,
    To change in classic page which style sheet should I select, is the same which is assigned in assemble theme option for classic component ??

    ReplyDelete