Customizing the NavBar SlideIn Direction

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"

Note (Updated 03/28/2018)

Please review comments in this blog post. This POC works only when the NavBar is opened in expanded state which can be achieved with the approach provided in the following blog post.

Open NavBar in expanded mode with Navigator

Demo

Demo Environment Details
- HCM 9.2 PUM 23
- PeopleTools 8.56.01

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

PeopleTools 8.55+ Branding | Conditionally Display Header Icons

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: