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

Sunday, March 20, 2016

Fluid UI - Native Device Features - Camera for Scanning Credit Card Details

While paying a bill on my phone (Samsung S4), I accessed a responsive web application and found an interesting feature that allowed me to scan my credit card details (card number, name and expiration date) using the device camera/scanner as an autofill option. I liked this functionality because I am not a great fan of typing on the mobile phone so I would welcome anything that would save me from doing that! Also, it is interesting particularly because this was just a web application without any native app wrapper (mobile app). So, it appears that we could still tap into some of the native device features with just a web application which means we should be able to implement this functionality with PeopleSoft Fluid as well - without any mobile/native app wrapper.

I started digging into similar features available in PayPal and Amazon and arrived at the following combinations of id, placeholder and autocomplete attributes for iOS/Safari and Android/Chrome. Note: This only works via HTTPS for both the scenarios. Please weigh in any security risks that might be associated with saving credit card details on the browser. This post is just a proof of concept to demonstrate the usage of the device camera as an image to text utility.

iOS/Safari:

I believe the minimum requirement to enable this feature in iOS/Safari is iOS 8.

You can test the code on an iPhone/iPad using the following jsFiddle web page which I created as a sample.
https://jsfiddle.net/SasankVemana/asam6hro/


Android/Chrome:

You can test the following code on any Android device using the following jsFiddle web page which I created a sample.
https://jsfiddle.net/SasankVemana/21zt0sbm/


How do we implement this in Fluid?

Let us assume that we have a Fluid page that is used as a form for credit card payments.

Fluid Credit Card Form:

A simple Fluid page based on PSL_APPS_CONTENT layout page.



Fluid Page Field Properties (Page Field Name and Placeholder):

CSK_CC_TEST_WRK.CSK_CC_NBR



Repeat for other fields on the page:

CSK_CC_TEST_WRK.CSK_CC_NAME
- Page Field Name: CCNAME
- Placeholder Text: Cardholder Name

CSK_CC_TEST_WRK.CSK_CC_EXP
- Page Field Name: CCEXP
- Placeholder Text: Expiration Date

CSK_CC_TEST_WRK.CSK_CC_CSC
- Page Field Name: CCCSC
- Placeholder Text: CVV (3-4 Digits)

Page Activate PeopleCode:

This takes care of couple of tasks:
- For safari browsers: Inject jQuery and a custom javascript (CSK_CC_SAFARI) which replaces the capitalized ID value (e.g.: id = 'CCNUMBER') with the mixed case ID value (e.g.: id = 'ccNumber'). Refer following section for more details.
- For chrome browsers: Include the autocomplete attribute for all the credit card form fields.


PeopleCode for reference:

Declare Function SetViewport PeopleCode PTLAYOUT.FUNCLIB FieldFormula;

/* Set ViewPort Meta for SFF Scaling */
SetViewport("width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0"); /* apply the system default viewport setting */

/* Get Browser Type */
Local string &browserType = %Request.BrowserTypeClass;

Evaluate &browserType
When "safari"
  
   /* Inject jQuery */
   AddJavaScript(HTML.PT_JQUERY_1_6_2_JS);
  
   /* jQuery to replace id attribute with mixed case */
   AddJavaScript(HTML.CSK_CC_SAFARI);
  
   Break;
When "chrome"
  
   /* Set autocomplete attributes */
   CSK_CC_TEST_WRK.CSK_CC_NBR.HtmlAttributes = "autocomplete=""cc-number""";
   CSK_CC_TEST_WRK.CSK_CC_NAME.HtmlAttributes = "autocomplete=""cc-name""";
   CSK_CC_TEST_WRK.CSK_CC_EXP.HtmlAttributes = "autocomplete=""cc-exp""";
   CSK_CC_TEST_WRK.CSK_CC_CSC.HtmlAttributes = "autocomplete=""cc-csc""";
  
   Break;
End-Evaluate;


CSK_CC_SAFARI Javascript:

