Fluid UI - Working with Grids - Part 4 - Styling Stacked Grids

There were some interesting requirements posted by a reader in the following blog post.

Refer: Fluid UI - Working with Grids

Requirement 1: How to align the elements in a column to 'top' in a Stacked Grid

Let us say, we have a two Stacked columns with different number of elements/fields in each Stack as shown in example - Responsive Flex Grid with 2 Columns. As we can see in the screenshot below, the first Stacked column contains 3 fields and the second Stacked column contains 2 fields.

Since the second Stacked column only contains 2 fields and they are centered from a vertical position point of view, they don't line up with the fields in the first Stacked column.

If we want to align the fields in the second Stacked column to the top, we can achieve that with the following CSS.

I really like the nth-child() CSS3 selector. The idea is to only apply the CSS to a particular child element and not all. In our case, I only wanted to apply the CSS to the second column <td> element with "ps_grid-cell" class as shown below.

You can find more details on the nth-child() selector in the following blog post.

https://support.awesome-table.com/hc/en-us/articles/115001393209-Add-style-to-specific-columns-or-rows-in-your-Table-view

Note: The CSS provided above is added to the page using the following Page Activate PeopleCode.

Requirement 2: How to align specific fields (elements) in a Stacked Column to the Right

Let us say, we want to right justify specific fields in a Stacked Column. For example, we want to right justify the EFF_STATUS field.

We can achieve this by simply identifying the the id value (or part of it) and apply a wildcard CSS selector that contains this value as shown in the following CSS.

The wildcard for the id is required in this case due to the window and grid row numbering that is prefixed and suffixed to the record field name to generate the id value.

Requirement 3: How to align a specific Stacked Column to the Right

Let us extend the previous requirement and say that we want to align the entire second Stacked column (including the Label) to the right.

We can simply achieve this by using the following updated CSS:

Result

Project Details

All examples in this blog post were built on the project provided in Fluid UI - Working with Grids.

Fluid UI - Working with Grids - Part 3 - Where are the Previous and Next buttons?

Someone asked the question if we can use the 'Next' and 'Previous' grid buttons in Fluid similar to Classic?

In Classic, we use the 'Previous' and 'Next' buttons which are available on the Grid Navigation Bar to move past the number of rows defined in the grid 'occurs count'.

When I revisited my previous post on Fluid Grids (Part 2), I realized that I set the Grid Properties - 'Occurs Count' to 5 rows and as a result I could only see 5 rows even though there are 13 rows overall. As you can see in the demo video below, when I search/find a value that is not in the first 5 rows, I can still find them. Only issue is that I cannot freely navigate across the 13 rows.

So, how do we navigate across the various rows in the Fluid grid if we are limited by the 'Occurs Count' as shown in the above example? One way is to use, 'Unlimited Occurs Count' but that is cheating!

Lazy Scrolling

Fortunately for grids, we can enable "lazy scrolling" which will pull in the additional rows dynamically as we scroll down. This method of lazy scrolling (if you will) is aimed at improving the performance of fluid application pages.

PeopleBooks | Enabling Lazy Scrolling for Scrollable Grids

Demo of Lazy Scrolling

Environment Details

FSCM 9.2 PUM 30
PeopleTools 8.57.02

JavaScript Injection Framework - Updates, Bugs and Fixes

The reason I am writing this blog post is to make readers aware of the latest version of the JavaScript Injection Framework and known bugs/fixes associated with the older versions.

If you read some of my previous posts on Branding and other UI enhancements, you may have come across several attempts made by me to find a means to globally (system wide) inject JavaScript/CSS. Unfortunately, there is no way to do this via delivered configuration/code so I ended up writing custom javascript code.

Over the years, I have made iterative improvements to this code and created a framework of sorts with a minimally invasive customization.

Early (Beta) version
https://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5b-fluid.html#FluJSInjectionBootstrap

Updated version (using RequireJS)
https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

As I was making further changes, I moved this framework to GitHub in an effort to better manage the code/versioning.

GitHub Project
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

