Tuesday, June 27, 2017

Fluid Global Search - Setting Focus on the Search Box

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 */
 

Saturday, June 24, 2017

PeopleTools 8.55+ Branding: Using the Logo as a Hyperlink

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:
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.


Sunday, April 23, 2017

Portal - General Settings - Navigation Options

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'.


LinkedIn-style Smart Notifications in PeopleSoft: Integrating FavIcon and Page Title with Push Notifications

As part of the latest wave of changes that were done to the LinkedIn UI, I noticed that they also made a change to their FavIcon. The FavIcon alerts us if there is a new notification. Of course, the Page Title also shows us the number of new notifications similar to most modern websites (Twitter, Facebook, etc.). This is great feature especially when we are off "working" on other browser tabs to grab our attention.


Push Notification Framework has been part of PeopleSoft since PeopleTools 8.54 release. So, why not integrate the FavIcon and the Page Title with Push Notifications? This will help the users to return to their work if they receive a notification. Perhaps a UX/UI productivity feature?

Demo:

Here is a demo of how we can subscribe to the Push Notification events and dynamically update the FavIcon and the Page Title.


Environment Details:
- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

Step 1: Create a Custom FavIcon in Classic and Fluid

I wrote about this topic in the past (as part of my Branding articles). Currently, there is no delivered option to use a custom FavIcon in Classic and Fluid consistently.

Refer: Overriding FavIcon

Related Posts and Reference Documents:
PeopleTools 8.55+ - Using Oracle JET Series: Part 1, Part 2, Part 3 and Part 4
Global JavaScript Injection Framework
My Oracle Support > E-PIA: Does PeopleSoft Use Favicon ? (Doc ID 1226503.1)
My Oracle Support > E:FLUID- How To Access Favicon On Fluid Landing Pages? (Doc ID 2004996.1)

Step 2: Create a custom JavasScript to Subscribe to Push Notifications

JavaScript Object: CSK_SUB_PN_JS


Notes:

The script contains three main parts
- cskSmartFavIcon function takes care of replacing the custom FavIcon with an alternative custom alert FavIcon. It also takes care of pre-pending the Page Title with the notification counter in (n) format.
- The Push Notifications - Subscribe function is used to subscribe to the desired Push Notifications events.
- Finally, cskFavIconPNJS function (called from PTPN_NOTIFICATION_MSG_JS > DoNotify function) takes care of toggling the FavIcon and the Page Title when the user has clicked on the Notification Icon.

Step 3: Inject CSK_SUB_PN_JS globally across the application

As mentioned in reference documents in Step 1, I used my custom framework to inject CSK_SUB_PN_JS globally.


Step 4: Update delivered JS - PTPN_NOTIFICATION_MSG_JS

This will take care of toggling the FavIcon and resetting the Page Title when the user clicks on the Notification Icon.


Monday, April 17, 2017

Fluid UI - Tile Wizard API - Part 3 - Dynamic Tile Style

This is a continuation of the Fluid UI - Tile Wizard API series: Part 1 and Part 2. In this part, we will explore the Tile Wizard API further to dynamically style tiles and more importantly find an option to target specific tiles to apply custom style classes.

In the past (refer Fluid UI - Styling Tiles - Part 1 and Part 2), I wrote about the challenges with the way the id attribute is auto-generated in the tile html (div elements).

E.g.: In the screenshot below, the div element for the 'Financial Account' Tile in the Student Homepage has an id attribute value of win0divPTNUI_LAND_REC_GROUPLET$2.


The number 2 in the id attribute value denotes that it is the third (starting with 0) tile on the Homepage. This auto numbered id value is still unique enough to target the elements under this div and apply custom styles using css selectors (e.g.: make the 'Financial Account' tile title appear in red color, etc.). But this assumes that the end users or even the administrators will not change the order of the tiles either via Personalizations or via administrative pages (structure and content). If such events occur, then it would be a bit complex to apply a style class targeted to a specific tile. This was the main reason I created an Idea on My Oracle Support to request this ability as a PeopleTools enhancement.

With this background, I got really excited when I saw that we could potentially use the Tile Wizard API for applying targeted styles to a tile using the TileID and the TileSpecificStyleSheet properties of the Tile Wizard Class.

Environment Details:
- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

TileID Property Quirk:

But first, I found some quirky behavior with the TileID property. When I tried to set the TileID for the custom tile 'My Team' which I created in Part 2, it did not really update the id attribute on any of the elements that are part of the Tile. Instead the value was added to the class of the Tile Content area. This appears to be a bug from my understanding. If you are finding different results then please leave a comment with your experience!

PeopleCode:



We can see that the id attribute of the tile - where we would have expected the update - is still unchanged, whereas strangely the value is added to the class of the Tile Content area. Bug?

Using the TileSpecificStyleSheet Property:

While it is evident with the name of this property that it is specific to a tile, it does not necessarily mean that it will only be applied to the target tile. Basically, the style sheet is added to the response which may or may not be specific to the target tile depending on the style class selectors in the style sheet.

