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:
- 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.
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
- 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.
Hi Sasank, this is quite helpful. Do you mind sharing the JS online so users who are not as familiar with JS can copy paste?
ReplyDeletenever mind my earlier request. I found your code in Git :)
ReplyDeleteThanks for the wonderful contrition to the community
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework/blob/master/CSK_INJECT_JS