PeopleTools 8.56 has been out for a few months now. This is a review of what is new in the Branding Framework pertaining to the 8.56 release.
Review Environment Details:
- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01
Branding Framework:
Not much has changed with the Branding Framework. I was expecting some improvements to the Theme Macro Set functionality which was introduced in 8.55. There are still some hard-coded references to images in javascript which would have been nice to move to Theme Macro Set CSS functionality. For example:
The delivered macro set, PT_DEFAULT_MACROSET_855, still contains 117 macros (same as in 8.55) with no changes in 8.56.
As you can see, there is a new Color Picker on the Theme Macro Set page which is a nice productivity enhancing feature! This Color Picker is based on HTML5 'color' input type element.
Icon Changes:
A notable change that we have already seen in demos prior to the release is the new 'Action Menu' icon. This has changed from the old 'hamburger' menu to a 'pea' (?) menu. Graham Smith thinks this is a healthy dietary change! We cannot argue with that. :)
Using Theme Macro Sets:
Since the framework has not changed, it was pretty much the same set of steps to use Theme Macro Sets to override Branding elements. One thing to note is that we definitely want to clone the 8.56 objects (style sheets, headers, themes, etc.) instead of moving objects from an 8.55 environment. This will make sure that we have the most current versions of the object in question.
We can follow the steps detailed in my previous posts describing how to use Theme Macro Sets to override Branding Elements:
PeopleTools 8.55 Branding - Theme Macro Sets - Part 1
PeopleTools 8.55 Branding - Theme Macro Sets - Part 2
One of the issues I noticed was the position of the 'Pea' icon was a little off after applying the Theme Macro Set overrides. This issue occurred only on the Classic Pages. For example:
I fixed this by adding the following a top property to the #pthdr2ActionList:after style selector which is part of the Classic Theme Style Sheet.
Using Oracle JET:
I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version.
Resources:
JavaScript Injection Framework
Framework is based on my experience with Oracle JET - Part 1, Part 2, Part 3 and Part 4
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework
Using Classic Plus:
I wanted to test the delivered Classic Plus pages that were available in this PUM image. But when I navigated to the Process Monitor page - which is in the list of PeopleTools Components delivered as Classic Plus - I was still seeing the good old Classic.
To activate Classic Plus, we must update the Branding System Options to use "Fluid like theme for Classic" as the "Theme Style Type". This is the system level setting that enables "Classic Plus".
Process Monitor after setting 'Theme Style Type'.
More information on Classic Plus:
PeopleBooks - Classic Plus
Related Branding Posts:
Fluid UI - New Window Feature - Workaround
Using Different Branding Themes for Different Portals
Using the Logo as a Hyperlink
Fluid Global Search - Setting Focus on the Search Box
Adding Userid to 'Sign out' Action Menu Item Label
Review Environment Details:
- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01
Branding Framework:
Not much has changed with the Branding Framework. I was expecting some improvements to the Theme Macro Set functionality which was introduced in 8.55. There are still some hard-coded references to images in javascript which would have been nice to move to Theme Macro Set CSS functionality. For example:
The delivered macro set, PT_DEFAULT_MACROSET_855, still contains 117 macros (same as in 8.55) with no changes in 8.56.
As you can see, there is a new Color Picker on the Theme Macro Set page which is a nice productivity enhancing feature! This Color Picker is based on HTML5 'color' input type element.
Icon Changes:
A notable change that we have already seen in demos prior to the release is the new 'Action Menu' icon. This has changed from the old 'hamburger' menu to a 'pea' (?) menu. Graham Smith thinks this is a healthy dietary change! We cannot argue with that. :)
Using Theme Macro Sets:
Since the framework has not changed, it was pretty much the same set of steps to use Theme Macro Sets to override Branding elements. One thing to note is that we definitely want to clone the 8.56 objects (style sheets, headers, themes, etc.) instead of moving objects from an 8.55 environment. This will make sure that we have the most current versions of the object in question.
We can follow the steps detailed in my previous posts describing how to use Theme Macro Sets to override Branding Elements:
PeopleTools 8.55 Branding - Theme Macro Sets - Part 1
PeopleTools 8.55 Branding - Theme Macro Sets - Part 2
One of the issues I noticed was the position of the 'Pea' icon was a little off after applying the Theme Macro Set overrides. This issue occurred only on the Classic Pages. For example:
I fixed this by adding the following a top property to the #pthdr2ActionList:after style selector which is part of the Classic Theme Style Sheet.
Using Oracle JET:
I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version.
Resources:
JavaScript Injection Framework
Framework is based on my experience with Oracle JET - Part 1, Part 2, Part 3 and Part 4
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework
Using Classic Plus:
I wanted to test the delivered Classic Plus pages that were available in this PUM image. But when I navigated to the Process Monitor page - which is in the list of PeopleTools Components delivered as Classic Plus - I was still seeing the good old Classic.
To activate Classic Plus, we must update the Branding System Options to use "Fluid like theme for Classic" as the "Theme Style Type". This is the system level setting that enables "Classic Plus".
Process Monitor after setting 'Theme Style Type'.
More information on Classic Plus:
PeopleBooks - Classic Plus
Related Branding Posts:
Fluid UI - New Window Feature - Workaround
Using Different Branding Themes for Different Portals
Using the Logo as a Hyperlink
Fluid Global Search - Setting Focus on the Search Box
Adding Userid to 'Sign out' Action Menu Item Label
Sasank, you did not include the contents of the custom jQuery file, CSK_JQUERY_1_7_2_JS.
ReplyDeleteI did not because it is just a copy of jQuery version 1.7.2.
DeleteYou can find it here:
https://code.jquery.com/jquery-1.7.2.js
Also, it is not really part of the framework. I needed that version for getting another project which uses this framework:
https://pe0ples0ft.blogspot.com/2016/05/peopletools-855-using-oracle-jet-jquery_30.html#2
Thank you for the reply. So, is there a way to may the JavaScript injection work with just the JS objects delivered by Oracle in Peopletools 8.56?
DeleteYes. It already works with what is delivered in PeopleTools.
DeleteWhat we include in the requireJS config (CSK_REQUIRE_CFG) and the injection script (CSK_INJECT_JS) is entirely up to how you want to use the framework.
If you don't want to include jQuery 1.7.2, then simply remove references to it from CSK_REQUIRE_CFG.
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework/blob/master/CSK_REQUIRE_CFG_JS
- Remove line 16
- Remove line 34
- Remove , 'jquery_1_7_2' from line 44
sorry to keep pestering you, but I set up the JS as you detailed and I also created a JS for displaying the test environment using the CSK_FL_DBNAME_JS code listed in https://pe0ples0ft.blogspot.com/2016/06/peopletools-855-using-oracle-jet-jquery.html. I get an 'object expected' error on the jq1(document).ready(function() statement. This is with PT 8.56.03:
DeleteI cannot tell for sure. You may have to use the browser developer tools to see where you are getting errors.
DeleteBut this may be related to what I mentioned in this blog post in the Oracle JET section:
"I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version."
What I mean by this is: The jQuery version in Oracle JET has changed in 8.56. So, we need to update the requireJS configuration accordingly to point to the appropriate jQuery file name (which includes version) located on the web server.
jQuery located on web server:
https://snag.gy/OAwtEq.jpg
- You may have to find what version exists in your 8.56.03 environment. My screenshot above is from 8.56.01.
So, if you continue to use the following line in the requireJS config (CSK_REQUIRE_CFG_JS) then it will not work because that version does not exist:
'jquery':cskWsPath+'jquery/jquery-2.1.3.min',
This needs to be replaced by the following to match the version that exists on the web server (Oracle JET libraries):
'jquery':cskWsPath+'jquery/jquery-3.1.0.min',
Hope this helps.
Also, you don't need the option Oracle JET paths (those were used for other proof of concepts I was working with):
Delete- You can remove line 20 through to 28
- Also, remember to remove the comma (',') at the end of line 18
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework/blob/master/CSK_REQUIRE_CFG_JS
I verified the jquery was jquery-3.1.0.min and replaced the value in the cfg file. I am receiving the same error as before (object expected). When I hover over Function(JetCSKJQ) (in my dbname js) it shows as undefined which leads me to believe the jquery isn't loaded correctly. Going back to the cfg js, what is CSK_JQUERY_PRIVATE_JS and is this something I needed to create? Thanks for your continued help on this.
Deletein the bootstrap js, you first load the delivered require.js and call it CSK_REQUIRE_JS. I never see it referenced after that in the cfg js or the inject js.
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework/blob/master/CSK_FL_BOOTSTRAP_JS
Delete- Line 98 includes the code in CSK_INJECT_JS
- Line 114 calls CSK_REQUIRE_CFG_JS (which is the requireJS configuration)
CSK_JQUERY_PRIVATE_JS is the jQuery private module provided here:
http://requirejs.org/docs/jquery.html#noconflictmap
Basically a HTML object called CSK_JQUERY_PRIVATE_JS with the following code:
https://snag.gy/1g9vly.jpg
https://gist.github.com/SasankVemana/476ce04225786b43bd3a79e2eb3116d4
Refer: http://requirejs.org/docs/jquery.html#noconflictmap
Also, if you want a copy of my current 8.56 CSK_REQUIRE_CFG_JS, then you can find it here:
https://gist.github.com/SasankVemana/83cc903f1eee08c7f8aab8911ec511ee
It may be possible that the CSK_JQUERY_PRIVATE_JS was missing and which may result in jQuery not loading properly.
one last comment....wondering about how the cskWSPath is built. The end result in the JS is cs/PSSC/oraclejet/js/libs/jquery but the directory path where the jquery resides on our server is \\ps8sncws935\Apps\PSCFG\webserv\PSA05\applications\peoplesoft\PORTAL.war\PSSC\oraclejet\js\libs\jquery.
DeleteADDING THE PRIVATE JS DID THE TRICK. THANKS!!!!
DeleteGreat!
DeleteRegarding cskWSPath variable:
https://gist.github.com/SasankVemana/83cc903f1eee08c7f8aab8911ec511ee
- Line 7 has the logic that determines the relative path for the directories on the web server
- The logic is similar to code in PTTREEMGR_JET_1_0_SCRIPT_JS (delivered HTML object) for wsPath variable.
HI Shashank,
ReplyDeleteI am using peopletools 8.56 with hcm 9.2. By default when i create a classic page, all fields are left aligned to the page itself. Even if i try to make alignment changes in app designer there are no changes. Can you please explain what i am doing wrong here?
It sounds like you are working with a Fluid Page. Have you checked the Component/Page to see if the Fluid attributes are set?
DeleteThanks for your reply Sasank. I've checked the page properties and component properties, no where i have selected fluid option. It looks really strange to me. I even tried clearing app server and web server cache. do i need to change any settings at configuration level
DeleteHi Sasank, we are facing one strange issue. not sure if you have faced the similar one or not but it is creating user issues at my end. whenever users are opening any report from My team Supplementary panal and once they close the report and then click on the action list. its getting distorted. but if we click somewhere else first and then click on the action list it work fine. can you please help with this fix. we raised this issue with Oracle as well but they are still working to provide the fix, can you please help to get some workaround here.???
ReplyDeleteThis comment has been removed by the author.
Deleteafter clicking on action list it is coming like this..
Deletehttps://snag.gy/naHxzr.jpg
Hi Gaurav - When you say 'Supplementary Panel', do you mean the related content frames in the right hand side?
DeleteI tried replicating the problem but I did not run into this issue on my side (on two separate environments including HCM 9.2 PUM 25). Are you seeing any errors on your browser console?
Hi Sasank, Thanks, it was my fault i forgot to update the details on HCM and PT versions. yes it is in Related content frame. this issue got fixed in PT patch 8.55.16
Deletenow we have fixed the issue by extracting the code from PUM 24.
Hi Sasank, Request you to help me to Display Last Refreshed Date on the Branding Header. I have the value of date stored in database/component.
ReplyDeleteThanks,
Amit Grover
Good question. I have not tried this but here are my pointers for you.
DeleteUnfortunately, having the value of the refresh date stored in the database table does not make it easy to access from JavaScript. So, I suggest that you find a way to add it to a Message Catalog entry. The reason I say this is because there is a meta-HTML function %message that can be used in JavaScript to access message catalog entries.
Refer: https://docs.oracle.com/cd/E92519_01/pt856pbr2/eng/pt/tpcl/langref_AlphabeticalListofMeta-HTMLElements-073b31.html?pli=ul_d65e73_tpcl
Next you can follow the steps in this blog post where I have demonstrated how we can add the %dbname meta-HTML to the Branding header. You can use a similar approach and include the %message function to retrieve the last refresh date.
Forgot to include the link to the blog post.
Deletehttps://pe0ples0ft.blogspot.com/2016/05/peopletools-855-using-oracle-jet-jquery.html
Hi Sasank , Thank you for the posting all the branding related post. It helped me a lot when we did the upgrade. We had some issue with accessibility on the Fluid tiles , when we are using the tab key on keyboard instead of mouse , a dotted white line is highlighted around the tile and also on the banner , Is there any way using the macro set or changing the style sheet we can change the color of that dotted line.
ReplyDeleteThank you please let me know if i did not explain my issue properly.
Hi Sasank,
ReplyDeleteThank you for all the post, It helped me a lot during our upgrade for 9.2 , I have question related to style sheets or macro set , When user uses Keyboard instead of mouse , when they are using the TAB key on the homepage , The home button and other button on the banner will be highlighted by the white dotted lines, and when it comes to the tiles, they are also highlighted by that white dotted line , but the visibility of that dotted lines is very minimal around the tiles, is there a way we can change the color of that dotted lines using the macro set or style sheet . Any help would be appreciated . Thank you and let me know if my question doesn't make any sense .
Hi Nikhil,
DeleteI apologize for the delay in responding.
Yes. This can be done using CSS. Here is a blog post on this topic:
https://pe0ples0ft.blogspot.com/2019/10/branding-focus-selector.html
Thank you for the question!
Sasank
Thank you Sasank for the reply, really appreciate the solution.:-)
ReplyDelete