Customize The Alta Look & Feel Of Oracle EnterpriseOne Tools Release 9.1.5

Customize EnterpriseOne Tools Release 9.1.5
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);

15 thoughts on “Customize The Alta Look & Feel Of Oracle EnterpriseOne Tools Release 9.1.5

  1. 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!

    1. 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.

      1. 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

  2. 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

  3. 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.

    1. 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

  4. Hi Stewart, the code works great. one question though, I cannot get the color to stick when opening up a “openAppInNewWindow” situation. Any thoughts?

  5. 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?

  6. 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

  7. 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!!

  8. 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

  9. 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 !!

Leave a Reply to Stewart Schatz Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Previous post Latest Nucleus Research ERP Value Matrix Finds Oracle JDEdwards Maintain Leadership
Next post Finding The Row Count For All Files In An iSeries Library And All Tables In An SQL Server Database