Sasank's PeopleSoft Log

If we login to a Campus Solutions 9.2 PUM image (CS 9.2 PUM 4 in my example), we will notice that we have the old left hand navigation menu for the Classic pages even though we are using PeopleTools 8.55+.

How is this available only in Campus Solutions and not in other application pillars?

This is because of the Navigation Options - Type setting under PeopleTools > Portal > General Settings which is set up differently in Campus Solutions. If we want to enable the left hand menu navigation then we can set it to 'Left'. If we want to disable it, then we can set it to 'Drop-down'.

It is a common practice in most social media and big brand websites to use the webpage logo as a hyperlink for navigation. This usually provides a mechanism for the users to 'return to home' in most cases. Here is a very interesting discussion on how this standard/convention originated:
https://ux.stackexchange.com/questions/81727/why-is-it-standard-for-a-website-logo-to-navigate-to-the-home-page

In the past, I have worked on requirements where we wanted the logo of a PeopleSoft application to hyperlink to the enterprise portal (which may or may not be PeopleSoft based). To generalize this requirement, let us assume that we want to hyperlink the PeopleSoft Logo to a configured URL (which could be any URL of our choice).

This post assumes that:

We are on PeopleTools 8.55+ and that we are using the Branding Theme Macro Sets.
Refer (For more information on Theme Macro Sets): https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html
We have a mechanism to inject a javascript object globally across the application (system wide). In my case, I am using a framework of sorts that I built and described in the following post: https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

My environment details:
- CS 9.2 PUM Image 4
- PeopleTools 8.55.12

Adding a Hyperlink to the Logo on the Fluid Homepage:

The first step we need to do is to identify the HTML elements (divs, images, etc.) that are involved in generating the logo. It is very easy to identify this using the browser's developer tools (inspect element option).

As we can see, the logo image is added to the div (with the style class nuihdr_logo) as a pseudo-element using CSS. Here is a javascript object that selects this div (using the class selector) and adds a click event which redirects to a URL defined in a URL definition (CSK_LOGO_URL). This works well because the div element is completely enclosed within the image (psuedo-element) in terms of position on the webpage and as a result does not have any overflow issues. We will see how this can be an issue as we extent this functionality to the Classic Homepage (next section).

JavaScript Object: CSK_LOGO_URL_JS

I used the javascript injection framework to load this javascript object.

URL Definition Configuration:

Results:

Here is a demo of the Fluid Homepage Logo hyperlink.

Adding a Hyperlink to the Logo on the Classic Homepage:

In this section, we will extent the functionality discussed above to the logo on the Classic Homepage. Let us use the same approach and try to identify the HTML elements (divs, images, etc.) that are involved in generating the logo.

As we can see, the div element (with id pthdr2logofluid) spans the entire width of the page whereas the logo image which is added as a pseudo-element using css obviously does not. So, if we were to use the previous approach and add a click event function for this div (id pthdr2logofluid), then the entire div (which spans the width of the page) would become a hyperlink.

It is not very easy to selectively fire the click event function only on the pseudo element because pseudo elements are not part of the DOM and therefore cannot be manipulated using javascript. After a long search where I almost gave up, I found the following discussion where there was a solution for a similar requirement.

Refer:https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element
JSFiddle:http://jsfiddle.net/ZWw3Z/70/

We can take this idea and apply it to the Classic Homepage Logo by updating the javascript as follows:

Updated JavaScript Object: CSK_LOGO_URL_JS

The updated javascript code selects the div element (with id pthdr2logofluid) and sets all pointer-events to none using css. The javascript also has the click event function to redirect users to the URL configured in the URL definition (CSK_LOGO_URL).

Finally, the Classic stylesheet (CSK_BRAND_CLASSIC_TEMPLTE_FL) which is part of the Branding Theme in my environment which uses Theme Macro Set (click here for more details), was updated to set the cursor and pointer-events properties for the pseudo-element.

Results:

Here is a demo of the Classic Homepage Logo hyperlink.

Dan Iverson from psadmin.io created a new Idea on MOSC:

Fluid global search box should default the cursor:
https://community.oracle.com/ideas/18507

Workaround:

If the current behavior is causing issues and you would like to set the focus on the search box, then it can be achieved by adding one line of custom code to the following delivered objects (depending on your tools release):

PeopleTools 8.55+:

HTML Object: PT_SEARCH_FMODE
Function: toggleGBLSearchTray
Custom Code:
    /* CSK Customization - Start */
    document.getElementById("PTS_KEYWORDS_GLB").focus();
    /* CSK Customization - End */

PeopleTools 8.54:

If you are using PeopleTools 8.54, then you will not find this function toggleGBLSearchTray in PT_SEARCH_FMODE (since that object does not exist). Look for the same function in PT_PAGE_SCRIPT_FMODE.

