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

15 comments:

Raventh said...

Great bit of code. I have one question though.

When I select a tab on the second row, it does not inherit the TabHiCell formatting. Did you have the same issue?

John Minkjan said...

@Raventh:

Thanks for noticing, I've changed the code, should work now.

regards

John

Raventh said...

Thank you for such a quick reply! It works perfectly now.

Anonymous said...

John, wonderful piece of code. I would like to shift the first line of tabs to the right. Any thoughts.

Anonymous said...

Superb Code ... Helped a lot ..

Parag said...

Hi John .. I need sub pages for my dashboard .. As I have 17 pages in one dashboard and I want to group them . Any suggestion.

Please send me details at paragbhargava29@gmail.com

Thanks in Advance
Parag

Unknown said...

John, have not been able to move the first line of tabs to the right. I need to have the first line of tabs offset by 1/2 a tab to the right. Any insights would be great.

btriplett2002@yahoo.com

John Minkjan said...

@Anonymous/@Bren,

Why don't you add a "dummy" pic or cell add the start of line two? Make it the width of half a tab.

regards

John Minkjan said...

@Parag,

Just navigate to "hidden" dashboards.

regards

Unknown said...

John, so by adding a empty cell to the in front of the second line the first line will move 1/2 tab to the right?

Thanks

Bren

John Minkjan said...

Bren,

Have a look here:
http://obiee101.blogspot.com/2010/06/obiee-multie-line-tabs-part-2.html

regards

Unknown said...

John, your tab number 2 looks very cool. It seems that you really enjoy OBIEE.

Bren

Mohamed AHID said...

Hi John,
Well the solution is working good ,but sometimes and it's true almost the time we have not acces to the server(in order to customize portalcontent.css ) .My question is how can we use this solution in this case?
Thx a lot and nice work
obiee.bi-online.fr

John Minkjan said...

@OBIEE,

You can also add the CSS to a HTML block on your dashboard.

regards

John

Irina said...

Dear John, can you help me please? If I insert the javascript code in the text item - nothing happening. When I use your code from OBIEE multi-line tabs Part 2 - it make all tabs invisible
Best regards
Irina