Let us say we added a custom style sheet to the 'My Team' tile using the TileSpecificStyleSheet property.


Scenario 1:

Let us add the following style to the freeform style sheet to set a different color to the Tile Title.

SV_TILE_CSS Style Sheet:


Results:

We can see that all the tiles on the homepage are affected by this style class. This is because the style class does not have any targeted css selectors and therefore will be applied to all tiles on the homepage.


Scenario 2:

Let us add another style - this time specifically targeting the 'My Team' tile using css selectors - to change the color of the Live Data text.

SV_TILE_CSS Style Sheet:


Results:


Overall, while there are workarounds, it would be great if the TileID property works as expected (perhaps in the future releases of PeopleTools?) which would allow us to easily write custom style classes to accurately and effectively target specific tiles.

Friday, April 14, 2017

Fluid UI - Tile Wizard API - Part 2 - Dynamic Tile Images

This post is a continuation of my previous article on the Tile Wizard API, where I described how we can use the Tile Wizard API to dynamically update the Tile Content.

In this post, we will see how we can use the Tile Wizard API for another similar and more common use case to display a dynamic image based on certain conditions.

For the purposes of this post, let us assume that we want to create a Tile called 'My Team' that displays a different image and live data based on the user's security role assignment.

Demo:


Tile Wizard Setup:

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile






App Package PeopleCode Implementation:



PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class TILE_2 extends PTGP_APPCLASS_TILE:Tiles:Tile
   method TILE_2();
   method getTileLiveData();
end-class;

