Sunday, January 29, 2017

Fluid UI - New Window Feature - Workaround

Graham Smith created an idea on My Oracle Support Community to carry forward the "New Window" feature in Fluid pages especially for users on the desktop (or non-small form factor devices).

We can understand that Fluid user interface is designed with a mobile first and more importantly small form factor (SFF) first approach. This is one of the reasons why we don't get the Toolbar Actions (Save, Return to List, Next in list, Previous in list, etc.) by default on Fluid pages. But Graham has rightly pointed out that Fluid is not just an UI for mobile devices, we also need to account for users on desktops who are accustomed to opening new windows using the "New Window" feature.

This idea is trending and has already received several votes in a short period. I am hoping this would be incorporated as an enhancement in the future PeopleTools releases. I encourage everyone to continue voting. The more the merrier!
https://community.oracle.com/ideas/16701
 
Workaround while we wait?

Note: The workaround suggested in this post involves a minor customization. As with any customization, we will need to determine - based on our environment and circumstances - if the cost of maintaining this customization (until such time as we receive a solution from Oracle) outweighs the benefits!

Let us say that we decided to go down the path of introducing the "New Window" feature in Fluid, where would we put it? I am not convinced that bringing it back in literal terms and placing it exactly where it was located in Classic pages would be a good fit for Fluid (even if we are only talking medium, large and extra large form factors). If we notice, the traditional "Help" feature that links to context sensitive PeopleBooks, is now located in the Action Menu on the Fluid Header.

New Window and Help links in Classic:


Help link in Fluid:


It seems logical to similarly add the "New Window" functionality to the Action Menu in the Fluid Branding Header! That way, we will not be interfering with the content area of the page.

In my previous posts on Branding, I described how we can globally (across the application) add a link to the Action Menu in the Fluid Branding Header. I demonstrated the concept using an external link as an example.
Refer: Adding Custom Links to Fluid Branding

We can follow the same steps to add the 'New Window' link as well. In my case, I already created the custom subpage (CSK_HEADER_ACTION). I simply added a groupbox and a hyperlink (derived work field) to the subpage (similar to the external link example).



I added the following PeopleCode on the FieldChange event to open a New Window.


Results:



Suppress New Window feature on Small Form Factor (SFF) Devices (Optional):

If we would like to suppress the New Window feature for SFF devices, then we can simply configure this using the page field properties as shown in the following screenshots.



PeopleCode for Reference:

&fullURI = %Request.FullURI;

&pos1 = Find("/psc/", &fullURI);
&part1 = Substring(&fullURI, 1, &pos1 + 4);
&part2 = Substring(&fullURI, &pos1 + 5, Len(&fullURI));

&pos2 = Find("/", &part2);
&part3 = Substring(&part2, 1, &pos2 - 1);
&part4 = Substring(&part2, &pos2, Len(&part2));

&pos3 = Find("_", &part3);
If &pos3 = 0 Then
   &site = &part3;
Else
   &site = Substring(&part3, 1, &pos3 - 1);
End-If;

&newWinURL = &part1 | &site | "_newwin" | &part4;
ViewContentURL(&newWinURL);


Related Posts - Productivity Enhancements:
Fluid UI - CTRL+J - On Mobile Devices

