About: This write-up will focus on the different ways We can exploit the Postload and Preload event of Siebel to do some amazing stuff. As an example, This blog will focus on how to identify the Clients Browsing Platform and load UI contents accordingly.
Many Times We fall into situations where We want to modify our Web contents on the basis of Clients Browsing Platform and We may have a similar requirement for a Siebel Application. And If that's what you are looking for this post is just for you.
There are certain vanilla JavaScript events which are just called before and after a Siebel Page loads. The events are OnPostLoad(refer postload.js) and OnPreLoad(refer preload.js). We can extend these events as per our needs and requirements. For example, We want to identify the Browser and the device being used by the user and if its a Desktop We'll just let them browse the application but if its a mobile device We may want to load the mobile version of Siebel. Here I am working on custom mobile views and HTML is still in development so We will just inform the user that it's under development in an interactive way.
Let's do this in steps :
1. Navigate to Siebel Client Public Folder to the Postload.js File
 |
| Snapshot of Public Folder |
Extra Gyan : 23044 is a release number. This number is used by the Siebel Community to version control JavaScripts for Siebel Product and as We know ENU is the Language Code for Siebel.
2. In the Postload File, We will add the code to Detect Browser and Device Information. There are certain Browser Commands We can use to get device information. Some of the commands We will be using here are navigator.userAgent, navigator.platform, navigator.appVersion, navigator.vendor .To test this We can just type these commands on our browser console and see what values We get. We can just type 'Navigator' and see the details We can get about a device.
3. We will add our logic to handle different scenarios. Refer snippet :
function OnPostload( ){
try{
var deviceInfo = navigator.userAgent;
var mobCheck = theApplication().GetProfileAttr("mobcheck");
if((deviceInfo.includes("Android") || deviceInfo.includes("Ipad") || deviceInfo.includes("Iphone")) && mobCheck != "Y")
{
theApplication().SetProfileAttr("mobCheck","Y");
alert("Mobile Platform Detected /n The mobile version of the Website will load");
//our logic
}
}
catch(error)
{
console.log("Error Occurred while loading Mobile Website");
}
}
}
4. Save The Changes Clear Cache and replace the file on the server or on a local client.
The Below Video gives a glimpse of one of the ways We can use this JS to customize our application.
You can get the code for this in the link below :) .
https://drive.google.com/file/d/16qAGMQ5lu6l_lMavMZEF8yaI-UN0P9a1/view?usp=sharing
The code for HTML game has been taken from SoloLearn.
Thanks for going through the post. Like, Comment and Share if you liked the content. Do let me know the way you will be or have exploited this JS to customize your Siebel App.