As mentioned in the previous section, the ID attribute as implemented using PeopleSoft Page Field Name Property is always generated in a capitalized format. Potential tools enhancement???

E.g.:


CSK_CC_SAFARI javascript object is used to replace these ID values in a mixed case format using jQuery.


Javascript for reference:

Results:

iOS - iPad:


Android - Samsung Galaxy S4:


References:

https://www.paymentspring.com/blog/hacking-form-cardscan
http://stackoverflow.com/questions/25163891/when-scan-credit-card-option-is-available-on-ios8-safari
http://stackoverflow.com/questions/7223168/how-to-trigger-autofill-in-google-chrome/9795126#9795126
https://www.w3.org/TR/mediacapture-streams/
https://www.w3.org/Mobile/mobile-web-app-state/#Payment
https://html.spec.whatwg.org/multipage/forms.html

Wednesday, March 16, 2016

PeopleTools 8.54+ - Branding - Part 5D - Fluid Branding (Continued)

Overriding the "Processing" Icon:


This requirement is similar to overriding the Favorite Icon. The "Processing/Spinning" icon generally appears when the PeopleSoft PIA is still processing a request. This "Processing" icon is simply a GIF image - PT_PROCESSING_FMODE delivered image object. In some scenarios, this delivered icon may not really fit in with the custom Branding theme. If we want to override this icon then there are two options.

Option 1: Replace delivered GIF image object PT_PROCESSING_FMODE with a custom GIF image object. This is not something I would recommend but it is an option for those looking for a quick and dirty override (along the lines of Doc ID 2004996.1).

Option 2: Use the jQuery image replacement technique detailed in the previous post for overriding this delivered image PT_PROCESSING_FMODE with a custom image (CSK_PROCESSING_FMODE).

I am using the following image as my custom "Processing" icon:


Delivered PT_PROCESSING_FMODE image for reference:


I am updating my image replacement javascript object CSK_FL_IR_JS again. I am finding all the occurrences of PT_PROCESSING_FMODE (delivered image) with id = "processing" and replacing it with a custom image (CSK_PROCESSING_FMODE) using jQuery.


Updated javascript (CSK_FL_IR_JS) for reference:

// Get Image URL for CSK_LOGO (FavIcon);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskFavIcon&img=CSK_LOGO_FAVICON' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK_LOGO (Fluid);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskLogo&img=CSK_LOGO_SVG' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK_LOGO (Fluid SFF);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskLogoSFF&img=CSK_LOGO_SFF_SVG' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK Custom Processing Icon for Fluid;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskProcessingFmode&img=CSK_PROCESSING_FMODE' type='text/javascript'%3E%3C/script%3E"));

var $jq = jQuery.noConflict();
$jq(document).ready(function(){

  // Get current Image Source;
  var imageSrc = $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src');

  if (imageSrc != null) {
    if (imageSrc.indexOf("PTNUI_ORACLE_LOGO_SFF") < 0) {

      // Use Regular Image;
      $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src', cskLogo);

    } else {

      // Use Small Form Factor Image;
      $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src', cskLogoSFF);

    }
  }

  // Replace Browser Favorite Icon(s);
  $jq('head link[href*=LOGO_FAVICON]').attr('href', cskFavIcon);

  // Fluid Processing Icon;
  // 20160420 - Updated selector to be more specific to Fluid using src attribute wildcard;

  $jq('#processing[src*=PT_PROCESSING_FMODE]').attr('src', cskProcessingFmode);

});


Result:


Check out this demo video >>>> Override Processing Icon

Saturday, March 5, 2016

PeopleTools 8.55.x - Branding - Part I - What has changed?

PeopleTools 8.55 release packs a punch when it comes to new features. There are also some notable improvements to Branding in PeopleTools 8.55 building on the Branding framework that was previously delivered as part of PeopleTools 8.54.

In this post, I will cover some of my key findings at a high level and follow up with an additional article on some 'how-to' guides for common Branding tasks.

