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:


29 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
    Replies
    1. Thanks William! Good to know that it works. :)

      Delete
  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
  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
  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