HTML Object: PT_PAGE_SCRIPT_FMODE
Function: toggleGBLSearchTray
Custom Code:
    /* CSK Customization - Start */
    document.getElementById("PTS_KEYWORDS_GLB").focus();
    /* CSK Customization - End */

Last week, I worked on a requirement where I needed to find all the components that are part of a role (or a list of roles) including the Portal Menu Navigation Path if it exists. It is easy to get the list of components that are part of a role but it is not really straight forward to qualify that information with the actual Portal Menu Navigation (if it exists).

In the past, I used the following query to return the Portal Menu Navigation Path for a Component. The query mines through the Portal Structure and Content and presents the navigation hierarchy in the result.

As we can see, it will not be easy to re-purpose this hierarchical query and expand it for my requirement.

While poking around on this topic, I stumbled on this gem of a table PSPRSMNAVINFO that, I believe, was introduced thanks to the PeopleSoft Search Framework!

Here is what we can see in the Definition Properties of this record:
"Holds the Navigation Path to the given target crefs registered in Portal Registry. Holds only effective and non-expired target crefs.
Used by the Portal Menu SES Search.
Updated every schedule of search index file"

From my understanding, it appears that this table is used as part of the PeopleSoft Search Framework - PTPORTALREGISTRY Search Definition. Also, the App Engine library PORTALPATHAE is responsible for populating this table with the navigation path information when the search index is built.

PeopleTools > Search Framework > Designer > Search Definition (PTPORTALREGISTRY)

PeopleTools > Search Framework > Administration > Schedule Search Index

To identify the last time the PTPORTALREGISTRY search definition index was built, we can query the table PSPRSMPATHSTAT.

If for any reason we don't have the Search Framework enabled and we still want to take advantage of the data in this table, then we can simply populate this table by directly running the PORTALPATHAE App Engine Library from App Designer. Since I was testing this on a Virtual Box installation of a PUM image (CS 9.2 - Image 4), I did not have Search enabled/configured. I ran the AE from App Designer as follows:

Now, let us see how we can use PSPRSMNAVINFO to get the Portal Menu Navigation information.

The best part about this table is that it allows us to directly retrieve the navigation path for a component without having to deal with the hierarchical structure in PSPRSMDEFN. This makes it easier to use/expand this information in other queries.

Here is how I extended this information to create a query that retrieves all components in a role along with the Portal Menu Navigation Path information (if it exists).

Github link to SQL Queries in this post:
https://github.com/SasankVemana/PS-Portal-Menu-Navigation-Queries

A good friend asked me if we can add a descriptive tooltip to Fluid UI elements. This reminded me that adding tooltips to page field elements has not been very straight forward with PeopleTools. In Classic, we had a few options (there may be more):

1. Use the field class - HoverText property. This has many limitations - only works for push buttons or hyperlinks, maximum length of 100 characters, to name a few.
2. Use the page field property (use) - Mouse Over Popup settings. This again is limited to push buttons or hyperlinks. It also involves creating Popup page object.
3. Use application delivered Mouse Over Popup Pages. For example, HCM delivers some configuration that can be used for setting up mouse over popup fields.
4. Custom approach: http://peoplesoftdotnet.blogspot.com/2015/06/hovertext-in-to-edit-box.html

Needless to say, these options may not be very flexible to use with Fluid.

The good news is that in Fluid, we could use the HtmlAttributes field class property to add/update attributes to the page field element. This allows us to add/update the textattribute which is used to display the tooltip. Let us try this and see how it may work.

Test Environment Details:

Application: CS 9.2 PUM Image 4
PeopleTools Release: 8.55.12
Test Component/Page: AV_OUTR_SRCH_S_FL/AV_OUTR_SRCH_FL
Navigation: Fluid Home > Contributor Relations Homepage > Donor Prospects

Using HtmlAttribute to update the text attribute:

The page activate code for AV_OUTR_SRCH_FL page is written the following App Package Method:
App Package Class: AV_OUTR_FL.COMPONENTS.AV_OUTR_S_FL.OnExecute
Method: pageActivate

Let us add some custom code to update the text attribute for page field AV_SRCH_FLDS_WK.LAST_NAME_SRCH.

Delivered Tooltip on larger viewport:

Delivered Tooltip on smaller viewport:

With the hoverover text overflowing the smaller viewport, we can see that the tooltip is neither user-friendly nor responsive.

In a quest to find a user-friendly/responsive option, I stumbled on this resource:
https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
Demo: http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/

The steps provided in Osvaldas's blog are very simple. We just need to load the CSS and javascript provided in the blog and then add the rel="tooltip" attribute to the target page field element. I wanted to take this idea and apply it to PeopleTools (using the above example).

Responsive and Mobile-Friendly Tooltip:

I updated the previous custom peoplecode and added the rel="tooltip" property. Further, I added a javascript object that is improvised on Osvaldas's code.

