Showing posts with label JAVASCRIPT. Show all posts
Showing posts with label JAVASCRIPT. Show all posts

Friday, December 16, 2011

OBIEE10g Auto Suggest Prompt

A client asked me if I could create an auto suggest prompt for him. (ie: Google Style Prompt). Basically he wanted an edit box prompt which would fill an suggestion box which he could tab trough to make the right selection.

Since this isn’t a standard 10g functionality I wrote some JavaScript to make it happen. But I didn’t reinvent the wheel Knipogende emoticon ! The people at jQuery already did the bases, I simple adapted it for usage in OBIEE 10g.

1. Download the jQuery UI package here. Install it in your b_mozilla directory’s (or other webserver dirs you use).

2. Download the jQuerySetup from here.

3. Add the setup script to a textbox on your dashboard page:

image

Alter files locations if needed, don’t forget the Contains HTML Markup checkbox.

4. Add a dropdown prompt to your dashboard page.

image

5. Create a javascript file in your b_mozilla directory’s called: autocomplete.js

function SetAutoComplete(PromptColumn){
    var domNode = document;
    var tagName = '*';
    var tags = domNode.getElementsByTagName(tagName);
    var y ="";           
    for(i=0; i<tags.length; i++){
   
    if (tags[i].className  == 'GFPFilter') {
        if (tags[i].getAttribute('gfpbuilder').indexOf(PromptColumn) != -1)
        {   
            y = tags[i].getAttribute('sid')           
        };

        $(
        function()
        {
                $( "#"+y ).combobox();           
        });
        };   
    };
};

6. After the dropdown prompt add a textbox with:

<script src="res/b_mozilla/autocomplete.js" language="javascript"> </script>
<script language="javascript"> 
    SetAutoComplete('C1  Cust Name');
</script>

7. Add your report and run the dashboard:

image

Till Next Time

Tuesday, December 13, 2011

OBIEE10g AutoRunPrompt

A client asked me if I could create an auto run prompt for him. Basically he wanted an edit box prompt which would updated his report after each character has been typed. Since this isn’t a standard 10g functionality I wrote some JavaScript to make it happen. It uses the onkeyup event to fire the GFPDoFilters filter event.

The script can be downloaded here: download COBIEEJS.

Copy the file to your b_mozilla directory’s (or other webserver dirs you use)

How to use it?

1. Add an edit box style prompt to your dashboard:

image

2. Add a textbox with:

<script src="res/b_mozilla/cobieejs.js" language="javascript"> </script>
<script language="javascript"> 
  AutoRunPrompt('C1  Cust Name');
</script>

image

don’t forget the Contains HTML Markup checkbox

3. Add your prompted report:

image

Run the dashboard:

image

Till Next Time

Friday, September 30, 2011

OBIEE11g Blocking a formula

In http://obiee101.blogspot.com/2011/09/obiee11g-blocking-analyses-based-on.html I showed you the possibilities to block an analyses based on criteria system wide. In this article I want show how to block an analyses based on the editing of a formula.

A large part of the criteria editor is controlled by the criteriatemplate.xml

image 

the kuiColumnFormulaEditorHead generates a web message reference to kuiFormulaBlockingScript image

In order to use this reference you will have to create a new web message in on of your custom xml files:

image

<WebMessage name="kuiFormulaBlockingScript" translate="no">
    <HTML>
        <script type="text/javascript" src="fmap:myformulablocking.js" />
    </HTML>
</WebMessage>

This effectively creates a “fork out” to a javascript (.JS) file. You can place this java script file in the ORACLE_INSTANCE\bifoundation\OracleBIPresentationServicesComponent\coreapplication_obipsn\analyticsRes directory.

Let’s start with a simple example:

// http://obiee101.blogspot.com
// This is a formula blocking function.
// It makes sure the user does not enter an unacceptable formula.
function validateAnalysisFormula(sFormula, sAggRule)
{
alert(sFormula);
alert(sAggRule);
    return true;
}
//