Recently, the following Doc ID was brought to my attention via a twitter post.

Oracle Support Document 2294106.1
E-PIA: Run to HTML,Excel and XML links in Query Manager and Query Viewer spinning for ever while running a report having prompt criteria

Twitter Thread
https://twitter.com/ArcherHuck/status/1085635936053051394

@ArcherHuck Great question! Yes. This was an issue with an older version of my bootstrap code. I ran into a similar issue with Worklist pages as well. See this thread which has the details:https://t.co/CD7eRnBIyL

— Sasank Vemana (@sasank_vemana) January 17, 2019

After reviewing Doc ID 2294106.1, I realized that this issue is most likely caused by a customer who implemented this JavaScript Injection Framework. The issue reported in the Doc ID, is very similar to an existing issue identified with an older version of the framework.

Reported Issue: https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html#c6317103235239955618

The solution provided by Oracle in the Doc ID is to completely remove the custom framework which is understandable since this is not Oracle code. But this issue can be overcome by using the latest version of the JavaScript Injection Framework. In the latest version of the bootstrap javascript as shown below, the regex pattern is updated to account for an extended list of PeopleSoft URL types.

Additionally, the latest version of the framework that is available on GitHub also addresses and fixes some race conditions (which I ran into under certain circumstances) associated with RequireJS and other custom scripts.

Here are some resources that are very useful to understand common timing issues related to javascript functions and callbacks.

https://blog.kevinchisholm.com/functions-javascript/javascript-callback-functions-the-absolute-basics/
https://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Fluid UI - Working with Grids - Part 2 - Actionable Rows

Previously, I wrote about how we can create responsive grids in Fluid. In that post, the focus was to demonstrate how we can make grids, which are one of the more complex UI elements, responsive/adaptive in Fluid. For the purposes of that demo, we simply used 'Display Only' grids.

Refer: Working with Grids

There was an interesting question which came up in the comments section of that post. How do we enable the 'Chevron' icon which makes a row 'tapable' (actionable)? We can notice this style/feature in most of the delivered pages with grids.

When I started looking into this feature, I found that the documentation is not very straight forward. Here are some useful references on this topic:

PeopleSoft Fluid UX Standards > Grids > Grid Constructs > Tappable Grid Rows and Hotspots
CSS Guide for PeopleSoft Fluid User Interface (psc_show-actionable class)

From CSS Guide for psc_show-actionable class description:
"... If this is used on a FLEX grid, it is expected that a display-only (as text) field will be used as the last field on the grid having the style psc_more applied to it. This field may or may not have content."

This post will cover how we can enable actionable rows using two examples from Part 1.

Flex Grid Layout Example

Refer Part 1: Fluid UI - Working with Grids

- First, the previous project (available on GitHub) from Part 1 was copied to my target database using the 'Copy from File' option in App Designer. Then, the component was updated to remove the pages which will not be used for this demonstration.

- The Grid (LOCATION_TBL) properties were modified to remove the 'Display Only' setting. If the Grid is 'Display Only', we cannot make it tapable/actionable. Additionally, psc_show-actionable style class was added in the Grid - Fluid Properties tab.
- Then, all the fields in the Grid were set to 'Display Only' because I wanted my Grid columns to remain 'Display Only'.

- Next a new derived/work record field (SV_FL_WRK.EDIT_BTN) was added as a Push Button/Hyperlink to represent the 'row action trigger field'. This trigger field is where we can execute appropriate action upon a click/tap. For this field to function as the trigger, we must set the 'Execute PC on row/Group Click' property on the Use tab.

- To display the chevron icon on the grid rows which is used to represent 'more' information/actionable rows, a new dummy field (SV_FL_WRK.DUMMY_FIELD) was added to the Grid and set to 'Display Only'. Additionally, the psc_more style class was added in the Fluid tab.

- Finally, we can add PeopleCode on the 'row action trigger field' to perform appropriate action. The following video is a demonstration of the sample PeopleCode event.

Responsive Flex Grid with 2 Columns Example

Refer Part 1: Fluid UI - Working with Grids