Custom Tooltip on larger viewport:

Custom Tooltip on smaller viewport:

Implementation Details:

I shared my code - which is based on the blog post by Osvaldo Valutis - on GitHub.
https://github.com/SasankVemana/Fluid-UI-Responsive-Tooltip

PeopleCode:

In the sample peoplecode provided above, you can see that along with the text attribute we have also added the rel="tooltip" attribute to the page field element using the HtmlAttributes property.

CSS:

I modified the CSS provided in Osvaldo's blog to update the tooltip text and background colors. You can make additional modifications if necessary based on your requirement. Create a Free-Form Style Sheet object in App Designer using the CSS (CSK_TOOLTIP_CSS) in the GitHub project.

JavaScript:

I extended the javascript provided in Osvaldo's blog to wrap the code in a require block to facilitate the loading of jQuery using requireJS which is I have detailed in the past as part of a javascript injection framework. You could use alternate methods but you need to make sure that jQuery is loaded prior to execution of this javascript. Additionally, this javascript also takes care of loading the CSS (CSK_TOOLTIP_CSS) using helper functions in the javascript injection framework. Create a JavaScript (HTML) object in App Designer using the javascript (CSK_TOOLTIP_JS) in the GitHub project.

In this post, I want to share how we can add the current userid to the 'Sign out' action menu item which is part of the branding.

Fluid:

Classic:

What is the benefit?

The reason I find this useful is because we can quickly hover over the action menu on any page and find out who we are logged in as (particularly when we are testing with multiple userids). Further, in the past we had a lot more real estate in the Branding header and we could add a greeting message to provide some flavor of personalization/user identification. But with the New User Interface (NUI) navigation and branding, it is not ideal to use up the Branding header to display a lengthy (space consuming) greeting. This 'Sign out' customization will provide a user specific label.

Implementation Details:

Environment:
- CS 9.2 PUM Image 4
- PeopleTools 8.54.12

Project on GitHub:
https://github.com/SasankVemana/Branding-Signout-Label-Customization

'Sign out' label customization in Fluid:

Record: PT_WORK
Field: PT_BUTTON_LOGOUT
Event: RowInit

Note: Add the peoplecode to PT_WORK.PT_BUTTON_LOGOUT.RowInit

'Sign out' label in Classic:

In Classic, we can update the 'Sign out' label without any customization using the Branding Framework.

App Package Implementation for Custom Sign out:

Note: This App Class was cloned from PTBR_BRANDING.SystemElement.SignOutLink and updated to include the %operatorid on the label.

App Package:

Create New Branding Element Type:
PeopleTools > Branding > System Data > Define Element Types

Remove delivered 'Sign out' from the Custom Branding Header:

Note: This is assuming we used a custom branding header to define our Branding Theme. In my case, I used the following approach: PeopleTools 8.55 Branding

- Delete 'pthdr2signout' element from the custom header (CSK_HEADER_FLUID).
- Save the custom header (CSK_HEADER_FLUID).

Add Custom 'Sign out' element to the Branding Header:

PeopleTools 8.56 has been out for a few months now. This is a review what is new in the Branding Framework for this release.

Review Environment Details:

- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01

Branding Framework:

Not much has changed with the Branding Framework. I was expecting some improvements to the Theme Macro Set functionality which was introduced in 8.55. There are still some hard-coded references to images in javascript which would have been nice to move to Theme Macro Set CSS functionality. For example:

The delivered macro set, PT_DEFAULT_MACROSET_855, still contains 117 macros (same as in 8.55) with no changes in 8.56.

As you can see, there is a new Color Picker on the Theme Macro Set page which is a nice productivity enhancing feature! This Color Picker is based on HTML5 'color' input type element.

Icon Changes:

A notable change that we have already seen in demos prior to the release is the new 'Action Menu' icon. This has changed from the old 'hamburger' menu to a 'pea' (?) menu. Graham Smith thinks this is a healthy dietary change! We cannot argue with that. :)

Using Theme Macro Sets:

Since the framework has not changed, it was pretty much the same set of steps to use Theme Macro Sets to override Branding elements. One thing to note is that we definitely want to clone the 8.56 objects (style sheets, headers, themes, etc.) instead of moving objects from an 8.55 environment. This will make sure that we have the most current versions of the object in question.

We can follow the steps detailed in my previous posts describing how to use Theme Macro Sets to override Branding Elements:
PeopleTools 8.55 Branding - Theme Macro Sets - Part 1
PeopleTools 8.55 Branding - Theme Macro Sets - Part 2

One of the issues I noticed was the position of the 'Pea' icon was a little off after applying the Theme Macro Set overrides. This issue occurred only on the Classic Pages. For example:

I fixed this by adding the following a top property to the #pthdr2ActionList:after style selector which is part of the Classic Theme Style Sheet.

Using Oracle JET:

I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version.

Resources:

JavaScript Injection Framework
Framework is based on my experience with Oracle JET - Part 1, Part 2, Part 3 and Part 4
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

Using Classic Plus:

I wanted to test the delivered Classic Plus pages that were available in this PUM image. But when I navigated to the Process Monitor page - which is in the list of PeopleTools Components delivered as Classic Plus - I was still seeing the good old Classic.

To activate Classic Plus, we must update the Branding System Options to use "Fluid like theme for Classic" as the "Theme Style Type". This is the system level setting that enables "Classic Plus".

Process Monitor after setting 'Theme Style Type'.

More information on Classic Plus:
PeopleBooks - Classic Plus

Related Branding Posts:

Fluid UI - New Window Feature - Workaround
Using Different Branding Themes for Different Portals
Using the Logo as a Hyperlink
Fluid Global Search - Setting Focus on the Search Box
Adding Userid to 'Sign out' Action Menu Item Label

Grids are one of the more complex UI controls to work with in Fluid. This is because grids by design are in a tabular format which is not very conducive to respond to small form factors (particularly when there are a several columns).

I learnt a lot about grids in Fluid UI while chatting with Stefan van Liempt from CY2. He is one of the top Fluid developers and has several innovative ideas and designs. Watch his blog space here for interesting posts on Fluid (many more to come in the future)!

The following presentation on UI Controls is a must read for anyone who is starting to learn Fluid:
http://cy2.nl/wp-content/uploads/10-Fluid-UI-controls-you-should-know-about.pdf

In this post, I would like to share what I learnt from Stefan's presentation and how one of my colleagues used 'stacked columns' to create responsive grids simply by using Page Field Properties! At the end, I will share a project containing the demo pages with grids detailed in this post.

Classic Grid Layout:

To start off, I created a simple Fluid page containing a Grid with a 'Classic Grid Layout'.

Demo:

We can see that the 'Classic Grid Layout' in Fluid simply creates a grid much like in Classic UI. The grid is not responsive.

Flex Grid Layout:

Next, I changed the Grid Properties to use a 'Flex Grid Layout'.

Demo:

As we can see, the grid has a different (Fluid-like) style with the 'Flex Grid Layout' but the grid is still not responsive.

Flex Layout with Stacked Columns:

Next, I added a couple of group boxes to the grid in an effort the stack the columns to avoid the horizontal scrolls.

Demo:

By using the 'Stacked Columns' we can see how the horizontal scrolling can be avoided. This is great for a small form factor device. But the problem I have with the 'Stacked Columns' is that it is not maximizing the space available on a larger form factor. Notice all the empty space between the 'Location Details' and 'Status' columns when the grid is rendered on a desktop?

Responsive Flex Grid Layout with 2 Columns:

To avoid the empty space issue that I described in the previous section, one of my colleagues showed me a simple trick to disable column stacking on certain form factors. Simply use the 'Suppress On Form Factor' Fluid Page Field Property on the two group boxes!

Demo:

As we can see, the grid is displayed in a normal 'Flex Layout' when it is rendered on a Desktop (extra large form factor) but is displayed with 'Stacked Columns' when it is rendered on a mobile device (small form factor).

Responsive Flex Layout with Single Column:

Just to provide another option, I wanted to show how we can use a single column display for small form factor. I simply removed the second group box so we only have one group box at the start of the grid.

Demo:

As we can see, by only using one group box in the grid, we can render the entire row in a single column format (if necessary).

Environment Details:

- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01

Project Installation Details:

To make it easier for readers, I shared a project on GitHub which contains the 5 demo pages that were created for this post.

GitHub Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos

Installation Instructions:

- Download the project from GitHub.
- Load the project into your database using 'Tools > Copy Project > From File...' option in App Designer. Note: DO NOT load this in a Production environment.
- You may need to add these pages to a permission list for access.
- This project will create a folder under PeopleTools > Portal > Structure and Content > Fluid Structure and Content > Fluid Pages as follows:

- Finally add the Demo Tile to any Homepage using the Personalization option as shown below:

Demo Assumption/Dependency:

- The demo pages use PS_LOCATION_TBL as the record for the grids. This table should exist in most PeopleSoft Applications (HCM, FSCM, CS) and is required for the demo to work.

Other Fluid References:

Jim's PeopleSoft Journal
Jim and Sarah Marion's Book - PeopleSoft PeopleTools: Mobile Application Development
PeopleBooks: http://docs.oracle.com/cd/E65859_01/fluid_ux/index.html
CY2 Fluid Blog: http://cy2.nl/category/peopletools/fluid/