Note: This post assumes that the branding is applied to a stand-alone PeopleSoft application without the use of PeopleSoft Interaction Hub. There is a new Branding Activity Guide in PeopleSoft Interaction Hub Image 2 which provides a guided step-by-step process for customers to perform simple or advanced branding tasks and to publish the Branding Theme to other PeopleSoft applications in the cluster. Please refer to this Oracle blog post which highlights the latest Interaction Hub features and provides additional resources.

Unified Header:

This certainly deserves a mention because there may be some misconception that starting from 8.55 users are forced to use Fluid. The point to clarify and understand is that the only thing changing is the Branding header and the navigation mechanism. In 8.55, we now have the same header (hence the term unified) for both Classic and Fluid. With that, there is a shift in user navigation as well. That is, we would need to use the NavBar, Fluid Homepages, Dashboards, etc. to navigate around the application instead of using the traditional drop-down menu/breadcrumb navigation for Classic.

Matthew Haavisto from Oracle has detailed this in his blog entry with some references and how-to steps for those who might still want to use the Classic navigation.

Note: I updated the title of this section from 'Unified Header and Navigation' to just 'Unified Header'. I realize that 'Unified Navigation' is not a term to be used loosely as it may have a different meaning depending on whether we are using PeopleSoft Interaction Hub or not. Please refer to another blog post (again authored by Matthew Haavisto) which level sets these concepts.

Global Javascript Injection:

I previously wrote about the issue with custom javascript injection in Fluid pages. The same challenge still persists in 8.55. This means that any custom javascripts added to the Branding System Options does not work on the Fluid pages but it does on the Classic pages.

E.g.:

NavBar > Navigator > PeopleTools > Portal > Branding > Branding System Options


The test javascript CSK_TEST_JS contains a simple alert message.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects


Results in Classic: The javascript gets injected and the alert message is displayed.


Results in Fluid: The javascript does not get injected and the alert message is not displayed.


Workaround: We can still use the same workaround that I previously described here.

Global Style Sheet Injection:

The same issue exists for global style sheet injection using the Branding System Objects. But there is a delivered alternative to include custom styles to Fluid which I detailed in my previous post.

Theme Macro Sets for overriding Branding Elements:

I am saving the best for the last! This is definitely a great addition to the framework and I believe that it can only get better with future releases. In 8.55, we can now override some of the common Fluid Branding elements such as images, icons and styles with just configuration (macro sets). I previously detailed the complexity of overriding Fluid Branding elements in 8.54 (Part 5A and Part 5C).

PeopleBooks Reference: Defining Macro Sets and Macros

I will show you a teaser on how we can use the Theme Macro Sets to override the unified header (classic/fluid) branding logo image.

Before that we must start of with some housekeeping tasks to assemble a custom theme with custom homepage header, classic - theme style sheet and fluid - global override style sheet definitions. This would enable us to not only override the logo image but also to override subsequent Branding elements.

Step 1: Create Custom - Classic - Theme Style Sheet Definition

Note: We only need to perform this step if we intend to override some of the delivered styles for Classic while using Theme Macro Sets.

Clone delivered style sheet: PT_BRAND_CLASSIC_TEMPLTE_FLUID

Copy the entire contents on the freeform tab of the delivered style sheet (PT_BRAND_CLASSIC_TEMPLTE_FLUID) using App Designer.


Paste it as the contents of a custom style sheet object - CSK_BRAND_CLASSIC_TEMPLTE_FLUID.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects


Step 2: Create Custom - Fluid - Global Override Style Sheet Definition

Note: We only need to perform this step if we intend to override some of the delivered styles for Fluid while using Theme Macro Sets.

Clone delivered style sheet: PT_BRAND_FLUID_TEMPLATE

Copy the entire contents on the freeform tab of the delivered style sheet (PT_BRAND_FLUID_TEMPLATE) using App Designer.


Paste it as the contents of a custom style sheet object - CSK_BRAND_FLUID_TEMPLATE.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects


Step 3: Create Custom - Homepage Header:

NavBar > Navigator > PeopleTools > Portal > Branding > Define Header and Footers

Search for header definition DEFAULT_HEADER_FLUID and 'Save As' CSK_HEADER_FLUID (custom header).



Step 4: Create Custom - Theme Macro Set:

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Copy the delivered Macro Set (PT_DEFAULT_MACROSET_855) and save as CSK_DEFAULT_MACROSET_855.


Enter custom Macro Set name (CSK_DEFAULT_MACROSET_855) and Save.



Step 5: Assemble Custom Theme

NavBar > Navigator > PeopleTools > Portal > Branding > Assemble Themes

Search for theme definition DEFAULT_THEME_FLUID and 'Save As' CSK_THEME_FLUID (custom theme).


Update the custom theme CSK_THEME_FLUID with the custom definitions created in the preceding steps.

Note: If you did not clone PT_BRAND_CLASSIC_TEMPLTE_FLUID and PT_BRAND_FLUID_TEMPLATE in steps 1 and 2 respectively, then you can just use the delivered styles for Classic - Theme Style Sheet and Fluid Components - Global Override Style Sheet.


Note: The following settings are mandatory for using Theme Macro Set. I did not find these mentioned anywhere in the documentation.
  1. Homepage Header: Must be derived (cloned) from DEFAULT_HEADER_FLUID.
  2. Classic - Theme Style Sheet: Must be derived (cloned) from PT_BRAND_CLASSIC_TEMPLTE_FLUID.
  3. Fluid - Global Override Style Sheet: Must be derived (cloned) from PT_BRAND_FLUID_TEMPLATE or PT_BRAND_FLUID_NOIMG_TEMPLATE.
These are the reasons why we completed steps 1-3. I believe the above requirements for Theme Macro Set are to be released shortly as part of a more detailed Branding guidelines document.

Step 6: Update Branding System Options

Update Branding System Options to reference the custom theme CSK_THEME_FLUID (created in the previous step).


We have completed all the housekeeping tasks to assemble a custom theme in the Branding framework. Now, we can start using the Theme Macro Sets to override Branding elements.

Step 7: Override Logo (or other available Branding elements) using Theme Macro Sets

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Click on the custom Theme Macro Set to override the available Branding elements (177 elements - images, icons and styles - are available as delivered).



Since we want to override the logo, let us find the Branding elements (macro names) that represent the logo and override the macro content to use a custom image.




Note: I used a custom logo which is a SVG image with a height of 32 pixels. You may need to adjust other styles if your image height varies. I tried to match the height of the delivered image for the sake of this proof of concept.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects


Results in Fluid:


Results in Classic:


Now we can see the results of using a macro to override the logo image. But if you look at the screenshots closely, the logo is a little displaced. Let us fix that by adjusting the style (top padding).

Macro Name: PT_LOGO_TOP_PADDING
- Adjust top padding from 0.25em to 0.00em


Results in Fluid:


Results in Classic:

While the difference is subtle, you might notice that the Fluid logo appears to be positioned as expected (padding-top: 0.00em;) but the Classic logo is still displaced.

When I looked into it further, I figured that the classic homepage logo styling is getting generated a little differently and does not honor the macro override (PT_LOGO_TOP_PADDING) we just updated.


Since we already did all the housekeeping work, it is very easy to override this style using the custom Classic - Theme Style Sheet (CSK_BRAND_CLASSIC_TEMPL_FLUID).

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Edit CSK_BRAND_CLASSIC_TEMPL_FLUID and set top to 4px for .homePageHdr #pthdr2logofluid:before selector.


Results:


Hope this gives you an understanding of what is new with Branding in PeopleTools 8.55. In the next post, I will provide guidelines on how to perform some more detailed branding tasks. Stay tuned!

Notes:
  1. Details of the environment used for this post: HCM 9.2 - PUM Image 16 - PeopleTools 8.55.01.
  2. If you find any inconsistent results while going through any of the steps detailed in this post (especially while assembling the theme) then please make sure you bounce your web and app servers and purge the cache.