Thursday, March 24, 2016

Fluid UI - CTRL+J - On Mobile Devices

Our fellow blogger, Frank Staheli, brought to our attention that the traditional CTRL+J (CONTROL+J hot key) does not work on all Fluid pages (refer blog post link). The alternative described by Frank is very useful! I had no idea that the CTRL+J data is actually part of the HTML rendered to the end user. So, if we "view source" on the browser, we can find all the creamy goodness in the HTML for troubleshooting purposes.

When I searched for more information on this topic on My Oracle Support, I found the following document which suggested the same approach for retrieving the CTRL+J information.

E-FLUID : How to view page information/ctrl+j in Android Mobile/Tablets (Doc ID 2094279.1)

I have two issues with suggesting this approach to a broader audience outside of technical folks: 

End Users: I am guessing that even some of the functional users (let alone end users) will not be very happy if we tell them that the traditional CTRL+J hot key is no longer available in Fluid/mobile devices and that they have to use "view source" on the browser to identify the "troubleshooting information". Not everyone is tech-savvy and would be happy to go under the hood of the web browser! I have seen many organizations use the CTRL+J hot key for production troubleshooting. For example, to identify what app server the end user is on. So this feature has more value than one might assume.

Mobile Devices: How do we make the "view source" instructions device agnostic? There could be several different scenarios depending on the device and the browser used. It could get pretty complex!

I wanted to take the elements which I learned on Frank's blog (pt_envinfo and pt_pageinfo buried in the HTML) and see how we can provide a device agnostic and an intuitive mechanism for all type of users to access this information.

I played with some jQuery/jQuery UI code and came up with the following script:
http://jsfiddle.net/SasankVemana/cfcxg5un/



You can access this code (jsfiddle sample webpage) on any device/browser and see how it works. If you either press the mouse (if you are on a PC/Mac) or touch the screen (if you are on a mobile device) and hold for 5 seconds anywhere on the webpage, then a responsive dialog will open up with the troubleshooting information. The javascript listens to mouse and touch events and displays the dialog message if 5 seconds have passed.

E.g.:

PC/Chrome:


Samsung Galaxy S4/Chrome:


Now that we have a proof of concept, how do we integrate it with Fluid? It is simple - we just need to inject the following globally across the application:

Javascripts: jQuery 1.7.2, jQuery UI 1.8.17 - PT_JQUERY_UI_1_8_17_JS, custom script from jsfiddle
CSS: jQuery UI CSS - PSJQUERY_BASE_1_8_17

Step 1: Inject Javascripts in Fluid

First, we need to create two custom javascript objects.

CSK_JQUERY_1_7_2_JS: I created a custom object with the contents of jQuery 1.7.2 because I did not find any delivered object with that particular jQuery version. I needed this version for the dialog display and styling (you could use other available libraries and adjust the custom javascript accordingly).


CSK_FL_CTRL_J_JS: This is to store the custom javascript from my jsfiddle example.


Note: We can adjust the number 5000 (ms => 5 seconds) in the above script to alter the hold time if necessary.

There are two options for injecting the required javascripts globally across the application.

Option 1:

Add the following code to the PT_HEADERPAGE.Activate Page PeopleCode event. This PeopleCode event is triggered on all Fluid pages.

/* CSK CONTROL+J Start */

AddJavaScript(HTML.CSK_JQUERY_1_7_2_JS);
AddJavaScript(HTML.PT_JQUERY_UI_1_8_17_JS);
AddJavaScript(HTML.CSK_FL_CTRL_J_JS);

/* CSK CONTROL+J End */

Option 2:

We can use the custom Fluid Bootstrap configuration for JS injection which I described in my previous post (refer: Fluid Branding Part 5B).


Step 2: Inject CSS in Fluid

We just need to inject the jQuery UI CSS which is already delivered as part of PSJQUERY_BASE_1_8_17 stylesheet object.

There are two options for injecting this CSS.

Option 1:

Append the contents of PSJQUERY_BASE_1_8_17 stylesheet to the Custom Fluid stylesheet on the Branding Theme (Refer: Fluid Branding Part 5A).

Option 2:

This is the easier option. To just add one line of code to PT_HEADERPAGE.Activate Page PeopleCode.

AddStyleSheet(StyleSheet.PSJQUERY_BASE_1_8_17);


Results:

To invoke the "Troubleshooting Information" dialog, all we have to do is to press the mouse (PC/Mac) or touch the screen (mobile devices) - anywhere on the webpage - continuously for 5 seconds! I tested this on several devices (PC/Mac/Samsung S4/Samsung S5/iPhone 6/iPad), browsers (safari/firefox/chrome/IE) and Chrome Device Emulator and it seems to work. Please test thoroughly before you deploy this solution to any environment.

PC/FireFox


Chrome Device Emulator/iPhone 6


Chrome Device Emulator/Samsung S5


Note: This dialog box will not contain any useful information if the web profile which is in use has the 'Show Connection & Sys Info' setting turned off. This is the setting required for the CTRL+J information to be displayed.

Navigation: Main Menu > PeopleTools > Web Profile > Web Profile Configuration


Please help vote up this idea if you think it would be beneficial to include this as an enhancement rather than using a custom approach.
Refer: My Oracle Support Community Ideas

10 comments:

  1. This looks great... Question .. Maybe even an addon to this. With the concept of FLUID we loose the bread crumbs thus we loose the path with for many Components.. Do you see a quick way to maybe incorporate a Path somewhere.

    ReplyDelete
    Replies
    1. Not sure if there is a quick way to incorporate the path into the UI. I will post back if I have any ideas.

      You can bring the drop down navigation back if you like (but it is not recommended):
      https://blogs.oracle.com/peopletools/fluid-header-and-navigation-is-the-new-standard

      Delete
    2. Actually I was thinking that some how it being part of the trouble shooting...
      Maybe a variable in the header that is defined when the component displays.. Thus available when you use your popup or if you view src

      Delete
  2. 2 Questions..
    1.On your Branding you added your Boot strap to PT_Util Above you added it to PT_HEADERPAGE .
    2.Normally I never worry about Tool Updates.. But there seems to be ton of them Lately... Is there anther place to put it so that it acts like pt_util

    ReplyDelete
    Replies
    1. Yes. Initially, I used the PT_HEADERPAGE to include javascripts in Fluid. Since then I moved to using Oracle JET - requireJS to build a javascript injection framework that works consistently in both Fluid and Classic.

      JavaScript Injection Framework:
      https://pe0ples0ft.blogspot.com.au/p/javascript-injection-framework.html

      Branding in 8.55 using Oracle JET:
      Part 1: https://pe0ples0ft.blogspot.com.au/2016/05/peopletools-855-using-oracle-jet-jquery.html
      Part 2: https://pe0ples0ft.blogspot.com.au/2016/05/peopletools-855-using-oracle-jet-jquery_29.html
      Part 3: https://pe0ples0ft.blogspot.com.au/2016/05/peopletools-855-using-oracle-jet-jquery_30.html
      Part 4: https://pe0ples0ft.blogspot.com.au/2016/06/peopletools-855-using-oracle-jet-jquery.html

      For an index of all branding related posts:
      https://pe0ples0ft.blogspot.com.au/2014/11/peopletools-854-branding-part-1.html#index

      If you are not comfortable using PT_UTIL, then you might want to avoid using my approach for the javascript injection. There is no easy way to achieve global javascript injection without customization of some flavor. But overall the logic in the script provided in this post should work regardless of what approach you use for injecting the javascript.

      Delete
  3. I thought I would move the Comment here..

    I finally got it to work (Little cludgy waiting 5 sec or 15 sec or move and wait)

    But I tested on a couple screens works.. But on one person when I am going to Fluid Approvals I get this error

    custom javascript error ReferenceError: enableActionButton is not defined

    I am not even sure where to look.. Since it only happens on one User

    ReplyDelete
    Replies
    1. @William Galusz - The 5 second wait was an event that I chose to use for a proof of concept purposes. You can chose other events that might be more intuitive and less cludgy. I just wanted to demo how we can use the information in the HTML to display the system details.

      Regarding the Fluid Approvals page, I am assuming you are using the MAP page (Does your URL contain /PSIGW/RestListeningContainer/ ?)? I doubt this (or any code involving the javascript injection framework) will work in MAP.

      Delete
  4. Actually I am not using MAP... I am using the new Fluid Approvals screens (With the Million Bugs)... (Page Composure/Registration Part of Pum 20 and above in Finance)

    ReplyDelete
  5. Hello Sasank, i see that you are using CSK_FL_CTRL_J_JS to display the dialog box. But which part of the code is pulling information of these objects?

    ReplyDelete
    Replies
    1. In the javascript you can find the code which constructs the string dialogMsg. You will notice that we are using jQuery to get the attributes of html element with 'pt_envinfo' as the ID.

      Delete