05.20
This post is a long overdue upgrade from my 10g Dynamic Banner post.
Most of my stakeholders don’t like the visual noise that dominates a typical Oracle BI project.
I usually take control of the look and feel by hiding away the banner and “branding” my Oracle BI projects using a logo.
This post will help you take control of the look & feel. It also forms the basis for other advanced dashboarding posts in my blog. From this foundation we can explore other usability topics and really boost the user acceptance of your projects.
1. Open the dashboard page you wish to add your banner to. Edit the Dashboard.
2. Add a TEXT object to the top of the dashboard.
Then copy/paste the code below into the TEXT object. Save your Page and then Run.
<script type="text/javascript">
/*
____________________________________________________________________
Created By: Leigh Wilson (leigh@wilson-is.com) http://www.wilson-is.com
____________________________________________________________________
*/
function renderBanner(pagetitle) {
//Note: the usual method of inserting an innerHTML with the full div tag defined isn't friendly across browsers.
//The approach below, although cumbersome, is a very clean way to define the div and render it safely on chrome, ie and FF.
//Insert the image on the top left of the screen.
var div = document.createElement("div");
div.id = "wilson_banner_image";
div.style.top = "-1px";
div.style.left = "0px";
div.style.position = "absolute";
div.style.right = "0px";
div.style.zIndex = 10;
div.innerHTML = "<img src=\"http://www.wilson-is.com/blog/wp-content/uploads/2014/05/banner_logo.png\">";
document.body.insertBefore(div, document.body.firstChild);
//Insert the title
div = document.createElement("div");
div.id = "wilson_banner_title";
div.style.top = "-1px";
div.style.left = "0px";
div.style.position = "absolute";
div.style.right = "0px";
div.style.zIndex = 11;
div.style.width = "100%";
div.innerHTML = "<font style=\"top:17px; position:absolute; font-weight:bold; font-family:Calibri, Verdana; font-size:18px; color:rgb(227, 236, 241); text-align:center; margin-left:auto; margin-right:auto; width:100%;\">" + pagetitle + "</font>";
document.body.insertBefore(div, document.body.firstChild);
//Insert the banner background, the blue filled rectangle
div = document.createElement("div");
div.id = "wilson_banner_rectangle";
div.style.top = "-1px";
div.style.left = "0px";
div.style.position = "absolute";
div.style.right = "0px";
div.style.zIndex = 9; //this allows the image div to be layed over the top via the zindex 10, as seen in div "wilson_banner_image".
div.style.width = "100%";
div.innerHTML = '<table style="text-align:left; vertical-align:middle; background-color: rgb(36, 38, 63); height:54px; padding:0px; width:100%; z-index:10;"><tr><td> </td></tr></table>';
document.body.insertBefore(div, document.body.firstChild);
//Insert the top right home icon, should the users want to return to the default home page/catalog
div = document.createElement("div");
div.id = "wilson_banner_home_icon";
div.style.top = "-1px";
div.style.left = "0px";
div.style.position = "absolute";
div.style.right = "0px";
div.style.zIndex = 15; //this allows the image div to be layed over the top via the zindex 10, as seen in div "wilson_banner_image".
div.style.width = "100%";
div.innerHTML = '<table style="text-align:right; vertical-align:middle; height:54px; padding:0px; width:100%; z-index:10;"><tr><td><a href="/analytics/saw.dll?bieehome" alt="Home Area for Reporting"><img src="http://www.wilson-is.com/blog/wp-content/uploads/2014/05/home.png" border=0 alt="Home Area for Reporting"></a></td></tr></table>';
document.body.insertBefore(div, document.body.firstChild);
return false;
} //renderBanner
//render the banner and place the title on the top of the banner
renderBanner('Dynamic Main Menu Title');
</script>
Your new page should look something like this, with a nice banner, title, logo and a small icon on the right hand side. The small icon on the right is designed to navigate the user to the OBIEE Home page (should the user want to escape your page).
This simple example is easy to use and you can copy/paste it to any Dashboard Page. To edit the title you simply edit the last line of code, ie: “renderBanner(‘Dynamic Main Menu Title’);”.
This approach works nicely by forcing the browser to “inject” the code into the top of the document and it then executes nice and safely at the page loads. It’s recommended that you place your TEXT box on the dashboard page at the top, only to speed up the rendering time of the banner.
(A more advanced approach would be to include this piece of javascript code in a .js file and include it on the server side. The browser caching will boost performance by a tiny fraction. I’m not covering the .js approach in this post).
Explore the code, give it a go and don’t be afraid to challenge the browser.
Have a good week,
L, out.
[…] 1. Oracle BI 11g – Adding a dynamic logo and title to your dashboard page […]
[…] 17. Oracle BI 11g – Adding a dynamic logo and title to your dashboard page […]