Here we will perform similar steps (as in previous example) to demonstrate another case of actionable rows in a Responsive Flex Grid with 2 Columns.

- The Grid properties were updated to set to 'Display Only' and the psc_show-actionable style class was added under the Fluid tab. Next, all the fields in the Grid were made 'Display Only' to maintain the read-only state of the Grid.

- Next, a Group Box was added to represent the stack for the 'row action trigger field' and the chevron (more) icon. Then, the 'row action trigger field' (SV_FL_WRK.EDIT_BTN) and chevron icon (SV_FL_WRK.DUMMY_FIELD) were added to the Grid.
- We can see that the PeopleCode to hide the 'row action trigger' (SV_FL_WRK.EDIT_BTN) is also added to the Page Activate event.

- Finally, we can test the Responsive Flex Grid with 2 Columns on Desktop as well as on a browser emulator masquerading as a mobile device (iPhone 6/7/8) and see how actionable rows display on various form factors.

Conditionally enable/disable the 'row action trigger button'

If we need to, we can simply enable/disable the 'row action trigger button' on specific rows conditionally using PeopleCode. In this example, we can see that the 3rd row in the grid is disabled using Page Activate PeopleCode.

Environment Details

FSCM 9.2 PUM 30
PeopleTools 8.57.02

Project Source Code

An updated project containing the objects related to this post (Part 2) is available on GitHub.

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

Installation Instructions

- Download the project (Part 2) 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 the component/pages in the project 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 (under Fluid Structure and Content > Fluid Pages > Sasank's Fluid Demos > Fluid Grid Demo) to any Homepage either via Homepage Administration (under Fluid Structure and Content > Fluid Homepages) or via User Personalization.

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.
- Understanding of steps completed in Part 1.

Related Posts

Fluid UI - Working with Grids

Tile Wizard API - Part 4 - Dynamic Target Page

I previously wrote a series of posts on Tile Wizard API which allows us to control the display of the Tile Content using PeopleCode.

Part 1: Dynamic Tile Content
Part 2: Dynamic Tile Images
Part 3: Dynamic Tile Styling

These posts mainly focused on the content of the Tile as expected because the Application Class delivered by Oracle was mainly for the purpose of manipulating 'Tile Content'.

Marcin Tomczak asked the question:
"Can we make the tile point to a different external page than the tile itself?"

This made me wonder if we can dynamically change the target/destination page (internal/external) of a tile using PeopleCode? It is technically not a feature as per the design/implementation of the Tile Class. But there is an error/exception processing option that is available which might enable us to "hack" the Tile Class to do something it was not originally intended for.

Tile Class Properties - hasContent
Tile Class Properties - PreferencesURLLabel
Tile Class Properties - PreferencesURL

The hasContent property allows us to enable the error/exception mode where we can set a different image, destination URL and URL label. While it is technically not an error scenario in this case, we can still set it in error/exception mode to dynamically modify the Tile destination/target page!

Demo

- As you can see in the demo, the Tile 'Dynamic Target' is created using Tile Wizard with a destination page as 'My System Profile'. This destination has no significance because the 'Disable Main Hotspot' is set to 'Yes'.
- Once the role 'SV_ROLE_1' is added to PS user, we can see the new image and 'My Preferences' URL is enabled for the 'Dynamic Target' tile via the Tile App Class.
- When the role is switched to 'SV_ROLE_2', we can see the 'Change My Password' URL is enabled for the 'Dynamic Target' tile via the Tile App Class.
- When the role is switched to 'SV_ROLE_3', we can see the 'Google Search' external URL is enabled for the 'Dynamic Target' tile via the Tile App Class.

 Tile Wizard Settings

App Package PeopleCode

Environment Details
- CS 9.2 PUM Image 4
- PeopleTools 8.55.12

Fluid UI | Click To Call - Making Phone Numbers Clickable

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.

Fluid UI | Back Button Considerations

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.

Fluid UI | Using Left Navigation with PT_SIDE_PAGETABS

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

Fluid UI | Deep-linking to a Fluid Homepage

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