It basically returns the formula you enter:imageimage

and the Aggregation rule you selected.

imageimage

Based on this info you can block for instance the usage from EVALUATE functions: (based on example for 10g found here:http://prolynxuk.com/blog/?p=413) (note: EVALUATE can be a security risk if the connection pool user have certain database roles…..)

// http://obiee101.blogspot.com
// This is a formula blocking function.
// It makes sure the user does not enter an unacceptable formula.
function validateAnalysisFormula(sFormula, sAggRule)
{
// alert(sFormula);
// alert(sAggRule);
// Donot allow EVALUATE function
var evaluateRe = "EVALUATE";
var nEvaluate = sFormula.search(evaluateRe);
if (nEvaluate >= 0)
        {
        alert("You used Evaluate function and is not allowed.");
        return false;
        }
    return true;
}

image

image gives:

image

Till Next Time

Thursday, May 26, 2011

OBIEE Catch the {mobile} browser

More people use mobile the device to connect to OBIEE. Since they don’t all have the same capabilities, you might want to catch the browser or device making the request. To get the info add this to a dashboard page:

<div id="example"></div>

<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>screen.width: " + screen.width + "</p>";
txt+= "<p>screen.height: " + screen.height + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

Based one or more criteria you can do a redirect to a more “suitable” dashboard page.

Till Next Time

Tuesday, August 3, 2010

OBIEE Injecting javascript at GO button

Just a piece of script to inject your own javascript at the go button. You can use it fi to check if the user made a “valid” selection.

[code]

<script type="text/javascript">
function getElementsByClass( searchClass, domNode, tagName)
{
    if (domNode == null) {
    domNode = document;
    }
    if (tagName == null) {
    tagName = '*';
    }
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) {
        var test = " " + tags[i].className + " ";
        if (test.indexOf(tcl) != -1)
        {
            el[j++] = tags[i];
            if (tags[i].innerHTML.indexOf('DoFilters') > 0 )
            {
            tags[i].innerHTML = tags[i].innerHTML.substring(0, tags[i].innerHTML.length - 7 )
                             + " onfocus=javascript:alert('Put your javascript here'); >Go</a>"
            alert (tags[i].innerHTML);
            }
        }
    }
    return el;
}

</script>

<script type="text/javascript">

    var tabs = getElementsByClass('minibuttonOn');
</script>

[/code]

Add the code in a textbox after the prompts, don’t forget the contains HTML checkbox.

Till Next Time

Friday, July 16, 2010

OBIEE remove the whole portalbanner

Or how how to remove this in one go:
image
Add a textbox to your dashboard:
image
Add the following code:
[code]
<script type="text/javascript">
    var tds = document.getElementsByTagName('table');
    for (var td = 0; td < tds.length; td++) {
        if (tds[td].className != 'PortalBanner' && tds[td].className != 'PortalBottomTable' ) {
            continue;
        }
        if (tds[td].className == 'PortalBanner') {
        //alert (tds[td].className);
        var x = tds[td].parentNode;
        //alert (x.className);
        x.removeChild(tds[td]);}
        if (tds[td].className == 'PortalBottomTable') {
        //alert (tds[td].className);
        var x = tds[td].parentNode;
        //alert (x.className);
        x.removeChild(tds[td]);}
        }
</script>
[/code]
image
Till Next Time

Update:
Stijn showed an much simpler trick by using the GO URL: http://oraclebizint.wordpress.com/2007/11/01/oracle-bi-ee-101332-hiding-banner-in-dashboards-using-go-url/

Update2:
for OBIEE11Gr5 :

The formatting was screwed up replace 'PortalBanner' ==> 'HeaderTopBar'
'PortalBottomTable' ==> 'HeaderSecondBar ' (Including the space)

Wednesday, June 23, 2010

OBIEE Multie line tabs part 2

 

Remember this one:

http://obiee101.blogspot.com/2010/05/obiee-multi-line-tabs.html

Or how to change this:

image

into :

image

but how about this:

image

First follow the steps from the first article. Next change the code to:

[code]

<script type="text/javascript">
var allHTMLTags = new Array();
onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);

        }

        return results;
    }
}
}
function insertAfter( referenceNode, newNode )
{ referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function addNewLI( obj )
{
    x = document.getElementsByClassName('TabTable')[0];
    var newTable = document.createElement('table');
    var newLI = document.createElement('tbody');
    newLI.id='TabsTableRow2'; 
    var td1 = document.createElement("td");
    var row = document.createElement("tr");
    td1.className = 'TabSep';
    td1.innerHTML ='&nbsp;';
    td1.id='tr2';
    td1.style.width ='40px';
    row.appendChild(td1);   
    newLI.className = 'TabTable';
    newLI.appendChild(row);   
    newTable.cellSpacing = '0px';
    newTable.cellPadding = '0px';
    newTable.appendChild(newLI);
    insertAfter( x, newTable );
}

  function addSep(id){

    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    addNewLI( tbody );
  }

function insCell(str,orgclassName,TabCount)
  {
    var oTable = document.getElementById('TabsTableRow2');
    var lastRow = oTable.rows.length;
    lastRow = lastRow -1
    var mytable=document.getElementById('TabsTableRow2')
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.innerHTML=str;
    if (orgclassName == 'TabDimCell') {
    newcell.className = 'TabDimCell2';
    }
    if (orgclassName == 'TabHiCell') {
    newcell.className = 'TabHiCell2';
    }
    newcell.style.width = '100px';
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.className = 'TabSep TabDimSep';
    newcell.innerHTML ='&nbsp;';

  }

  function insLastCell(str,orgclassName,TabCount)
  {
    var oTable = document.getElementById('TabsTableRow2');
    var lastRow = oTable.rows.length;
    lastRow = lastRow -1
    var mytable=document.getElementById('TabsTableRow2')
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row   
    newcell.innerHTML ='&nbsp;';
    var mytable2=document.getElementById('TabsTableRow2')
    newcell.style.textAlign = 'right';    
    var x = screen.width ;
    x = x - (((TabCount - 4) * 100)+ 130);
    x = x+'px';
    newcell.style.width = x;

  }
    var tds = document.getElementsByTagName('td');
    var TabCount = 0;
    var lTAB = new Array();
    for (var td = 0; td < tds.length; td++) {
        if (tds[td].className != 'TabDimCell' && tds[td].className != 'TabHiCell' ) {
            continue;
        }
        if (TabCount == 4) {   
        addSep('TabsTable');
        }
        tds[td].style.width = '100px'       
        if (TabCount >= 4) {   
        var str = tds[td].innerHTML;
        var orgclassName = tds[td].className;
        insCell(str,orgclassName, TabCount);
        tds[td].style.display = "NONE";
        tds[td+1].style.display = "NONE";
        }

        TabCount = TabCount + 1;
    }
     insLastCell(str,orgclassName,TabCount);

</script>

[/code]

Till Next Time\

Monday, May 17, 2010

OBIEE Events Calendar

 image
First of all Kudos to Hitesh for laying the ground work: http://hiteshbiblog.blogspot.com/2010/04/obiee-showing-data-on-calendar.html
First you have to go to the MooTools site and download the basics:
The mootools core: http://mootools.net/download => choose the uncompressed version, it makes debugging easier.
Next get the More building blocks Date, Scroller, Tips: http://mootools.net/more
Finally get the calendar control: http://dansnetwork.com/mootools/events-calendar/download/
Put everything in a subfolder of the Res folder (if you are using OC4J as webserver, you have to sync both RES folders):
image
Let’s get some base data to work with: Startdate, Enddate, dayofweek, brand, revenue:
image
Now we add a narrative view:
image
In the prefix part we first select the size of the calendar control:
<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalLarge.css">
or
<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECal.css">
or
<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalSmall.css">
Next we add the references to the javscript:
<script language="javascript" src="./res/mooTools/mootools-1.2.4-core-nc.js"></script>
<script language="javascript" src="./res/mooTools/mootools-1.2.4.4-more.js"></script>
<script language="javascript" src="./res/mooTools/mooECal.js"></script>
as div tag to hold the body:
<div id="calBody"></div>
and a function to set the background and font color:
<script language="javascript">
function getDiv(holFlag)
{
if(holFlag=='1' || holFlag=='7')
{
return '<div style="background-color:#990000;color:#ffffff;">';
}
else
{
return '<div style="background-color:#999900;color:#ffffff;">';
}
}
finally the header of the control:
new Calendar({calContainer:'calBody', newDate:'1/3/2007',
cEvents:new Array(
The date is the date on which the control wil be opened.
The total prefix should look like this:
<link rel="stylesheet" type"text/css" href="./res/mooTools/mooECalLarge.css">
<script language="javascript" src="./res/mooTools/mootools-1.2.4-core-nc.js"></script>
<script language="javascript" src="./res/mooTools/mootools-1.2.4.4-more.js"></script>
<script language="javascript" src="./res/mooTools/mooECal.js"></script>
<div id="calBody"></div>
<script language="javascript">
function getDiv(holFlag)
{
if(holFlag=='1' || holFlag=='7')
{
return '<div style="background-color:#990000;color:#ffffff;">';
}
else
{
return '<div style="background-color:#999900;color:#ffffff;">';
}
}
new Calendar({calContainer:'calBody', newDate:'1/3/2007',
cEvents:new Array(
In the narrative part we fill the array:
{
title: getDiv('@3') +'@4: '+ '@5 </div>',
start: '@1',
end: '@2',
location: ''
}
In the postfix we close the array:
)
}); </script>
Set the separator to “,”
Warning if you try to save this from the narrative view you will get the ‘opaque’ save screen….
image
switch to the criteria view first and then save!
Add the narrative to your compound lay-out:
image
Till Next Time

Saturday, May 15, 2010

OBIEE Remove line below guided navigation link

If you want to get rid of the small black line below the guided navigation link:
image
Found these solutions here:
http://forums.oracle.com/forums/thread.jspa?threadID=1001694&tstart=0

For all dashboards:

Edit the portalcontent.css change:
image
to
image
[code]
HR {
visibility:hidden;
}
[/code]

For one dashboard only:

add a text box to the dashboard page:
image
Add the following code (thanks Joe!)
[code]
<script type="text/javascript">
var aElm=document.getElementsByTagName('hr');
for (var i =0; i <aElm.length;i++)
    {
        aElm[i].parentNode.removeChild(aElm[i]);
    }
</script>
[/code]
And the black line is gone:
image
Till Next Time

Tuesday, May 11, 2010

OBIEE Remove PDF print option for one dashboard only

Or how to get from:

image

to

image 

add this to a textbox on the dashboard:

[code]

<script type="text/javascript">
    function RemovePDFOption() {

        var tds = document.getElementsByTagName('span');
        for (var td = 0; td < tds.length; td++) {

            if (tds[td].className != 'DashboardFormatLinks') {
                continue;
            }

            //alert(tds[td].innerHTML);
            var tHTML = tds[td].innerHTML;
            tHTML = tHTML.replace("PDF</a>","</a>");
            //alert(tHTML);
            tds[td].innerHTML = tHTML;

        }
    }
    window.onload = RemovePDFOption;
</script>

[/code]

Yeah i know this is very crude (the link is still somewhat hidden there), but if you play around with javascript .replace and indexof you can clean it up even more.

Till Next Time

Thursday, May 6, 2010

OBIEE multi-line tabs

Or how to change this:

image

into :

image

First add an extra .TabDimCell to your portalcontent.css and call it .TabDimCell2:

image

Do the same for TabHiCell:

image

 

On each dashboard page add an extra text element and check the contains HTML box:

image

Add the following code to the text box

[code]

<script type="text/javascript">
  function addSep(id){
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var td1 = document.createElement("td");
    var row = document.createElement("tr");
    td1.className = 'TabSep';
    td1.innerHTML ='&nbsp;';
    td1.id='tr2';
    row.appendChild(td1);   
    tbody.appendChild(row);   
  }

function insCell(str,orgclassName)
  {
    var oTable = document.getElementById('TabsTable');
    var lastRow = oTable.rows.length;
    lastRow = lastRow -1
    var mytable=document.getElementById('TabsTable')
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.innerHTML=str;
    if (orgclassName == 'TabDimCell') {
    newcell.className = 'TabDimCell2';
    }
    if (orgclassName == 'TabHiCell') {
    newcell.className = 'TabHiCell2';
    }
    var newcell=mytable.rows[lastRow].insertCell(-1) //insert new cell to end of 2nd row
    newcell.className = 'TabSep TabDimSep';
    newcell.innerHTML ='&nbsp;';

  }

    var tds = document.getElementsByTagName('td');
    var TabCount = 0;
    var lTAB = new Array();
    for (var td = 0; td < tds.length; td++) {
        if (tds[td].className != 'TabDimCell' && tds[td].className != 'TabHiCell' ) {
            continue;
        }
        if (TabCount == 4) {   
        addSep('TabsTable');
        }
        if (TabCount >= 4) {   
        var str = tds[td].innerHTML;
        var orgclassName = tds[td].className;
        insCell(str,orgclassName);
        tds[td].style.display = "NONE";
        tds[td+1].style.display = "NONE";
        }

        TabCount = TabCount + 1;
    }

</script>

[/code]

Ok i’m not a full time javascript programmer so if you have a better solution please let me know.

Till Next Time

Wednesday, February 24, 2010

OBIEE Popup box

Customer wanted to see some extra info in a popup box:

image

This can be done simple from a narrative view:

First start with a basic report:

image

goto the narrative view:

image

Switch on the HTML

in the prefix put:

<tr><th>[b]Customer[/b]</th><th>[b]Revenue[/b]</th></tr>

In the narrative put:

<tr>
<td>@1</td>
<td> <input type="text" onclick="alert('Sum for All Customers: @3!')" value="@2" />
</td>
</tr>

Put it all together on the compound view:

image

Till Next Time

Thursday, February 18, 2010

OBIEE JavaScript and comments

When you write large pieces of custom javascript on a report you might run into the strange problem that it works during development, you can save it without a problem, but when you reopen it in another session it doesn’t work anymore.

Most of the time this is caused by the rendering process of the report XML by the presentation server.

When obiee loads a report for the first time during a session it performs a SET XML. (like pushing the SET XML button in the advanced TAB => image

This causes your nicely formatted script which looked like this:

image

to look like this:

image

Basically it has become one long string. You might run into trouble because of comment lines starting with // in your code. This turns the rest of the string into a comment. Always encapsulate your comments as /*..comment..*/ .

An other problem might be missing semi-colon “; “. Always close your process steps with one.

Till Next Time

Tuesday, February 9, 2010

OBIEE Grabbing the logical SQL

Sometimes you want to “grab” the logical from a dashboard or report without showing it to the user or having to switch on logging.

Step 1: Create you report with an sql view:

image

image

Add a static text box:

image

Add this code from javascript master Joe Betram:

<script type="text/javascript">

// Original code from Joe Betram

// See :http://forums.oracle.com/forums/thread.jspa?messageID=4026864&#4026864
var tds = document.getElementsByTagName('td');
var lSQL = new Array();
for(var td=0;td<tds.length;td++){
if( tds[td].className != 'SqlViewCell' ){
continue;
}
tds[td].style.display = "NONE";
lSQL.push(tds[td].innerHTML);
}
for(var len =0; len < lSQL.length; len++){
document.write("Stored logical SQL in slot " + len + " is: " + lSQL[len] + "<BR>");
}
</script>

Don’t forget to check the contains HTML Markup box:

image

Check the results:
image

With a little bit of tweaking you can use this script to for instance to call a web service or channel the SQL to another logging program.

Till Next Time