Customize The Alta Look & Feel Of Oracle EnterpriseOne Tools Release 9.1.5
Read Time:3 Min, 17 Sec
At the company I work for, we like to customize some basic things on the user interface of Oracle EnterpriseOne. The most important part of this modification is to better indicate that the user is signed into a non-production environment by changing the header color. With Oracle’s release of Tools Release 9.1.5, EnterpriseOne is now using the Alta UI framework. This brings E1 more inline with Oracle’s other software offerings. This change has caused us to redo our UI customizations and also look at how we are doing them.
Below we are going to look at how to Customize EnterpriseOne Tools Release 9.1.5 Look & Feel Using Javascript & CSS.
Since we have 7 separate installations for 7 different companies/industries, we also like to modify the logo in the upper left corner to display our companies’ names. In the past, I would have created at least 3 sets of modified files (1 for each environment). That’s 21+ sets of files because some of the companies have more than the standard 3 environments. You’ll notice from the image above that I changed the header color to purple and the corner image to some text.
Since I work in IT and can’t stand repetitive tasks, I don’t like having different files for different companies. Also, it would be much easier to maintain and easier to remember to make the modification when upgrading, if the companies could all just use the same files. So, to make that happen, I modified the e1.js file. This file is located in a directory on your JAS Server similar to the following:
C:\jde_home\SCFHA\targets\pd83\owl_deployment\webclient.ear\app\webclient.war\share\js
I tried to use some comments within the Javascript, but if you need some help, either let me know or contact your friendly neighborhood web developer and they should be able to walk you through it and make any changes that you would like.
/*** The code below goes at the bottom of the e1.js file ***/
/*** WC Changes - Stewart Schatz ***/
var intervalID;
var wcText;
var wcColor;
function wcTestIt() {
//Used to test if the user is on the login page or inside of E1
if (typeof jdeLegalInfo === 'undefined') {
setHeader();
wcRunIt();
window.clearInterval(intervalID);
} else {
if (typeof BREADCRUMBS === 'undefined') {
setHeader();
wcRunIt();
window.clearInterval(intervalID);
}
}
}
function wcRunIt() {
//Used to make our changes
if (document.getElementById('appName')) {
//Used for the login page modifications
document.getElementById('appName').innerHTML=wcText;
document.getElementById('appName').style.fontWeight='700';
document.getElementById('appName').style.paddingTop='10px';
document.getElementById('appName').style.paddingLeft='10px';
document.getElementById('loginTopRow').style.backgroundColor=wcColor;
document.getElementById('loginBrandingLogo').style.display='none';
} else {
//Used for the modifications inside of E1
document.getElementById('Sot13').innerHTML=wcText;
document.getElementById('brandingArea').style.backgroundColor=wcColor;
document.getElementById('menuAndFastPathContainer').style.backgroundColor='transparent';
document.getElementById('topnavOracleBranding').style.fontWeight='700';
document.getElementById('topnavOracleBranding').style.paddingTop='10px';
document.getElementById('topnavOracleBranding').style.paddingLeft='10px';
document.getElementById('oracleImage').style.display='none';
}
}
function setHeader() {
//Used to set the header text & color if not in Production
var wcUrl = window.location.href;
//Determine what company this is by looking at the URL example: e1-comp1-jas1.corporate.com
if (wcUrl.indexOf("-comp1-")>0) {wcText='Company 1 - ';}
if (wcUrl.indexOf("-comp2-")>0) {wcText='Company 2 - ';}
if (wcUrl.indexOf("-comp3-")>0) {wcText='Company 3 - ';}
if (wcUrl.indexOf("-comp4-")>0) {wcText='Company 4 - ';}
if (wcUrl.indexOf("-comp5-")>0) {wcText='Company 5 - ';}
if (wcUrl.indexOf("-comp6-")>0) {wcText='Company 6 - ';}
if (wcUrl.indexOf("-comp7-")>0) {wcText='Company 7 - ';}
var wcEnv = document.getElementById('envDiv').innerHTML;
//Determine what environment we are in by looking at the indication in the upper right under the user name
if (wcEnv.indexOf("DV")>0) {wcText+='DEV';wcColor='#35a82b';}
if (wcEnv.indexOf("PY")>0) {wcText+='PROTOTYPE';wcColor='#ffa908';}
if (wcEnv.indexOf("PD")>0) {wcText+='PRODUCTION';}
}
intervalID=window.setInterval(wcTestIt,500);
Thanks for the illustration – my first glimpse of Alta UI
Thank you for your post!
I have tried to do this without success:
-Do I need to restart the web instances affected for this to take effect? Or maybe WLS cache?
-Also, I’m interested only in changing colors for diferentiating enviroment. Can I use only the section for detecting the enviroment and changing it?
Thank you!
Hey, Andrew. Thanks for giving a try.
You will need to restart the web instance.
You can definitely use just the color changing portion by commenting out the parts you don’t want.
hi Andrew,
your post is very helpful to change the color of the environment.
i have used above code and i could see color change after login to environment, however i am not able to see color change on login screen. please advise
Hello,
If you need to change just the colour of the website – this is the one you need to modify – in server manager:
/u01/jde_home_1/SCFHA/targets/HTML_DM920_BMS_CNC_AIS01_1096/owl_deployment/webclient.ear/app/webclient.war/share/css/webclient.css
change the oracle default – #1e4a6d with the one that you want – example RED – #ff0000 – then start/restart the weblogic and hit on your browser CTRL-F5 to get rid of the cache and load the clean new colour.
If you just want to test without having that after the restart you can modify the wls file while wls is running –
/u01/Oracle/Middleware/Oracle_Home/user_projects/domains/E1_Apps/servers/JASWLSDM/stage/HTML_DM920_BMS_CNC_AIS01_1096/app/webclient.war/share/css/webclient.css
This will change ALL the colours of that precise instance… including first page and subsequent E1Menu.maf pages…
Cheers,
Andrei
Thanks for the comment, Andrei!
Hi, after logging into JDE (after the login page). I want to change the words that say “JD Edwards” to say “JDE QA” at the top left near the logo. What element/where can I change that?
Would that be the “topnavOracleBranding”?
Thanks in advance for your help and post. I have been able to modify what I needed from this post and Shannon’s post.
It was actually Sot13 in the file – D:\Oracle\Middleware\user_projects\domains\E1_Apps\servers\JWB01P_PDCMSAU_94\stage\JWB01P_PDCMSAU_94\app\webclient.war\WEB-INF\jsp\maflet\DropdownHttpMafletWrapperHeader
Hi Stewart, the code works great. one question though, I cannot get the color to stick when opening up a “openAppInNewWindow” situation. Any thoughts?
Hi Stewart, the code above works fine in 9.1 (TR 9.1.5) but in 9.2 (TR 9.2.2) wont work, i can see the color change but the menu’s the drop downs won’t work. i tried different browser and not working. Do you know if this code works with 9.2 TR 9.2.2?
I see you don’t monetize your website, don’t waste your traffic, you can earn extra bucks every month because you’ve got high quality content.
If you want to know how to make extra money, search
for: Ercannou’s essential tools best adsense alternative
Hi,
I want to display alert window after login page. I pasted following code in e1.js.
CODE:
var intervalID;
function wcTestIt() {
//Used to test if the user is on the login page or inside of E1
if (typeof jdeLegalInfo === ‘undefined’) {
alert(‘test1’)
window.clearInterval(intervalID);
} else {
if (typeof BREADCRUMBS === ‘undefined’) {
alert(‘test2’)
window.clearInterval(intervalID);
}
}
}
intervalID=window.setInterval(wcTestIt,500);
OUTPUT:
alert(‘test1’) in login and post login screen.
alert(‘test2’) after clicking on signout
Please help!!
I have noticed you don’t monetize your page, don’t waste your traffic,
you can earn additional cash every month. You can use the
best adsense alternative for any type of website (they approve all websites), for more info simply search in gooogle:
boorfe’s tips monetize your website
Hi,
I would like to modify text “JD Edwards” on upper left corner on JDE login page (where we put ID and Password). Which file should I modify.
Thanks in advance !!
hello! this is a excellent website and i usually take pleasure in the info posted here. Bookmarked and shared. Thanks yet again!