31 comments:

  1. Hi - Strange thing happening when I try to add links - the first time I do it they show up - well at least the New Window did - then I clear my cache and they are gone and I can't seem to get either the test link or the New Window link to come back again. Any ideas on that? Love the blog! Learning a lot about fluid.. Thank you.. - Maria

    ReplyDelete
    Replies
    1. Hi Maria - What tools version are you on?

      I am not sure why you are seeing inconsistency. Have you tried clearing your app server cache already?

      Delete
    2. Hi Sasank -Just cleared both app and web server cache same results. I am on tools 8.54.23. Very strange- it worked once and then disappeared.. :(

      - Maria

      Delete
    3. Not sure. I have not seen that issue with the 'External Link' in 8.54 and now the 'New Window' in 8.55.

      Is there a particular page you are on where this happens? Or is it just random?

      Delete
    4. Maria - Also, did you follow all the steps in this blog post:
      https://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5c-fluid.html#2


      That is, adding the correct style sheet for the groupbox and the link? FWIW, the Action Menu should not be affected by the browser level caching.

      Delete
  2. Sasank,
    Do you know if we could customize the cref that the "New Window" feature defaults to? For instance ... if when the user selects "New Window" (Classic or Fluid using your example) I would like to send him/her to a particular landing page ... based on a configuration table entry.

    ReplyDelete
    Replies
    1. Hi Dan - Yes. That should be possible. If you see my implementation, I wrote some PeopleCode on the FieldChange event to mimic the "New Window" functionality for the destination page. You could very well write your own logic to send the users to different locations conditionally.

      Basically, whatever we pass into this function is where we will end up in the "New Window".
      ViewContentURL(&newWinURL);

      Delete
  3. Hello Sasank.

    We are using PeopleTools 8.55.13 and I have been requested to provide the "New Window" functionality to the Burger icon :).

    I have been able to follow your instructions and get the New Window functionality to work but I have a big red dot that shows up on the right side of the new menu addition. At first I thought it was a distorted default Oracle icon but after clicking on "My Preferences" and then going back to the newly created "New Window" action, the red dot icon shows an embedded zero. It is almost like the red dot is a place holder for a user notifications counter. If you have any suggestions on how I can remove this icon I'd appreciate it.

    Thanks for a very informative blog.

    Tom

    ReplyDelete
    Replies
    1. Hi Tom - Have you tried using the browser developer tools to inspect the red dot to see what is generating it?

      I have not seen this issue myself but I wonder if you the location where you place the New Window is overlaying some other Fluid elements. Could you share a screenshot of drop down with the red dot using https://snag.gy/ or other image sharing tools?

      Delete
  4. Hi Sasank. I have not used this screen sharing tool before but it is pretty cool too. The learning never ends :).
    Here is the requested screen shot
    https://snag.gy/jIcUx2.jpg

    Here is the inspected element.
    https://snag.gy/PhpysZ.jpg

    Thanks...

    Tom

    ReplyDelete
    Replies
    1. Hi Tom - I am not sure why this is happening in your case. I am wondering if your PT_HEADER_ACTION subpage is corrupted while making your changes. I would recommend that you revert the object back to an unchanged version and then try to perform the page changes again.

      Like I said, I have the same field (PT_NOTIFY_BADGE) on my version of PT_HEADER_ACTION page but I don't see that interfering with my 'New Window' link:
      https://snag.gy/zxOXF3.jpg
      https://snag.gy/cxKqfH.jpg
      https://snag.gy/8jlBh5.jpg

      Delete
    2. My stuff does look very similar to yours.
      Here additional screen shots if that provides any additional evidence.
      https://snag.gy/ULXjBE.jpg
      https://snag.gy/wWuRso.jpg
      https://snag.gy/Yjm2D8.jpg
      https://snag.gy/5dUewL.jpg
      https://snag.gy/QSz7Wl.jpg
      https://snag.gy/LTBoWt.jpg
      https://snag.gy/oK72GV.jpg
      https://snag.gy/Dz8ahQ.jpg

      What Tools sub-version are you working with?
      Thanks again for all the great stuff...

      Tom

      Delete
    3. Hi Tom - I tried this on 8.55.03. I will let you know if I encounter this issue in the latest tools releases.

      Delete
  5. When using the delivered 'New Window' link in non-fluid pages it appends '_n' to the database string in the URI, where n is the number of new windows you've opened. Is this something that would cause an issue for us using this method? Does PS use that '_n' for anything?

    As always, so thankful for this blog!

    ReplyDelete
    Replies
    1. Eric - Thank you!

      Yes. The peoplecode (very end of this post) that I wrote takes care of the new window numbering to match how PeopleSoft works. You can see that I am appending _newwin to the database name portion of the URL. The _newwin will be automatically substituted with the next window number. I believe PS uses the _n for a variety of reasons but one of the reasons is to identify unique sessions.

      Delete
    2. Ah sorry, must have missed that. Thanks for clarifying.

      Delete
  6. I got this working great . But (Sorry always a But). When I hit the Home icon the new ID (dbname_n) is reset back to just the DBName. Is there additional code needed for the Home Screen




    ReplyDelete
    Replies
    1. @William, the home button always does that. Always has. It is one of the annoyances with the home button. It doesn't honor the state block identified in the URL.

      Delete
    2. Thanks Jim for pointing that out! :)

      I never paid enough attention to notice the new window counter resetting when clicking on the home icon!

      Delete
    3. We are in 8.55.07, looks like the fluid home button will keep the existing window counter. Yes, the classic home always resets the counter. In order to keep the window counter in classic, we custom the home link by appending &pslnkid=1 at the end.

      Delete
    4. Thanks for the tip. I will give the pslnkid parameter a try!

      Delete
  7. Hi Sasank,

    i tried this option as we have to add 2 custom links in action menu and it worked well. but we are facing one issue on under approval tile due to this. whenever we are going to Approvals->Review Approval(Action menu) and then from that page trying to click on action menu. only our custom links are coming two times with signout option insted it should show all the approval tile action menu items with those 2 additional links.

    this is working fine on all other components/pages but only giving this issue in this case only.

    on approval tile: https://snag.gy/5qSy69.jpg
    after clicking on review approvals : https://snag.gy/N98kUE.jpg

    ReplyDelete
  8. Hi Sasank,

    can you please suggest any workaround for the same. i tried some options but not able to fix this.

    ReplyDelete
    Replies
    1. Gaurav - I am not entirely sure why that is happening.

      Can you tell me if you are using the older (MAP version) of the Approvals or the latest Fluid Approvals? What is the URL on the address bar (you can get rid of your hostname, etc. and share)?

      Delete
    2. If this is the Fluid Approvals? I am not seeing this issue in HCM 9.2 PUM 23:
      https://snag.gy/kvyFVw.jpg

      Delete
    3. Hi Sasank, we are using Fluid Approvals only. even it is working fine for me if i click on approval tile but from that page if i will click on Review approvals from action list it is creating the issue.

      please check once after clicking on review approval from the action list and then check the action list items.

      https://snag.gy/N98kUE.jpg

      Delete
    4. want to add one more point is .. this is happening only if an employee is having pending approvals if there is no approval pending with him. its working fine on review approval also.

      Delete
    5. @Gaurav Rajput - Thank you for pointing out this issue. I finally replicated and figured it out.

      It was a mistake on my part to suggest that the custom subpage should be added inside the "Custom Action" groupbox. It appears that this group is meant to assist with loading the custom (page level) action items. By adding our custom subpage in here, it was conflicting with the page level action items.

      What I did to workaround this issue, is to add the subpage outside the "Custom Action" as follows:
      https://snag.gy/D9BQ8G.jpg

      Also make sure the custom subpage is above the "Custom Actions" groupbox as follows:
      https://snag.gy/rFtzma.jpg

      Let me know if this helps.

      Delete
    6. Also, updated the following blog post with the fix:
      https://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5c-fluid.html#2

      Delete
    7. Thanks Sasank... yes after this change its working fine. :)

      Delete