As an OBIEE developer it can be hard to say “no” to the end-users when they ask for something simple. Sometimes they ask for something obvious like “I want a title at the top of the page” or “I don’t want to see all those links and distractions across the banner”. This blog entry will demonstrate how to “cover up” the banner and how to dynamically add a title, logo or a toolbar. This method is very simple and requires some dynamic html to lay a rectangle over the original dashboard banner and then float a title in the center.

Traditional OBIEE 10g Dashboard page

Same Page – With a Custom Banner

Steps to Creating Your Custom Banner
1. Edit the Dashboard and drag a Text object onto the dashboard page. Anywhere is fine.

2. Set the “Contains HTML Markup” and put some dummy HTML in there to test it. ie. “<b>My piece of html</b>”. Press OK and save the dashboard.

3. In some cases you might have an error while saving the dashboard if your user account doesn’t have “HTML Markup” enabled. (See Settings->Administration->Manage Privileges. See Answers Section and ensure you belong to the groups in the “Save Content with HTML Markup” section). This is only required for dashboard developers who need to “save” html. All users will still be able to see the dashboard without problems.

4. As you can see the HTML message will appear somewhere on the page.

5. We’re now going to overwrite that HTML message with some dynamic html. The HTML below uses absolute positioning so even though the HTML will be loaded in the same place on the page as the Html message in step 4, the positioning of the HTML will be moved onload to the top left of the screen.

<div id="my_banner" style="top:0px; left:0px; position: absolute; z-index=11; visibility=show; right=0px;">
<table cellspacing="0" style="text-align: left; vertical-align: middle; background-color: rgb(23, 102, 172); height: 70px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px'); padding: 0px; white-space: nowrap;" class="SectionTable"><tr><td>&nbsp;</td></tr></table>
</div>

<div id="my_banner_title">
<font color="#FFFFFF"; style="top:5px; position:absolute; font-size:26px; text-align:center; margin-left:auto; margin-right:auto; left:0px; right:0px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px');"><b>www.wilson-is.com</b><br>Main Menu</font>
</div>

Copy the code from this page. Paste it into Notepad (or equivalent text editor first) then copy/paste from there.

6. For cleanliness, rename the text object to something friendly like “CUSTOM BANNER”. Save the dashboard page.

7. The page should render a nice clean banner (in this case a blue rectangle with a title).

8. The page looks quite nice and clean without all the banner links etc.

Why would I want to do this… I can just use a custom skin, right?
Yes. You can use a skin but there are some problems with this approach.
a) you need control of the production box. In some businesses this is under very tight control and could take weeks/months to make a change and in a lot of cases they will just say “no” outright because it’s a production risk;
b) the skin would require some manipulation of “out of the box” javascript and html… not cool;
c) if you use a skin and then the users ask for a small change this requires a prod change and roll out… which could make the option A & B a big problem.
d) using a skin will require migration considerations when migrating to new versions of OBIEE… something to consider;
e) adding a dynamic banner/title is nearly impossible using a skin – “too hard basket”.

If I use this approach I will need to put that Text Object on each Dashboard page… that could take a while, right?
Yes/No. Yes you will need to add the Text Object to each page but you can drag it from a previously saved Dashboard Page and drop it onto the page you’re updating. So no, it’s not a long arduous task at all. In-fact, I recommend dragging/dropping from a previously saved Text Object to ensure you have one version of the banner used across all Dashboard Pages. Don’t do them by hand on each page or you run the risk of version control issues and headaches. Be smart

Cool things you can add to this Custom Banner approach
1. floating toolbar for help icons, emailing, printing etc.
2. custom logo
I will be adding these two additions to the next blog entry… stay tuned.