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\

7 comments:

Alvaro said...

Hello, I can not check the box "contains html markup" is hidden. How I can view it?

Thank you very much and congratulations on the forum.

John Minkjan said...

Which version of OBIEE are you using? Are you an OBIEE administrator?

regards John

Alvaro said...

Thanks for the quick response.

The version is SE1 10.1.3.2.1, but I tried on another machine with the version EE 10.1.3.4.1 and in this version I just realized that if the box that appears.

Thanks anyway. Regards.

Sorry for my English

Unknown said...

John, just as an FYI when I tried your code the onload function happend after the newLi function. I just created a function in place of the onload and it worked perfectly.

Thanks

Bren

VS said...

Hey John
I tried the code and looks like I get 4 tabs on line one and then the line breaks into second and then I get 10 or more if I just keep on adding) tabs in line 2
I can end you a screenshot if you need. Can you pls let me know what am I doing wrong?

Anonymous said...

Is that working for IE ? Which version ? I tested with IE7 and IE8 and it does not work

Anonymous said...

what are the exact steps involved in carrying out multi tabs.? i tried it but does not work.
-KG