method TILE_2
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
  
   If IsUserInRole("SV_CSK") Then
      rem %This.setTileImageRef("SV_CSK"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_CSK;
      /* Live Data */
      %This.TileLiveData_1 = "Chennai Super Kings";
   End-If;
  
   If IsUserInRole("SV_RCB") Then
      rem %This.setTileImageRef("SV_RCB"); /* Method equivalent */
      %This.ImageReferenceField.Value = Image.SV_RCB;
      /* Live Data */
      %This.TileLiveData_1 = "Royal Challengers Bangalore";
   End-If;
  
end-method;

Tuesday, April 11, 2017

Fluid UI - Tile Wizard API for Dynamic Tile Content

PeopleTools 8.55 introduced the Tile Wizard App Classes which enable us to use the API to dynamically modify Tile Content.

PeopleBooks: Tile Wizard Classes

There are three main areas in the Tile where we can add dynamic content - Tile Content, Live Data and Badge.

Here is an example of how we can use the Tile Wizard Classes to dynamically update the content of a Tile as shown in the example below.


Step 1: Implement a custom App Class that extends PTGP_APPCLASS_TILE:Tiles:Tile



Notes:
- Make sure the App Package contains a Sub Package. Otherwise, we might run into errors as stated in this HEUG Technical Forum discussion.
- We can use the %This.SetTileContentAs... methods - %This.SetTileContentAsTwoKPIs() in this case - to override the "Tile Content Type" configured using the Tile Wizard (which we will perform in step 2).
- We can also use the various Tile Class Properties to set the Tile Content (e.g.: KPI values and labels), Live Data (values, trend image and metrics formatting) and Badge Data.

Step 2: Create Tile using Tile Wizard

NavBar > PeopleTools > Portal > Tile Wizard > Create Tile



Notes:
- We can see that the App Class created in step 1 is referenced as the Data Source.
- Also, the "Tile Content Type" is set to Image in the Wizard configuration level (although it will be overwritten using PeopleCode).
- Similarly, the "Tile Badge" is set to "No" in the Wizard configuration but it can be overwritten using PeopleCode.


Note:
- For the purposes of this example, I set the Target Page to "PS Unit". This can be set to anything as per our requirement.


Note:
- The Tile image is set to PTFP_DEFAULT_CLOUD as a dummy. It will not be used in this case, because we will be overriding the "Tile Content Type" via PeopleCode.


Step 3: Add Tile to a Fluid Homepage

Fluid Home > Action Menu > Personalize Homepage


Results:


Environment Details:

- CS 9.2
- PUM Image 4
- PeopleTools 8.55.12

Related Posts:
Part 2
Part 3

PeopleCode for Reference:

import PTGP_APPCLASS_TILE:Tiles:Tile;

class TILE_1 extends PTGP_APPCLASS_TILE:Tiles:Tile
   method TILE_1();
   method getTileLiveData();
end-class;

method TILE_1
   %Super = create PTGP_APPCLASS_TILE:Tiles:Tile();
end-method;

method getTileLiveData
   /+ Extends/implements PTGP_APPCLASS_TILE:Tiles:Tile.getTileLiveData +/
  
   %This.SetTileContentAsTwoKPIs();
   /* 1 KPI tile content */
   %This.TileKPI_1 = %This.getAmountFormattedValue(1.23456789, "USD");
   %This.TileKPI_1_Label = "KPI1_1 Label";
   %This.TileKPI_2 = "KPI_2";
   %This.TileKPI_2_Label = "KPI_2 Label";
  
   /* Live Data */
   %This.TileLiveData_1 = "LD_1";
   %This.TileLiveData_2 = "LD_2";
   %This.TileLiveData_3 = "LD_3";
  
   /* A trend arrow is an optional element of live data. */
   %This.hasLivedataTrendImage = True;
   %This.TrendImage = %This.k_strTrendDownImage;
  
   /* Metrics Formatting */
   %This.isTileLiveData_1_Metrics = True;
   rem %This.isTileLiveData_2_Metrics = True;
   rem %This.isTileLiveData_3_Metrics = True;
  
   /* Badge */
   %This.hasLiveDataCount = True;
   %This.TileTransCount = 7;
  
end-method;

Friday, March 24, 2017

Using Different Branding Themes for Different Portals

Most of the posts on my blog are mainly based on or inspired by questions/comments/ideas on my blog, OTN, HEUG and other PeopleSoft forums. This post is no different. Someone raised an interesting query on one of my Branding posts:
What would it take to have a different logo for the different portals (Employee, Supplier, ...)?

We already know how to use 'Branding Themes' to configure Branding requirements like logo, icon, color changes, etc.
PeopleTools 8.54 - Branding - Part 1
PeopleTools 8.55 - Branding - What's new?

For the purposes of this demonstration I created two very simple but different Branding Themes (SV_RED_THEME_FLUID and SV_BLUE_THEME_FLUID). And as we can see below, I am using SV_RED_THEME_FLUID in my 'Branding System Options' as the 'Default Branding Theme'.

SV_RED_THEME_FLUID:



 SV_BLUE_THEME_FLUID:


Branding System Options:


But the changes that are part of a Branding Theme which are applied using the 'Branding System Options' would propagate across the application to all portals (EMPLOYEE, SUPPLIER, CUSTOMER, etc.).

How do we override the 'Default Branding Theme' for specific portals?

Let us say, we want to use a different theme (SV_BLUE_THEME_FLUID) for our CUSTOMER portal.

The solution is very simple. We just need to use the 'Assign Themes' page to configure the override. But the caveat is that we must log in to the portal in question (CUSTOMER in this case) while performing the 'Assign Themes' step.

PeopleBooks: Assign Branding Themes


Trick/Shortcut to switch between portals:

Simply edit the URL to replace the portal portion with the desired value (assuming we have security access to the portal concerned).
E.g.:
http://pi004.cs92.com:8000/psp/ps/EMPLOYEE/SA/c/PTBR_MENU.PTBR_ASSIGN_THEME.GBL
http://pi004.cs92.com:8000/psp/ps/CUSTOMER/SA/c/PTBR_MENU.PTBR_ASSIGN_THEME.GBL


Assign Theme Override for a specific Portal (CUSTOMER):


Results:

Sign out, clear browser cache and sign back in to see the results.


Environment Details:
CS 9.2 - PUM Image 4 - PeopleTools 8.55.12

Related Post:
Role Based Branding Theme Assignments

Sunday, February 19, 2017

Related Content/Event Mapping for Components not registered in the Portal

Related Content Framework and the latest Event Mapping Framework allow us to add services to components (and other content reference types) that are registered in the Portal Menu Structure - Structure and Content. What if we want to add related content or event mapping services to a component that is not registered in the Portal?

Question Courtesy: Lewis Thompson
Event Mapping Framework - Hello World and Quirks | Comment


E.g.:

Component 1
- Hyperlink > Transfers to Component 2
- Hyperlink > Transfers to Component 3


We can see in the above scenario, only Component 1 is registered in the Portal. From Component 1, we use FieldChange peoplecode events to transfer to Component 2 and Component 3.

Component 1:


Transfer to Component 2 - FieldChange PeopleCode:


Transfer to Component 3 - FieldChange PeopleCode:


What if we want to add a related content or event mapping service to such components (Component 2 or Component 3) that are not part of the Portal menu structure?

David Bain from Oracle recently presented an overview of PeopleTools 8.56 (which is not GA yet) via Quest (access recording here). @24:23 he talks about expanding support for Event Mapping Framework via a related content API. It is possible that an API to related content would be very handy for such scenarios! But we will have to wait and see!

In the interim, here are the steps to workaround the scenario detailed above.

Adding Related Content Service:

Register the Component to a Hidden Folder in the Portal | Structure and Content:

PeopleTools > Portal > Structure and Content



Assign Related Content to hidden Content Reference:

PeopleTools > Portal > Related Content Service > Define Related Content Service


PeopleTools > Portal > Related Content Service > Manage Related Content Service > Content References (Tab) > Assign Related Content to an Application Page (Link) > Include hidden Crefs (Option)



Adding Event Mapping Service:

Register the Component to a Hidden Folder in the Portal | Structure and Content:

PeopleTools > Portal > Structure and Content




Assign Event Mapping Service to hidden Content Reference:

PeopleTools > Portal > Related Content Service > Define Related Content Service


Application Class Implementation:


PeopleTools > Portal > Related Content Service > Manage Related Content Service > Event Mapping (Tab) > Map the event of the Application pages (Link) > Include hidden Crefs (Option)



Results: