tumblr counter
2011
07.29

This post follows on from the Dynamic Banner post.

In this example we’re going to float an image on the top left, absolute position of 1, 1.

Adding the floating image to the banner

<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(24, 24, 24); 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:20px; 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');">Main Menu</font>
</div>

<div id="my_logo" style="top:1px; left:1px; position: absolute; z-index=14; visibility=show;">
<img src="http://www.wilson-is.com/blog/wp-content/uploads/2011/07/logo.png" height=68 border=0></div>

Considerations
1. the Image needs to be sitting on a production-ised web server. The logo will be retrieved on page load so if you have 50 concurrent users the webserver hosting the image needs to be up and running, no down time. (I would recommend packaging the image into a WAR file and including it on your OBIEE production web server);
2. Make the image as compact/compressed as possible for performance reasons;

I’ll look at adding a floating toolbar to this dynamic banner in my next post.

2011
07.29

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.

2011
05.17

Introduction

Mobile computing is gaining ground rapidly in the Business Intelligence community. As a BI tool mobile devices like the Apple iPad are very appealing to the user community for demonstrating their reports/presentations on the go. The iPad & iPad2 have some hardware and software specifications that can make Oracle Business Intelligence development difficult. Issues like usability, overall look and feel, scrolling, browser rendering and even issues displaying graphs due to no Flash. This post will explain the major pitfalls and how to work around them to deliver the best OBIEE Dashboards possible.

 

This document will include iPad and iPad2 compliancy for OBIEE 10g.

 

The Apple iPad & iPad2 – Know Your Device

For the purposes of this document the specifications will be written for the iPad2 and where a difference is between the iPad and iPad2 it will be explained and resolved.


 

 

iPad/iPad2 Hardware specifications relevant to OBIEE Reporting

  • Wi-Fi (802.11a/b/g/n) and optional 3G module. It’s assumed that the Ipad/Ipad2 being used for demonstration has a basic network latency of at least 50Kbit/sec.
  • Display resolution of 1024×768. (In portrait it’s 768×1024, landscape it’s 1024×768).
  • Processor:
  • IPad1 contains the A4 1Ghz single core processor; 256MB PoP (Package on Package) memory, Graphics Processing Unit built into the chip;
  • IPad2 contains the A5 1Ghz dual core processor; 512MB PoP Memory, GPU built in;

Both are adequate for report rendering.

  • Location Services:
    • The Wi-Fi only model uses an approximation approach to returning the latitude/longitude of the device in use;
    • The Wi-Fi & 3G models use Assisted GPS and 3G for more accurate latitude/longitude results.

This could be useful for gathering stats on user location when running reports but outside the scope of this post.

 

Software Specifications

  • Accessibility Support
    • Support for playback of closed-captioned content;
    • VoiceOver screen reader;
    • Full-screen magnification; and
    • White on Black display
  • Built in support for document types:
    • .jpeg, .tiff, .gif (image types);
    • .doc and .docx (word files);
    • .ppt & .pptx (powerpoint);
    • .htm/html;
    • .key (keynote), .numbers (numbers), .pages (pages), .pdf (Preview and Adobe Acrobat)
    • .txt (text); .rtf (rich text);
    • .vcf (contact card);
    • .xls and .xlsx (excel);
    • Does not support Adobe Flash files/plugin

 

 

 

Safari Browser & why we don’t need a custom application from the App Store

The Apple iPhone/iPad community is used to downloading an application for most things. If someone needs a free game for entertainment they can search for and download a wide variety of choices. These applications are developed “natively” for the iPhone/iPad using Apple’s proprietary programming frameworks and languages (Objective-C for example).

 

It’s a common misconception that we need to download a special Oracle application to show OBIEE dashboards on an iPad. We simply need a web browser and a network connection so the iPad can browse the OBIEE server and open the dashboards much like a normal user does.

 

The iPad/iPad2 has the Safari browser pre-installed as part of the iOS package.

 

For the purposes of this post the iPad OS version we’re using is iOS 4.3.

 

OBIEE demo environment

Windows 7 Professional Virtual Machine, OBIEE 10.1.3.4.1, Sample Sales XML/RPD installed.

Desktop Machine Screenshot


 

iPad Screenshot


 

Aas you can see, the iPad/iPhone devices don’t support Adobe Flash so the default chart rendering option isn’t working.

Chart Solutions

The OBIEE 10g platform provides a java charting tool which renders the charts in Flash (default), SVG, PNG and JPEG formats. The Flash rendering provides for interactivity like drilling down, zooming etc.

 

Apple doesn’t support Adobe Flash on it’s mobile devices – flash will not work. SVG also didn’t appear to be supported by Safari.

 

To work around this you will need to adjust your instanceconfig.xml file to render the charts in an alternative format lke PNG or JPEG.

 

(It should be noted that the Flash chart can handle larger dataset compared to the other formats. OBIEE reports should be written to return the most compact result set possible for quicker client performance).
See inserted XML towards the bottom of the instanceconfig.xml screenshot


After Adjusting Charts to render in PNG format – iPad

Success!!

I will add some more posts on dashboard formatting for “best fit” and other helpful tips for iPad and iPhone.

2011
05.17

Welcome

Hi there – I’m an Australian software developer based in London and have over 5 years experience working on the Siebel Analytics/Oracle Business Intelligence Enterprise Edition platform. As most developers will testify, OBIEE can be a black box sometimes requiring us to pull things out of our hats. We all have tips/tricks that we encounter along the way and quite often forget where we saw them when we really need them.

This blog is a collection of my personal tips/tricks (so i don’t forget them…and also to share with other developers).

Please feel free to contact me directly or make a comment to a posting. If you feel that you have something to add to a particular posting please email me and I will add your tips/tricks to it :-).

I hope you enjoy,

Leigh.
www.wilson-is.com