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