Jim Marion wrote an excellent blog post on the pros and cons of Event Mapping Framework (EMF) in PeopleTools. One of the concerns that he rightly points out is the lack of lifecycle management support. Knowing the fact that this framework is new, we can expect Oracle to soon follow suit and provide EMF support in App Designer - Compare Reports (for LCM purposes) and PeopleCode Editor (for troubleshooting purposes).

While we wait for these enhancements to arrive, here is a SQL query that will find a correlation between peoplecode events in a project and the EMF metadata. The query will return all component/page/component record/component record field peoplecode events in a project that have a corresponding Event Mapping App Classes configured. This SQL will help with LCM support concerns that might be holding us back from using Event Mapping Framework!

GitHub Project: https://github.com/SasankVemana/EMF-LCM-Support-Helper

In one of my previous blog posts, I showed how to implement reCAPTCHA 2.0 in PeopleSoft. My blog post only covered setting up the reCAPTCHA plugin on the PeopleSoft login page as a workaround for DOS, bot attacks, etc. I also mentioned that the effort to implement reCAPTCHA in a PeopleSoft PIA page (Classic/Fluid) should be very similar. But I found that there is one challenge with implementing the same client side code in the PIA (as noted by some comments in the post). The issue is a common problem we routinely run into when we combine a HTMLAREA (with JavaScript) and a PIA page! Every time there is an event that posts back to the server, the entire page is refreshed. Obviously and unfortunately for us, this will cause the HTMLAREA to reload as well. If there is javascript in the HTMLAREA and if we are referencing external scripts (as we do in reCAPTCHA), there is a risk that the script will be reloaded and any variables may be reset. In order to workaround this problem, we need to be extra careful with writing javascript in HTMLAREA making sure we properly 'manage' how our code is executed during such events. This is true for all cases not specific to this reCAPTCHA implementation.

To demonstrate the problem, I added the reCAPTCHA plugin (client side) code to a Classic PIA Page using a HTMLAREA.

Classic Page

HTMLAREA and Page Activate PeopleCode

The HTMLAREA is populated dynamically using Page Activate PeopleCode.

JavaScript and HTML for reCAPTCHA

The javascript and HTML needed to display the reCAPTCHA plugin is stored in a HTML object (CSK_RECAPTCHA).

Result

We can see that the reCAPTCHA plugin is displayed successfully on the page.

Demonstration of Problem

Basically, on the second postback the reCAPTCHA API javascript will no longer load and therefore result in the reCAPTCHA div to disappear. In the demo, we can see the problem occurs during the FieldChange (Server Trip) and the Save events.

Solution

To solve this problem, instead of directly using the script element in the HTMLAREA to reference the reCAPTCHA API javascript, I wrote a javascript function to load the script in the DOM.

Result

reCAPTCHA Callback Function

You may notice that there is another function called svRecaptchaCallback and it is used as the data-callback attribute value in the reCAPTCHA div element. This callback function is a great feature that is available with reCAPTCHA which allows us to execute our custom code upon a successful reCAPTCHA event. You can see in the following demo that the message is printed on the console once we complete a successful reCAPTCHA verification. As an example, this could be used to conditionally activate/display certain page field elements only after a successful reCAPTCHA verification. Please note that this is purely on the client side. That is, the callback function is available and executed on the browser as part of our HTMLAREA. This is not the same as the server-side validation!

Notes

- Environment Details: HCM 9.2 PUM Image 23, PeopleTools 8.56.01.
- The main focus of this post is the client-side implementation. The server side validation logic can be implemented based on the code provided in my previous post. Only difference here is that we will be executing the PeopleCode in a event such as SavePreChange or similar instead of the SignOn PeopleCode event.
- The implementation in this post is done as a proof of concept only. When implementing reCAPTCHA in a PIA page, we may also want to consider only prompting the user with the reCAPTCHA validation once. Prompting the users to confirm that they are not robots on every Save event might not result in a great user experience.

Sample Project on GitHub

https://github.com/SasankVemana/reCAPTCHA-in-PIA

While working on some quirks with reCAPTCHA implementation in a PeopleSoft PIA page, I stumbled on this scarcely documented, hidden gem in PeopleTools 8.56. For many years, we struggled with HTMLAREAs and how they behave with AJAX requests in PeopleSoft. Basically, HTMLAREAs get reloaded every time there is an AJAX request on the page which puts the responsibility on the developer to make sure any javascript code in the HTMLAREA continues to work as expected. Jim's post dating back to 2006 illustrates how long this has been a problem!

I ran into a similar problem with the reCAPTCHA implementation and I wrote additional javascript code to workaround the issue. In the process, I found this HTMLAREA page field property called 'Respond Only Once' which is new in PeopleTools 8.56. This property is not documented in PeopleBooks except for this one location as a related topic:
PeopleBooks - PeopleTools 8.56 - Field Class Properties

Based on what I found, this property when selected will exclude the HTMLAREA from AJAX requests. A total life saver! :)

