OBIEE 11g : Using IFrame with OBIEE 11g

Using IFrame with OBIEE 11g

OBIEE 11g Object/Webpage embeding in dashboard

We can make use of HTML and Javascript very effectively when it comes to the UI customizations of OBIEE.

In this post I will explain about how we can use HTML <iframe> tag with OBIEE 11g for UI customizations.

An iframe is used to display a web page within a web page.

Syntax for iframe is,

                     <iframe src="URL" width="200" height="200"></iframe>

In OBIEE 11g we can use IFrame tag to in HTML code to display an object from within OBIEE such as analysis created, reports etc. or we can embed any webpage within dash board.

I have created a table which I need to display on my dashboard page using iframe.

To fetch the URL of this particular analysis I need to go to catlog and open this analysis.

On opening this analysis we get URL in browser address bar.

 We need to add this URL in iframe tag as follows,

Add text object in ‘IFrame Demo’ tab of Test dashboard. Add following script to dashboard and select ‘contains HTML markup’.

<iframe frameborder="0" MARGINWIDTH="0"  MARGINHEIGHT="0" scrolling="no" width="100%" height="1200"   src="http://slc02oky.oracle.com:7780/analytics/saw.dll?PortalGo&Action=prompt&path=%2Fshared%2FPrashant%2FIFrame_Demo_table"></iframe>

In src property we need to add URL of this particular analysis.

Now execute the dashboard.

On executing the dashboard, you will be able to see Child dashboard being merged into parent dashboard. But we do not wish to see the OBIEE header getting displayed with analysis.

To remove these links from embedded analysis add narrative view in analysis edit section and select ‘contains HTML markup’. Then add following script,

<script type="text/javascript">

var tds = document.getElementsByTagName('table');

for (var td = 0; td < tds.length; td++) {

if (tds[td].className != 'HeaderTopBar' && tds[td].className != 'HeaderSecondBar' ) {

continue;

}

if (tds[td].className == 'HeaderTopBar') {

var x = tds[td].parentNode;

x.removeChild(tds[td]);}

if (tds[td].className == 'HeaderSecondBar HeaderSecondBarPadding' || tds[td].className == 'HeaderSecondBar HeaderSecondBarMargin') {

var x = tds[td].parentNode;

x.removeChild(tds[td]);}

}

</script>

This script disables the header objects of child dashboard.

getElementsByTagName() method accesses all elements with the specified tagname.

'HeaderTopBar' and HeaderSecondBar' are the class names of header bars.

So using this javascript code we are disabling the header bars.

Run the dashboard and you will be able to see the analysis embedded within dashboard page.

Same way  we can embed a web page or web page object on dashboard.

In following example I am embedding http://www.bseindia.com/  on dashboard page.

<iframe frameborder="0" MARGINWIDTH="0"  MARGINHEIGHT="0" scrolling="no" width="100%" height="1200"   src="http://www.bseindia.com/"></iframe>

In this example we don’t need to add javascript to disable header.

Set width and height as per requirement.