Since the Salutation Applet is High Interactivity based, Open UI framework doesn’t recognize it (you can’t configure PM and PR), instead of Welcome message, you see an error message somewhat like below.
As you know Open UI doesn’t support any of the SI (Standard Interactivity) based applets. I looked around for solutions and found this blog on Oracle community here. The solution provided on the community was srf and js based, which I didn’t like. I found a pure client side JS based solution which will replace this ugly error with a nice welcome message somewhat like below,(Note: in place of present date, I am displaying Last Login Date Time)
Since there is no control on SI based applet in Open UI framework, you will have to go one level above – yes at View PR to find the placeholder for current Salutation applet and replace it with your message. Note that if you have any personalization rules – you need to consider them as well here in your own code.
So, let’s look at the high level steps:
- Create a new custom View PR – call it - HomePageSalutationPR.js. You can use my template available here: Template-ViewPR.js. Just save it and replace MyJs with HomePageSalutationPR.js
- You need to add your logic under HomePageSalutationPR.prototype.SetRenderer() function in your ViewPR
- Here, you need to get the ref to the current Salutation Applet container and replace it with your message.
Let’s look at the SetRenderer function from ViewPR in detail.
HomePageSalutationPR.prototype.SetRenderer = function () { SiebelJS.Log("Custom PR " + PRName + ": SetRenderer method reached."); var oAppletMap = PM.GetAppletMap(); //get applet map object //some variables we need later var oApplet, sAppletName, oAppletPM; var sAppletId; for (var applet in oAppletMap) { //loop through applet map oApplet = oAppletMap[applet]; //get current applet object sAppletName = oApplet.GetName(); //get applet name if (sAppletName == "Salutation Applet (SSE)") { // if it is salutation applet oAppletPM = oApplet.GetPModel(); //get Applet PM sAppletId = oApplet.GetFullId(); //get AppletFullId. You need this for accessing existing placeholder var placeHolder = oAppletPM.Get( "GetPlaceholder" );
//Replace HTML for existing placeholder with your own!
$("#s_" + sAppletId + "_div").html( '<div class="salutation-pr-applet" id="' + placeHolder + '"></div>' );
//Now add a span with your own salution message $("#" + placeHolder).append('<span class="salutation-pr-title"> Welcome ' + SiebelApp.S_App.GetProfileAttr("Full Name") + '!. Your last logon was on '+ new Date(SiebelApp.S_App.GetProfileAttr("Last Logged In")).format("dddd, mmmm dS, yyyy, h:MM:ss TT")+'.</span>'); } }}; |
You can beautify above using your custom .css file. Create a new HomeSalutation.css file under \PUBLIC\enu\FILES\custom\ and add below code
.salutation-pr-applet { min-height: 30px; margin-top: 15px; margin-left: 20px;} .salutation-pr-title { float: left; font-size: 1.3em; margin-right: 40px; font-weight: bold; color: #777;} |
Follow the usual steps to register your View PR to your Home Pageand add .css to your /custom/theme.js.Clear cache and test!
Here are the files you are looking for!
HomeSalutation.css
HomePageSalutationPR.js
Newcomers,
Steps to register you View PR to your home page
Step 1: Register your /custom/HomePageSalutationPR.js in Manifest Files Admin (if not already done):
Go to Administration - Application > Manifest Files and add a new entry with the following value:
Name: siebel/custom/HomePageSalutationPR.js
Step 2: Register your new ViewPR in Manifest Admin. Go to Administration Application > Manifest Administration and add the following :
In UI Objects:
Type: View
Usage Type: Physical Renderer
Name: Sales Home Page View
In Object Expression:
Expression: Desktop
Level : 1
In Files:
Name: siebel/custom/HomePageSalutationPR.js
Step 1: create a new custom HomeSalutation.css file and store under \PUBLIC\enu\FILES\custom\ on your web server.
Step 2: Register you .css in theme.js: Add an entry in “theme.js” file in \public\enu\<Siebel_Build>\scripts\siebel\custom
NOTE: you are not copying \siebel\theme.js into \siebel\custom\ in this case. It’s already there provided by Oracle. If not, then create a new theme.js file and paste below code.
SiebelApp.ThemeManager.addResource( "GRAY_TAB", { css : { // Location of CSS file which needs to be added as part of existing theme
sal_theme : "files/custom/HomeSalutation.css" } } ); SiebelApp.ThemeManager.addResource( "TANGERINE_TAB", { css : { sal_theme : "files/custom/HomeSalutation.css" } } ); SiebelApp.ThemeManager.addResource( "GRAY_ACCORDION", { css : { sal_theme : "files/custom/HomeSalutation.css" } } ); SiebelApp.ThemeManager.addResource( "TANGERINE_ACCORDION", { css : { sal_theme : "files/custom/HomeSalutation.css" } } ); |
Step 3: Register your /custom/theme.js in Manifest Files Admin (if not already done): Go to Administration - Application > Manifest Files and add a new entry with the following value:
Name: siebel/custom/theme.js
Step 4: Register your new theme at the application level in Manifest Admin (if not already done) Go to Administration - Application > Manifest Administration and add the following :
In UI Objects:
Type: Application
Usage Type: Common
Name: PLATFORM DEPENDENT
In Object Expression:
Expression: Desktop
Level : 1
In Files:
Name: siebel/custom/theme.js
I hope you are enjoying my blogs. Let me know if you have any questions.
Shiv
No comments:
Post a Comment