Of course, the HTMLAREA will be included in the Save event (postback).

Demonstration of Problem

In this demo we can see how the reCAPTCHA plugin (as an example) which is generated by a HTMLAREA gets reloaded/refreshed on every AJAX requests. On the second server trip, the reCAPTCHA div will disappear because the reCAPTCHA API javascript is no longer loaded as expected.

HTMLAREA

Demo

We can see how the HTMLAREA is reloaded every server trip resulting the disappearance of the reCAPTCHA plugin.

Respond Only Once Property

Let us set the 'Respond Only Once' property in the HTMLAREA.

Demo

In the following demo, we can see how the 'Respond Only Once' property helps to exclude the HTMLAREA from the AJAX requests and to avoid reloading its contents.

When users login to PeopleSoft Fluid UI, they land on the system default Fluid homepage or the user personalized default Fluid homepage.

How can we override this default behavior and take users to a different homepage? First, why would we want to do that? There may be many reasons why we would need to deep-link to a specific Fluid homepage overriding the default behavior. For example, let us say we need to conditionally deep-link to a specific Fluid homepage from an external site using single sign on.

In Classic, we were able to simply pass a parameter (tab) to the homepage URL.

Default Classic Homepage

http://pi023.hcm92.com:8000/psp/ps/EMPLOYEE/HRMS/h/?tab=DEFAULT

Deep-link to Classic Homepage

http://pi023.hcm92.com:8000/psp/ps/EMPLOYEE/HRMS/h/?tab=HC_HRS_RECRUITING_HOMEPAGE_TAB

Deep-Linking to Fluid Homepage

Similar to the Classic Homepage parameter (tab), the Fluid Homepage allows us to pass a parameter (LP) to 'override' the landing page! Here is an example.

http://pi023.hcm92.com:8000/psc/ps/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL?LP=HC_DEVELOPER_HOME_GBL

If we look at some of the HTML objects which store JavaScript in PeopleTools, we will find many styles of comments. Here are a few options.

Option 1
// Option 1 - Single Line Comment;

/*
Option 1 - Multi-line Comment 1;
Option 1 - Multi-line Comment 2;
*/

Option 2
//% Option 2 - Single Line Comment;

<!%
Option 2 - Multi-line Comment 1;
Option 2 - Multi-line Comment 2;
-->

What is the benefit of using % meta-html?

The screenshot below shows how the javascript is rendered at runtime. We can see that using the % sign allows the meta-HTML processor to recognize the comments and delete them during runtime.

PeopleBooks: Comments in HTML

Does commenting style (% meta-html) really matter for JavaScript?

Not really. PeopleTools 8.53 introduced JavaScript Minification by default. The screenshot in the previous section was generated by disabling minification (using Signon - Page Generation trace settings). Therefore, the commenting style in JavaScript does not really matter if we don't override/disable the PeopleTools (8.53+) default minification which will delete all comments (regardless of style) in JavaScripts.

PeopleBooks: Working with JavaScript in HTML Definitions

The PeopleTools New User Interface (NUI) and Branding has been available for a while and it should not be news to anyone that the system level header appears as shown below.

As we can see, the Branding header provides icons such as Home, Search, Notifications, Actions Menu and Navigator. This is a system wide setting controlled by the application branding configuration/setup. That means these icons will appear on any page/component we navigate to. For example:

What if we want to disable some or all of these icons at a component level?

There is a configuration in the Component - Fluid Properties - Header Toolbar Actions which allows us to disable some or all of these icons.

What if we want to programmatically/conditionally control the visibility of these header icons?

Someone asked me this question in one of posts here. I found that this is very much possible using the delivered (8.55+) PT_PAGE_UTILS API (App Package).

We can simply use the Banner App Class available in the PT_PAGE_UTILS App Package to control the visibility of the header icons in PeopleCode at the page/component level.

PeopleBooks Reference:
Fluid Page Utilities Classes
Banner Class

For example:

Results:

We can see that the 'Home' icon is disabled using PeopleCode on this particular page.

Similarly we can use the following Banner class methods to disable other Branding header icons:
SetVisibilityActionList
SetVisibilityAddto
SetVisibilityHelp
SetVisibilityMyPreferences
SetVisibilityNavbar
SetVisibilityNotifications
SetVisibilitySearch
SetVisibilitySignout

Further, some of these options (Search) are not available via Component - Fluid Properties.

PeopleCode for reference:

Fluid UI provides an option to override the default 'Classic' look and feel of the page tabs located at the top of the page by using Left Navigation with PT_SIDE_PAGETABS. PT_SIDE_PAGETABS is nothing but a page definition (Type: Side Page 1) which needs to be included in the component page list. That's it!

If we include PT_SIDE_PAGETABS in the component, the page tabs which is usually located at the top will automatically transform to a Left Navigation. This Left Navigation can be expanded and collapsed by the users.

