Doc Extension - iTabrow

Alexander_Thor — Mon, 26 Jan 2026 16:26:21 GMT

Christmas season is the time to be jolly but also the time to hide from your mother-in-law and write code.

With QV11 we got the possibility to embed code at the document level. Here is a simple example that turns our tabrow into a clone of the OSx Dock.

Install the qar-file
Run the sample qvw - Should work straight away but you would need QV11 and a semi modern browser installed with css3 support.

Doc Extension - iTabrow

Brian_Munz — Tue, 03 Jan 2012 20:56:18 GMT

Love it! Great work.

Re: Doc Extension - iTabrow

Michael_Reese — Fri, 22 Jun 2012 23:51:55 GMT

Hey Alexander, I was hoping you could help me understand a couple of things.

In basic terms, how does this script know to bind to the QlikView tabs in the AJAX client? My JavaScript isn't great so I'm not totally clear on what's actually happening in the script.
Would you mind explaining what element, ui, li, xmltabs actually represent?
What is the appendchild doing?
What is this.Layout.value?
What is the difference between tabNodes and xmlTags?
How does the action

I can assume the obvious that the for loop is building the docking station and populating the buttons.

It looks like the element is the docking station, ul is the qv document and li is the number of tabs in the app. Would this always be case for ul and li?

Is there anything that documents what elements relate to what QV objects?

Thanks in advance!

Qva.LoadCSS("/QvAjaxZfc/QvsViewClient.aspx?public=only&type=document&name=Extensions/iTabrow/menu.css");

Qva.AddDocumentExtension('iTabrow', function(){
          this.Document.SetTabrowPaint(VoodooMagic);
});
function VoodooMagic()
          { 
                    var element = this.Element;
                    element.className = "dock";
                    element.style.position = "absolute";
                              var tabrowElem = element.getElementsByTagName("ul")[0];
                              if (!tabrowElem) {
                                        tabrowElem = document.createElement("ul");
                                        element.appendChild(tabrowElem);
                              }
  
                              var xmlTabs = this.Layout.value;
                              var tabNodes = tabrowElem.getElementsByTagName("li");
  
                              for (var itab = 0; itab < Math.max(xmlTabs.length, tabNodes.length); itab++) {
                                        var xmlTabNode = xmlTabs[itab];
                                        var tabelem = tabNodes[itab];
                                        if (!xmlTabNode && !tabelem) 
                                                  continue;
                                        var aelem, spanelem;
                                        if (!tabelem) {
                                                  tabelem = document.createElement("li");
                                                  tabrowElem.appendChild(tabelem);
                                        }
                                        tabelem.innerHTML = ""; 
                                        if (!xmlTabNode || !xmlTabNode.visible) {
                                                  tabelem.style.display = "none";
                                                  continue;
                                        }
  
                                        aelem = document.createElement("a");
                                        aelem.href = "#";
                                        aelem.innerHTML = "<em><span>" + xmlTabNode.text + "</span></em>";
                                        aelem.innerHTML += "<img src='/QvAjaxZfc/QvsViewClient.aspx?public=only&type=document&name=Extensions/iTabrow/" + itab + ".png' alt=" + xmlTabNode.text + " />";
                                        tabelem.appendChild(aelem);
  
                                        var id = xmlTabNode.name;
                                        tabelem.id = id;
  
                                        if (xmlTabNode.action) {
                                                  tabelem.onclick = onclick_action;
                                                  tabelem.Action = this.Name + "." + id;
                                        }
                              }
};

Re: Doc Extension - iTabrow

qlikhalmar — Tue, 19 Mar 2013 14:05:33 GMT

Hi Alexander,

I like your extension eather, but can you explain how we can implement it in our own application?

Tnx,

Halmar Heijnen

Re: Doc Extension - iTabrow

picqv — Thu, 11 Apr 2013 15:30:34 GMT

Hello excellent job, but I can not understand how to add an extension "Doc" a qvw file. If you can help me do me a pleasure. Thanks

Re: Doc Extension - iTabrow

Anonymous — Fri, 31 May 2013 07:22:06 GMT

Wow Great.

Alex, can you help me in finding right extension that is used in TV finder for Geo spatial implementation of Find me Option.

topic Re: Doc Extension - iTabrow in QlikView

Doc Extension - iTabrow

Doc Extension - iTabrow

Re: Doc Extension - iTabrow

Re: Doc Extension - iTabrow

Re: Doc Extension - iTabrow

Re: Doc Extension - iTabrow