Collapsible Listbox

[#1]

I am new to QlikView and have a few questions on the list box specifically the one used in this QlikView Website under the Customer Tab. I would think that the Customer Listbox here used the QlikView Technology. If not, pls disregard the below questions :-

1. How did they do the collapsible Listbox wherein you can click the up/down arrow to collapse the listbox ? Is it based off an image that included an action ? I tried this but never got it to work.

2. The question mark (tooltip) and Clear All Selection icons function the same way as the normal Help and Clear Control+D function only with different icons and some twist. The tooltip here added a background image and the clear all icon has a different tooltip. How do we do that ?

3. The selected value from the listbox had an underline and an 'x' icon beside it. How do we do that ?

Thanks for the help.

[Anonymous]

Hi Anthony,

Regarding Q1, I'm not quite sure what document you're referring to but I posted a simple example of a tree-view listbox where you can expand and collapse values.

Located here: http://community.qlik.com/media/p/83652.aspx

[#3]

Hi Johannes, Thank you for your response. Unfortunately, this is not what I need.

I was referring to this website's customer link. If you go to www.qlik.com, there are subtabs like Product, Customer, Partners, Events, Services and Company under the main QlikView tab. Click on Customers, you will notice a collapsible listbox on the lefthand side of the page. I think that listbox was done using QlikView due to how the lists renders, functionality is comparable to the QlikView listbox. That is what I was trying to accomplish.

[johnw]

That's just a web page. It isn't a QlikView front end. Here's a section of the source dealing with the Resources list box, for instance:

<!--BEGIN LISTBOX LBresources-->
<tr>
<td class="style1">


<div id="QvListBox8Container" class="QvListBoxContainer" style="width:180px;">
<div class="QvListBoxTitle" style="width:100%;background: transparent url(/images/customerTab/bg_top_menu_nosub.jpg) repeat left top;">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td><img alt="" src="/images/customerTab/collapse.gif" style="cursor:pointer" title="" onclick='expandcollapse(this);'/></td>
<td style="width:100%" avq="text:.LBresources@label" class="QvListBoxTitle" style="cursor:pointer" onclick='expandcollapse2(this);'></td><td>

<a onmouseover="javascript:toggleBox('Info_Resource',1)" onmouseout="javascript:toggleBox('Info_Resource',0)" style="cursor:pointer;"><img src="/images/customerTab/helpText.gif" style="cursor:pointer" border="0" align="left" /></a>
<span avq="text:.Info_Resource" class="helpDiv" id="Info_Resource"></span>
</td><td>
<img avq="action:.LBresources.CA" alt="Clear All Selections" src="/images/customerTab/clear.gif" style="cursor:pointer" title="Clear All Selections" align="left" /></td></tr></table>
</div>
<div class="QvListBoxContentDiv">
<table style="width: 100%;" avq="table" AvqAsync="20:.LBresources" class="QvListBoxTable">
<tr>
<td avqcol="edit:.LBresources.C0">
</td>
<td avqcol="edit:.LBresources.C1">
</td>
</tr>
</table>

[#5]

John Witherspoon wrote:
That's just a web page. It isn't a QlikView front end. Here's a section of the source dealing with the Resources list box, for instance:

Actually the customer page is QlikView powered, it's built using the QlikView Workbench product which allows further customisation and embedding of the ajax client.

[johnw]

Chris Furlong wrote:Actually the customer page is QlikView powered, it's built using the QlikView Workbench product which allows further customisation and embedding of the ajax client.

Ohhhhhhhhhh.

Yeah, shortly after I posted that, I started thinking, "Wait, I wonder if all of those classes like QvListBoxTable are actually part of QlikView somehow. Maybe I'm wrong about it just being a web page."

Looks like I should have gone with that second thought instead of the first. Ah, well.

[#7]

Very Interesting. I'll check out the Workbench product and see what I can find. Thanks for the information.