Sunday, August 14, 2016

PeopleTools 8.55+ - Fluid UI - Drop-Down Menu/Breadcrumb Navigation vs NavBar/Navigator Conundrum

In this post, I hope to bust some of the myths around the drop-down menu navigation which is "technically" going away in PeopleTools 8.55. There has been a lot of focus on the disappearance of the drop-down menu/breadcrumb navigation as it is not available by default in PeopleTools 8.55 which uses the Fluid header and navigation instead. I have seen several customers (here is a link to just one example of many in various forums) wanting to put it back just the way it was! Note: There are options to do so.

I could understand some of the reasons why customers might want to hold on to the older method of navigation. For example, project timelines and lack of time for managing the change, need to re-write user manuals/guides/documents, training/education, only a small subset of power users/admins use the system so why change?, etc.

A big part of the transition to the Fluid navigation is education which involves recognizing the reasons for the change and the benefits of using the Fluid navigation mechanisms which is very intuitive. For starters, Fluid navigation is more than just the drop-down menu! It involves Homepages, Tiles, Dashboards, WorkCenters, Activity Guides, Related Content, etc. There are plenty of very good resources that demystify the new navigation paradigm in Fluid. Here are a few:

PeopleSoft VFO: https://www.youtube.com/watch?v=oXdvD9rKO_U
PeopleSoft VFO: https://www.youtube.com/watch?v=o5-wQ2dHKsw
Oracle Blog: https://blogs.oracle.com/peopletools/entry/fluid_header_and_navigation_is
LeanItDesign: https://leanitdesigns.wordpress.com/2016/03/28/fluid-navigation-adopting-to-the-new-normal/

In spite of all these attempts to educate our customers and end-users, I am sure there will still be a few who simply insist on having the drop-down navigation. There may also be some users (e.g.: power users) who might legitimately require the drop-down menu style navigation. Here are couple of ways I would sell the Fluid navigation to those users:

Pitch 1: The drop-down navigation is not gone! It is now in a brand new location (NavBar > Navigator) and expands vertically in Fluid. When we use the Navigator, it also remembers the Folder location that was last visited - including 'Back to Previous Folder' and 'Back to Root' capabilities. Effectively, all the functions of the drop-down menu still exist!





Pitch 2: Let us say, my users are not impressed with my previous pitch. They tell me that we now have to click on the NavBar and then click on the Navigator to initiate the menu. Previously, we only had to click on 'Main Menu' and out pops the drop-down menu navigation. These are the hard to sell folks that I am talking about!

For example, let us compare the navigation to the 'Web Profile Configuration' page.
In Classic: Main Menu > PeopleTools > Web Profile > Web Profile Configuration
In Fluid: NavBar > Navigator > PeopleTools > Web Profile > Web Profile Configuration

Granted, they have a point! They have one extra click to complete the navigation (assuming the Navigator was not previously initialized/toggled).

Here is a simple workaround for that! What if we make the 'Navigator' active/selected and expanded when the NavBar is initiated (except for the Small Form Factor devices)? Will this make these users happy? Hopefully, because now the Navigator behaves exactly the same - if not better - when compared to the Classic drop-down menu!

This requires a minor customization as follows:

Step 1: Create a JavaScript Object

PeopleTools > Portal > Branding > Branding Objects


JavaScript: CSK_NB_INIT_JS


Note: I am using requireJS (for managing my jQuery module dependency) that is available as part of Oracle JET in PeopleTools 8.55. You don't necessarily have to use this approach but if you would like more details, then please refer to my posts on Oracle JET (Part 1, Part 2, Part 3 and Part 4).

Step 2: Inject CSK_NB_INIT_JS when PTNUI_NAVBAR page/component is loaded

In my case, I am simply using the Global JavaScript Injection Bootstrap that I described in my previous blog posts. I updated my cskInjectJS function to include the following lines of javascript to load CSK_NB_INIT_JS (created in Step 1). I also check if the current request is not from a small form factor device to avoid auto-selecting the Navigator on small screens like phones (which would cover up the entire screen and might not be desirable).

Update JavaScript Function: cskInjectJS


Note: The following links provide the full JavaScript source code as of this post: CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS.

Results:

NavBar Initialization Before Customization:


NavBar Initialization After Customization:


