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.


Updated on 04/26/2018

Please refer the below blog post for updated code/logic.
https://pe0ples0ft.blogspot.com/2018/04/adding-custom-links-to-action-menu.html#2

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

42 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
  9. anyone on 8,56x seeing an issue with PT_HEADER_ACTIONS image pushed to the bottom on classic pages? We are using custom fluid branding which we built using the Fluid theme builder. On fluid pages, the image is positioned correctly. However, when you go to classic pages, the image is pushed to the bottom.

    ReplyDelete
    Replies
    1. Are you referring to the problem described in this post?
      https://pe0ples0ft.blogspot.com/2017/08/peopletools-856-branding-part-1.html

      If so, that post covers the issue and how to resolve.

      Delete
    2. Thanks Sasank. That fixed it!! As always we appreciate your prompt help, and this site has been simply wonderful!

      Delete
    3. You are welcome! Glad to hear that it is fixed. :)

      Delete
  10. Hi Sasank,

    This is a fantastic article, thank you for publishing it!
    I've attempted to follow your steps in our environment but I keep getting the error:

    Invalid record/field: PT_WORK.NEW_WINDOW
    The record/field specified in the page definition is invalid. Using Application Designer, change the record.field reference to a valid record and field reference.

    It appears PeopleSoft is replacing the record attached to my Hyperlink with PT_WORK
    The custom record I have attached to the New Window Hyperlink is COS_ACTIONLIST and the field is NEW_WINDOW.
    For testing I changed this field to BUTTON and got the same error message but it instead said:

    Invalid record/field: PT_WORK.BUTTON

    I am on PeopleTools 8.55.21
    Have you encountered this error before?
    Any help you could provide would be greatly appreciated.

    Thanks,
    Michael

    ReplyDelete
    Replies
    1. I have not seen this error.

      You may want to check your page field properties (including the page order tab) and see if there are any references to PT_WORK.

      Delete
    2. Thank you for your response. That lead me to the solution.
      On the Record tab of my Group Box Properties I needed to add the Record and Field names.

      Thank you so much, our employees are going to be so grateful to have this functionality in 9.2

      Delete
  11. I was getting the red dot as well, but starting over with a new PT_HEADER_ACTION like you suggested on another comment did the trick. I must have moved too many things around or something first.

    Anyway, my question is for Nav Collections. The New Window link works, however, when the new page opens up it shows an error: "Activity Guide Template Id is invalid. Please check the template id or contact your Portal Administrator." It appears that the querystring is missing. I tried adding %Request.QueryString to the URI, however, it doesn't appear that this property has a value even though I can clearly see on the page that it should have a value. Any suggestions for this?

    Also, on the "My Preferences" page the new window link does NOT appear to work (or even fire the code). Any suggestion on how to trouble-shoot this issue as well?

    ReplyDelete
    Replies
    1. Hey Joe - Sorry for the delay in responding. While working on a related issue, I found some problems (in certain scenarios) with my original implementation of 'Adding Custom Links to the Action Menu'. Here are the details on my updated implementation. Please review and let me know your thoughts.

      https://pe0ples0ft.blogspot.com/2018/04/adding-custom-links-to-action-menu.html#2

      Delete
    2. Also, if you found other options to workaround the issue which you reported, please let us know!

      By the way, the issue that you have described is caused by the query parameters which were missing in the new window URL construction logic. I updated the code to include that as well. Thanks!

      Delete
  12. Hi Sasank, I am trying to use this with tools 8.57. It appears the url does not change when going to different pages within the nav collection, so all I ever get is the first entry in the nav collection when I open a new page.

    ReplyDelete