Note: You will need to replace UA-XXXXXXXX-Y with your GA_TRACKING_ID.
I recently ran into an issue with transfer functions executing from within a Nav Collection (which uses Activity Guide framework). These transfer functions result in the loss of the Navigation panel (Side Page) which is basically exiting from the Nav Collection.
Demo of the problem
Navigation Collection Definition for reference
Tile Wizard for reference
The solution to this problem is to use the AJAXTransfer=y parameter in the Content Reference corresponding to the Navigation Collection Tile. The following PeopleBook reference is a must read for anyone who is working on Fluid configurations like Activity Guides, Nav Collections, Master Detail pages, etc.
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.
PeopleCode for reference
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.
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.
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.
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:".
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.
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?).
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.
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.
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)
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 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.
For this demo, I am using the same component which used in one of my previous posts.
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.
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:
PeopleTools 8.56 has been out for a few months now. This is a review of what is new in the Branding Framework pertaining to the 8.56 release.
Review Environment Details:
- HCM 9.2 PUM Image 23 - PeopleTools 8.56.01
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.
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.
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 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".