Demo

For this demo, I am using the same component which used in one of my previous posts.

Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos

As we can see in the demonstration, the Left Navigation is always collapsed by default and the users will need to slide out the Left Navigation every time they want to tab to a different page.

What if we want to programmatically control the Left Navigation default behavior?

Particularly for larger form factor devices (laptops, desktops, etc.), it would save several clicks if the Left Navigation was expanded by default and fixed.

This can be achieved using the PT_PAGE_UTILS API - PanelController App Class.

In the following code, I initialized the Left Navigation (Side1) mode to fixed only for Extra Large Form Factor devices using the PanelController Class SetSide1ModeFixed method.

Demo

I wrote about the Back button considerations for Fluid development in a previous post.

If we navigate to any component, then by default PeopleTools would track this navigation in the psback cookie which is used by the Back button.

Also, if the component contains multiple pages and if we navigate across pages within the same component, then those navigations are not included by default in the navigation history.

Demo

For the purposes of this demo, I am using the same component which I created for one of my previous posts - Fluid UI - Working with Grids.

Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos

As we can see in the example, the Back button does not record any of the internal page navigations within the same component. This is actually the expected/default behavior and should cover most use cases because it is not commonly a requirement to track the internal page navigations.

But what if we want to track the page navigations within the same component in the Back button history?

There is a very simple option to do just that.

Component Properties > Fluid (Tab) > Component Attributes > Page Navigation in History (Property)

Demo

In the above demonstration, we can see that setting the 'Page Navigation in History' component property allows us to track the page navigations within a component (if required). This can also be programmatically achieved using the PeopleTools built-in 'SetTransferAttributes' function as described in my previous post here.

A community member asked the following question on one of my previous blog posts.

Is there a way to dial a phone number and call the employee (someone) from a PeopleSoft page?

This is a great question! It is very simple to enable phone numbers as clickable elements - click to call/dial from a webpage to the dial screen on a mobile device. This is similar to how we enable email addresses as clickable elements using the mailto: URI scheme. Basically, replacing the href "mailto:" URI portion with "tel:".

References
https://developers.google.com/web/fundamentals/native-hardware/click-to-call/
https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

Implementing this in Classic is probably not a relevant use case but the question led me to investigate how we can achieve this in Fluid which is the responsive UI for mobile devices! For something which seems as simple as described above, I had to jump through a lot of hoops (trial and error) to make this functionality work in Fluid.

Use Case

For example, wouldn't it be great if we can simply click on any phone number on the 'My Team' page under Manager Self Service (HCM) to directly launch the dial screen (with the number) on a mobile device?

If we look at the Employee email addresses on the 'My Team' Tile (HR_DIRTEAM_FLU Page), we can see that they are configured to reference the "mailto:" URI scheme.

The Fluid Attributes of the page field (Email Address):

Notice the Fluid (Tab) > Input Properties > Input Type? Also, notice the 'Generate As Hyperlink' option which is only available for 'email' Input Type? As we can see in the drop-down, there is no Input Type option for 'Phone Numbers' (tel:) in the Fluid Properties (Tab). So, we cannot use the Page Field properties to enable the phone number as a hyperlink (with the required "tel:" URI scheme).

Next, I wanted to explore if we can configure this programmatically (peoplecode) by taking advantage of these really useful Field Class'Fluid Only' properties:
HtmlInputType
IsHyperlink

The expectation based on the Field Class API is that we could simply add the following code on the Page Activate PeopleCode or another appropriate event to make this work.

Expected PeopleCode Snippet

Unfortunately, using the %tel option (which would have been ideal) did not work. It appears that this PeopleCode Field Class Property value does not work as expected. It has no effect on the HTML generated to represent the page field element (bug?).

To workaround this issue, I set the HtmlInputType to %email instead. This is a hack to ensure the anchor tag with the href attribute and the "mailto:" URI scheme is generated in the HTML. Then, as a cleanup, I wrote a small piece of javascript to find and replace "mailto:" with "tel:". This worked!

Workaround PeopleCode Snippet

For the purpose of this demo, the above PeopleCode snippet was added to the end of delivered HR_DIRTEAM_FLU.Activate (Page Activate peopleCode). For a production use case, we may want to consider adding this code in an app class and then invoking the custom peoplecode using Event Mapping Framework in an effort to avoid customization.

Result of Workaround PeopleCode

As we can see, the phone number is wrapped in an anchor tag with the href attribute using the "mailto:" URI scheme.

Workaround JavaScript

Result of Workaround JavaScript

As we can see, the "mailto:" URI scheme has changed to "tel:" which is what we need to enable phone numbers as a clickable element on the webpage.

Demo on a Mobile Device

Link to MOSC Idea: Improve Field Class Fluid Properties and Page Field Fluid Input Properties

Please review and vote on this idea if you are convinced that it is a welcome enhancement.

Demo Environment Details

This demo was conducted on a HCM PUM Image 23 - PeopleTools 8.56.01.

A community member asked a question:
"Client need the Navigator of Nav Bar on top left side before company logo. i could manage to move the Nav Bar button, but when i click on it, the content is appearing on right side as usual... is there any way that i can move only navigator to the left side of the screen?"

While I don't recommend this approach (primarily because it will overlap on several other design patterns such as master/detail, nav collection, etc.), I wanted to see how we can achieve something like that? This post is purely from a curiosity point of view.

Most of the NavBar SlideIn/SlideOut toggle functionality is controlled with the delivered PTNUI_NAVBAR_CSS free-form stylesheet object.

To change the NavBar SlideIn direction from "right to left" to "left to right", we need to make the following changes:

Update .PTNavBarModal class to replace %AlignEnd with %AlignStart.

Also, update the media query for SFF.

More details on these meta-HTML variables can be found here:
PeopleBooks Reference

Next, we need to find all occurrences of the following in PTNUI_NAVBAR_CSS:
dir="rtl"

And replace it with:
dir="ltr"

Demo

Demo Environment Details
- HCM 9.2 PUM 23
- PeopleTools 8.56.01

In the past, I wrote about how we can add custom links to the Branding - Action Menu at the system level.

Refer: Adding Custom Links to Fluid Branding

While testing this feature, I found that these custom links do not work in certain scenarios. For example, clicking those links from within the NUI Activity Guide framework (which is also used in Nav Collections).

I originally used the FieldChange event and the Response Class RedirectURL method to implement the redirection logic in Fluid Branding as shown below.

Since the Response Class RedirectURL method proved to be problematic in certain scenarios, I started investigating other options. In the process, I found this great delivered JavaScript function called DoURLWarning which is part of PT_HISTORY object in 8.55+ (PT_PAGESCRIPT_FMODE object in 8.54).

DoURLWarning function allows us to redirect to a URL using javascript. Additionally, the function will take care of checking for any unsaved data in the current page and if there is any it will display the "Save Warning" message. If not, it will redirect to the URL in the parameter list.

To use the DoURLWarning function, I removed all the redirect logic from the FieldChange Event. And added code in the RowInit event (as shown below) to utilize the DoURLWarning in combination with the Field Class JavaScriptEvents Property.

PeopleCode for reference

Demo

As we can see in the demo video, the custom link on the Action Menu works when invoked from the Activity Guide framework (which is also used in Nav Collections). The same approach described above can be used to implement custom links to internal PeopleSoft pages as well (e.g.: Process Monitor, Report Manager, etc.).

Save Warning Demo

Fluid UI New Window Feature Implementation

I used a similar technique as described above to implement the 'New Window' feature in Fluid UI as a custom link on the Branding - Action Menu.

Refer: Fluid UI - New Window Feature - Workaround

The only difference in the implementation is that instead of using the Response Class RedirectURL method (which would redirect/replace within the current window), I used the ViewContentURL method to open a new window as shown below.

We can see in the demonstration below, that the same problem described for the custom links also exists for this New Window implementation.

To workaround the problem, I took a similar approach and removed the existing logic from the FieldChange event and moved it to the RowInit event. In the RowInit event, I used the Field Class JavaScriptEvents Property in combination with the Window interface's open method as shown below. Additionally, I also updated the logic to include the %Request.QueryString to the URL to make sure that none of the additonal parameters are lost when opening the new window.

PeopleCode for reference

Demo

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)

Portal - General Settings - Navigation Options

PeopleTools 8.55+ Branding: Using the Logo as a Hyperlink

Fluid Global Search - Setting Focus on the Search Box

PSPRSMNAVINFO - Portal Menu Navigation in SQL

Fluid UI - Responsive and Mobile-Friendly Tooltip

PeopleTools Branding - Adding Userid to Sign out Label

PeopleTools 8.56 - Branding Review

Fluid UI - Working with Grids

Event Mapping Framework - Lifecycle Management (LCM) Considerations

reCAPTCHA in PeopleSoft PIA Pages

PeopleTools 8.56 Hidden Gem | HTMLAREA 'Respond Only Once' Property

Fluid UI | Deep-linking to a Fluid Homepage

Commenting JavaScript in PeopleTools

PeopleTools 8.55+ Branding | Conditionally Display Header Icons

Fluid UI | Using Left Navigation with PT_SIDE_PAGETABS

Fluid UI | Back Button Considerations

Fluid UI | Click To Call - Making Phone Numbers Clickable

Customizing the NavBar SlideIn Direction

Adding Custom Links to Action Menu using DoURLWarning JavaScript Function

Fluid Branding - File Attachments Icon