48 comments:

  1. Thanks Sasank, that's a 5 minute fix and it worked 1st time! It makes Fluid just a little bit easier to use.

    ReplyDelete
  2. We will definitely check this out for our upcoming Fluid implementation! Thank you!!

    ReplyDelete
  3. I definitely want to do this, but dont ever work with java scripting or branding. I see how to create the new javascript object in PeopleTools > Portal > Branding > Branding Objects. But where/what do I do with the other two scripts you mentioned? CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS?

    ReplyDelete
    Replies
    1. Those two scripts are part of a framework to inject javascript objects.

      I customized PT_UTIL to include a line of code to accommodate this framework.

      At a high level, PT_UTIL ---includes---> CSK_FL_BOOTSTRAP_JS ---includes---> CSK_INJECT_JS. CSK_INJECT_JS is where we can list all the javascript objects that we want to load (globally or targeting specific conditions). So, in this case in CSK_INJECT_JS, you will find a reference to CSK_NB_INIT_JS.

      For more details on how this works, you can refer: Using Oracle JET - Part 1, Part 2, Part 3 and Part 4

      Delete
    2. Thank you. So looking at your other blog, I add a line to PT_UTIL. I then create a java script object named CSK_NB_INIT_JS. Are the other two pieces of code (CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS) additional java script objects you create under branding? Or are these files that are placed on the server itself under Oraclejet directory or some other location? (Again, sorry, I dont usually deal with java script). Thank you in advance!

      Delete
    3. Disregard my last question. The screenshot and code snippet of CSK_NB_INIT_JS are different, so I had to figure that out and put in the working one. I also did not realize, because it was briefly mentioned in a note, that I needed CSK_REQUIRE_CFG_JS. I got it working.

      Delete
    4. Great. Thanks for posting back with your progress. I understand this can be a bit convoluted. I plan to post something that explains the flow of the js in a simple way. Will let you know when I get that out.

      Delete
    5. I know you figured it out on your own and this is probably not directly useful to you. But I am hoping this reference link will help break down the JavaScript Injection Framework for other readers:
      JavaScript Injection Framework

      Delete
  4. Hi Sasank, thanks for the post. I tried replicating the steps, but the NavBar does not behave as expected. Here is the GIF . Is there something that I overlooked?

    ReplyDelete
    Replies
    1. Are you seeing any errors on your browser console?

      One way to check if your javascript is getting executed is by adding some console.log messages. See if it is showing up on your browser console.

      Delete
    2. Hey, thanks for the fast response. I looked at the console, i see the "Uncaught ReferenceError: requirejs is not defined" . I'll try to fix it.

      Delete
    3. Hey I am getting the same error. Any idea how to fix it? is it because of the directory path?

      Delete
    4. The reference to requireJS comes from the framework that I use to inject the custom javascript (CSK_NB_INIT_JS - line 1) globally.

      You can find more details on the framework in the link shared below. This framework not only allows for global javascript/css injection but also handles dependencies of loading various related scripts.

      https://pe0ples0ft.blogspot.com/2019/03/javascript-injection-framework-updates.html

      Useful resource on requireJS:
      https://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

      Delete
  5. Hi Sasank

    Home and Signout buttons not working on Default_theme_tangerine_alt/Defalut_header_tangerine_alt. Any inputs please

    ReplyDelete
    Replies
    1. Sue - I am assuming you are on PeopleTools 8.55?

      Couple of suggestions:
      - You may want to run a PeopleCode+SQL trace for the page load event. PTBR_BRANDING is the app package responsible for most of the branding including the system links (Home, Signout, etc.). A trace might provide details if there are issues with the html generation.
      - You could check on your browser console, to see if you are getting any errors after the page load and during the Home/Signout click event.

      Hope this helps. Let us know how it goes. Thanks!

      Delete
  6. Queries with prompts are not running to Excel with this code in place. Nothing happens when the "view results" button is clicked after prompts are entered on the page that popups after the "Excel" link is clicked. We really liked this great customization. But we are having to back it out. 8.55.11. Any thoughts / suggestions? Thanks

    ReplyDelete
  7. Hi Chris - Thank you very much for the feedback. Obviously, I did not test this end to end. It was mainly to provide an idea.

    That said, I was able to replicate your problem. I am assuming you are using my entire JavaScript Injection Framework.

    I found that the framework as a whole was causing issues with the Query Manager results page. The quick fix for this is to not execute the injection framework for Query Manager results pages. I was able to successfully circumvent the problem.

    Here is a link to my updated CSK_FL_BOOTSTRAP_JS:
    https://jsfiddle.net/SasankVemana/t5he9gzw/

    The main change is that I added the following lines of code in the immediately invoked function (at the very end):
    /* Exit Function if rendering Query */
    if(location.href.indexOf("/q/") != -1)
    {
    return;
    }

    Hope this helps. Let us know how you go. Thanks!

    ReplyDelete
    Replies
    1. It took us a while to find time to test. But we tested this fix yesterday and it seems to be working. We got results running a query-with-a-prompt to Excel. Thank you for the very fast response and for the idea for the expanded navigator.

      Delete
    2. In case others run into the same issue, I found a similar problem with 'Worklist' page. This made me realize that i had to change the following line in the bootstrap javascript to take into account Query and Worklist type URLs:
      From: var parts = mainUrl.match(/ps[pc]\/(.+?)(?:_\d)*?\/(.+?)\/(.+?)\/[chs]\//);
      To: var parts = mainUrl.match(/ps[pc]\/(.+?)(?:_\d)*?\/(.+?)\/(.+?)\/[chswq]\//);

      Also, I moved the javascript injection framework code to GitHub to better manage versioning of related objects. Here is the link:
      https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

      Related Post: https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

      Delete
  8. Fluid Interface is garbage. It is ok for small mobile app, where only a few buttons/menus are used. For large enterprise applications, with thousands different functions - all these "nice" and "intuitive" pictures are useless. Documentation becomes a mess (just look at your instructions above; instruction for a simple step becomes a series of multiple screenshots - laughable). Search for something on a large page is no longer possible. Navigation is very slow and has too many clicks.

    Old school text-based menus, with keyboard shortcuts are the best, and the fastest.

    We do not have to re-train every time Microsoft invents a terrible ribbon, or Oracle decides to look "mobile" and "cloud". We do not have time for this garbage. This is not "my music" or "my pictures". We are in business.

    ReplyDelete
    Replies
    1. Totally agreed. It's just to clunky and slow for large enterprises. I am a PS Admin every time I upgrade PT (8.55, 8.56) the first thing I do is to configured back to classic UI with drop down menu.

      Delete
  9. Hi Sasank Vemana,

    if we have a requirement to keep the Fluid header with back button and also Breadcrumb menu below the header on classic pages only. can you please help on this. we tried no of option but not able to enable both the option at the same time.

    Thanks in advance!!

    ReplyDelete
    Replies
    1. Hi Gaurav - Although it is not something I would recommend, we can follow the steps in the following blog, if we want to bring back the Drop Down Navigation to Classic Homepage and Classic Pages.
      https://blogs.oracle.com/peopletools/fluid-header-and-navigation-is-the-new-standard

      To move the Drop Down below the header, simply reorder the header element (ptdropdownmenu). Here is a screenshot of my changes to the header definition:
      Header Definition: https://snag.gy/7vNfhU.jpg

      Classic Homepage after change: https://snag.gy/jAivZo.jpg
      Classic Page after change: https://snag.gy/vsZjAG.jpg

      Delete
    2. Hi Sasank,

      Thanks for your quick reply. this i have already done and able to put the same header on home page/classic page. also placement of breadcrumb i have done, same as screenshot : "Classic Page after change : https://snag.gy/vsZjAG.jpg".

      but i want to do add one more thing in this. we want to add back button also in the left side of the header. e.g where CSK Logo is coming we want back history button to go page to previous page.

      please help to achieve this.

      Delete
    3. like this we want

      https://snag.gy/EoOdsW.jpg

      Delete
    4. Gaurav - I notice that once we add that Drop Down Navigation in Classic pages, the Back button stops showing up. Is that the problem? You want the Back button to work normally while you have the Drop Down Navigation in Classic.

      Delete
    5. yes right whenever we are enabling the Drop Down Navigation in Classic pages Back button is not coming. we want both the option at the same time. please help if we can do this somehow.

      Delete
    6. Gaurav - I found a "workaround" to your problem. But this is not thoroughly tested and I have no idea what side effects it may have. This is neither recommended nor supported by me! :)

      Try this at your own risk. Test before apply it to production.

      Update PT_BACKNAV (HTML):
      Function classicBackButton.isUsed
      - Update the return parameter to true (instead of false). See screen shot below.
      https://snag.gy/RmepCf.jpg

      Delete
    7. Thanks a lot Sasank .:) i will try to implement this and update you if it works for my case. :)

      Delete
  10. Hi Sanhank,

    Can we enable fluid for only one module instead of enabling it for complete peoplesoft.

    ReplyDelete
    Replies
    1. It may be possible but may not be very straight forward. You can check if you can use servlet filters, event mapping or a combination of both.

      You can find some useful resources here:
      http://www.peoplesoftmods.com/category/emf/
      http://www.peoplesoftmods.com/category/servlet-filters/

      Delete
  11. Hi Sasank,

    Is there any way for me to add the sign out button in the NavBar with an image? Its currently set in the action list menu, but I dont want it there.

    ReplyDelete
    Replies
    1. The NavBar is also a CREF definition similar to Homepages. You can find it here:
      PeopleTools > Portal > Structure and Content
      Root > Fluid Structure and Content > Fluid Homepages > Navigation NavBar (Edit)

      To change the tiles on the NavBar:
      Use the 'Tile Content' tab

      To add Signout to NavBar, you will have to create a CREF that basically does the Signout for you. You may have to implement it as an IScript or something like that.

      To remove the Signout from the Action Menu, you can use this blog post as a guide to figure out where you need to make the changes:
      https://pe0ples0ft.blogspot.com/2017/08/branding-sign-out-label-oprid.html

      Hope this gives you some ideas. Thanks!

      Delete
  12. Hi Sashank,
    I implemented this Auto-expand Navigator mod and Breadcrumb(drop-down menu) mod. It is working fine when I am on Home Page but when I am navigating to any classic page, auto expand navigator stops working. Please suggest.
    PeopleTools 8.55.16
    PeopleSoft 9.2
    Thanks,
    Nick

    ReplyDelete
    Replies
    1. Hi Nick - This should work in Classic and Fluid. I don't have any issues with this working in Classic.

      Are you seeing any errors on the browser console?

      Also, how are you injecting CSK_NB_INIT_JS javascript? Are you using my JS Injection Framework or other approach?

      Delete
  13. Sasank,
    No errors on browser console.
    Below code in CSK_FL_BOOTSTRAP_JS:
    //% console.log('cskInjectJS');
    /*cskLoadJS(getScriptUrl('CSK_FL_DBNAME_JS'), 'CSK_FL_DBNAME_JS', 'sCntr'); */
    // Only Load JS if the current page is PTNUI_NAVBAR
    if (document.querySelector("[page='PTNUI_NAVBAR']")!==null) {
    // Only Load JS if NOT Small Form Factor (SFF)
    if (document.querySelector('html').getAttribute('class').indexOf('psc_form-small') < 0) {
    cskLoadJS(getScriptUrl('CSK_NB_INIT_JS'), 'CSK_NB_INIT_JS', 'sCntr');
    }
    }
    };

    ReplyDelete
  14. Hi Sasank,

    How to have the backbutton alone displayed with out the label of the back button navigation. :)

    Since we are facing the issues in the backbutton label in unified navigation

    Could you please help on this.

    Thanks

    ReplyDelete
    Replies
    1. I would not recommend removing the label for the backbutton as it might be confusing to the end users. Having said that, I am sure you can write some CSS (include it in your theme style sheets) to hide the text. Although, I have not done this before.

      Delete
  15. Hello Sasank, when the fluid button navbar is clicked, I am getting the error message (95, 10012) stating system tab Navbar does not exist.

    Can you please help?

    Thank you.

    ReplyDelete
    Replies
    1. I am not sure why you are receiving this error. When I tried to search for this message number in PeopleCode using 'Find In...', I found the following reference:

      App Class: PTNUI.Registry.NUIRegistry.OnExecute
      Method: SaveUserTab

      You may be able to get some ideas if you debug/trace and focus on this method.

      Delete
  16. Hello Sasank, I tried but in vain. The navbar show display nothing.

    ReplyDelete
  17. Hello Sasank, I have verified the fluid navigation on the customer portal and its working fine. Only in the Employee portal, the navbar is displaying nothing. I have set traces on both customer and employee portals. Below are parts of the traces for both customer and employee portals.

    Trace on customer portal :

    call getter PTNUI:Registry:NavBarRegistry.Name #params=2
    1: get Name
    2: Return "NAVBAR";
    return stack:
    UUUUUUUUUUUUUU:NavBarRegistry
    Str[4]=Name
    return value:
    Str[6]=NAVBAR
    15: Local ApiObject &ltd = &portal.LandingTabDefinitions.ItemByName(%This.Name);
    16: %This.LoadSystemTab(&portal, &lpt, &ltd);
    ApiObject
    UUUUUUUUUUU:LandingPageTab
    ApiObject
    call method PTNUI:Registry:NUIRegistry.LoadSystemTab #params=5
    LoadSystemTab PTNUI.Registry.NUIRegistry.OnExecute
    >>>>> Begin PTNUI.Registry.NUIRegistry.OnExecute level 0 row 0
    107: method LoadSystemTab
    108: &lpt.Label = &sysTab.Label;
    109: &lpt.SeqNum = &sysTab.sequenceNumber;
    110: &lpt.SysLabel = &sysTab.Label;
    111: &lpt.IsLayoutLocked = &sysTab.IsLayoutLocked;



    Trace on employee portal:

    call getter PTNUI:Registry:NavBarRegistry.Name #params=2
    1: get Name
    2: Return "NAVBAR";
    return stack:
    UUUUUUUUUUUUUU:NavBarRegistry
    Str[4]=Name
    return value:
    Str[6]=NAVBAR
    15: Local ApiObject &ltd = &portal.LandingTabDefinitions.ItemByName(%This.Name);
    16: %This.LoadSystemTab(&portal, &lpt, &ltd);
    ApiObject
    UUUUUUUUUUU:LandingPageTab
    Object=NULL
    call method PTNUI:Registry:NUIRegistry.LoadSystemTab #params=5
    LoadSystemTab PTNUI.Registry.NUIRegistry.OnExecute
    >>>>> Begin PTNUI.Registry.NUIRegistry.OnExecute level 0 row 0
    107: method LoadSystemTab
    108: &lpt.Label = &sysTab.Label;
    return stack:
    UUUUUUUUUUUUUU:NavBarRegistry
    Str[13]=LoadSystemTab
    ApiObject
    UUUUUUUUUUU:LandingPageTab
    Object=NULL
    return value:
    Str[5]=Label


    What I've seen so far in the traces is that in the customer portal, the object LandingPageTab returned something like an APIObject(See below)

    16: %This.LoadSystemTab(&portal, &lpt, &ltd);
    ApiObject
    UUUUUUUUUUU:LandingPageTab
    ApiObject

    but in the employee portal, the object LandingPageTab returned something like an Object = Null (See below)

    16: %This.LoadSystemTab(&portal, &lpt, &ltd);
    ApiObject
    UUUUUUUUUUU:LandingPageTab
    Object=NULL

    Maybe the issue might be coming from here in the employee portal but I'm not able to find the solution.

    Can you please help?

    Thank you.

    ReplyDelete
    Replies
    1. I am a bit confused here. Are you referring to the same issue that was reported in previous comments?
      "error message (95, 10012) stating system tab Navbar does not exist"

      Or is this a different issue?

      Also, is this issue occurring because of applying the POC in this blogpost? Or is this issue unrelated to this blog post?

      Delete
    2. Yes,it is related to the previous post. The Navigation fluid menu remains blank.

      Delete
    3. Ok. I am not sure why you are running into this issue.

      If you think it is related to the solution provided in this particular blog post, I would recommend that you remove the code changes and try again.

      Delete
    4. Hello Sasank,

      I have finally been able to solve the issue by going deeper in the traces.

      I found that there were missing data in standard PS tables related to EMPLOYEE portal.
      I think this issue arised after PT upgrade to 8.55.15.

      Here is the list of tables:
      1- PSPRSMDEFN
      2- PSPRSMDEFNLANG
      3- PSPRSMPERM
      4- PSPRSMSYSATTR
      5- PSPRSMSYSATTRVL

      I hope it helps other people facing the same issue. :)

      By the way your blog is awesome :)

      Thanks for the help you provided :)

      Delete
  18. Hi Sasank,

    We need to auto expand certain folders in (left hand classic) menu in 8.56 when on the homepage. Is there any way to achieve this?

    Regards,
    Sanjay Desai

    ReplyDelete