Overriding Web Server Properties in the PIA
A while back I did a tutorial on how to define your own web profile custom properties. In that post I demonstrated how custom meta-HTML variables can be defined on the web profile that can then be used in the server’s static HTML files. This technique is good for providing an easy way to manage the web server properties in the PIA. Something that I did not mention in that post is that we can use the web profile custom properties page in the PIA to manage (and override) existing web server properties defined on the server. I have had good experiences using this technique to override delivered web server properties defined in the various .properties files on the web server. An example use case of this technique is to override properties in the text.properties file to achieve JavaScript injection on the PeopleSoft sign in page. In this post, I will demonstrate how we can use this technique so that we can have a custom sign in experience without having to customize delivered files.
The text.properties file holds key-value pairs containing messages that get displayed on the various HTML files on the web server. The variable of interest for performing JavaScript injection on the sign in page is #146.
This property is used for copyright text that gets displayed at the bottom of the signin.html file. The reason I like to use this variable for JavaScript injection on the sign in page is because of the way that it is embedded in the signin.html file.
Since the <%=146%>
meta-tag is directly in between other HTML tags, I can override this variable with a custom script that will perform the customizations to the sign in page. This allows me to easily (ab)use property #146 as a built-in hook that will allow for a tailored sign in page that is customization-free.
Managing custom property #146 via the text.properties file is undesirable as I want the ability to change the injected script without having to have access to the web server file system. Fortunately, we are able to use the Custom Properties tab on the Web Profile Configuration page in the PIA to override the value for property #146. We do not need to worry about the value defined in the text.properties file as the value specified on the web profile will take precedence. You will simply need to set the Property Name to 146, Validation Type to String and Property Value to the custom script to modify the signin.html page. As you can see from the picture below, you can append the script to the desired footer text so that you do not lose out on the message from getting displayed at the bottom of the sign in page.
After making this change and restarting the web server, you will see that your custom value in property #146 is injected in the footer of the sign in page. Here is some sample JavaScript that can be used to target and modify various elements on the signin.html file (Note: Tested in 8.56.03).
Here is how the sign in page looks from storing the above fragment in the web profile custom property:
The injected script performed various alterations to the sign in page. The script changed field labels, added an additional input field, and set the footer text with a dynamic year. With the ability to inject custom JavaScript into the sign in page, the possible sign in page transformations are practically endless.
Comments
Chris Malek
I freaking love this!
Colton Fischer
Right on! This is a nifty trick for sure :)
Muthukumaran
Hi Colton, This is a great article on the practical usage of custom web profile properties. Thank you.
I am just wondering if we can maintain multilingual content using these custom web profile properties. Because there are situations where we display different language verbiages on the signin page. Any thought on it?
Colton Fischer
You should be able to maintain multilingual content on the sign in page by using the JavaScript injection technique that I demonstrated in this post.
You can use JavaScript to target the language selection drop down element (the element’s id is ptlangsel) to determine the user’s selected language, evaluate the selected language code, and set the content (labels, etc.) to the language-specific text accordingly. You would also need to create an event listener in the JavaScript to change the content when the user selects a different language from the drop down.
Sasank Vemana
Colton - This is amazing! Well done. Thank you for uncovering this hidden gem for the community!
Rob G
Hi Colton,
Very informative, great way to do the customization to the login page.
Did this for the current project I am on and we did run into a few things, when we removed the background as they wanted white, the text and the borders on the text boxes were all wrong, created a little JS function to alter the CSS on the fly (10 different CSS styles needed changes) and it worked like a charm.
I also added some additional code to handle the branding of the timeout page as well with the same script.
Thanks again
Colton Fischer
Thank you for the feedback. I am glad this worked out for you.
Leave a comment
Your email address will not be published. Required fields are marked *