How to add new tab in qlikview Extension properties

[#1]

Hi Everyone,

I want to add a new tab in qlikview extension properties , like in the below image I have four tab Test, Presentation, Caption  and Options Like that I want to add one more tab after Test.

How to do that ?? Please help me

Regards,

Vivek

[Anonymous]

Hi Vivek,

You may find this link helpful.

QlikView Properties Pages

Thanks,

Alvin

[#3]

Hi Vivek,

To create a new tab you'll first need to be using the properties.qvpp file instead of the dynproperties.qvpp. This means that you'll need to configure every property required. It can be a bit tricky but it's actually really powerful once you get your head around it. The basic html for a new tab is as follows -

<h3 class="prop-h3 accordion-shadow" name="accordion-header">

      <a href="#">New Tab</a>

</h3>

<div class="prop-grid_container accordion-shadow-enabler">

      <!-- Property components go here --!>

</div>

Where the h3 tag is the accordion header and the div is where you'll need to provide your actual properties for the new tab. A good way to discover how to build the properties is to deploy the extension using QV Server and then inspect the properties panel with a browsers developer tools.

You can also use a custom "avq" attribute to include some of QVs pre-built panels for things like Caption and Presentation (see example below).

To help I've provided the basic markup for what you're trying to achieve although like I say you'll need to add the individual properties for your extension and you'll probably want to experiment a bit to get the look and feel right.

<div class="ToolWindow-MainBody" avq="foldOutMenu:." style="overflow: visible !important; float: left;">

  <div class="prop-accordion" avq="accordion:.">  

    <h3 class="prop-h3 accordion-shadow">

      <a href="#">Test</a>

    </h3>

    <div class="prop-grid_container accordion-shadow-enabler" style="overflow:auto;">

        <!-- Property components go here --!>   

    </div>

  <h3 class="prop-h3 accordion-shadow" name="accordion-header">

      <a href="#">Presentation</a>

    </h3>

    <div class="prop-grid_container accordion-shadow-enabler" avq="panel:.:Layout.qvpp"></div>

  <h3 class="prop-h3 accordion-shadow" name="accordion-header">

      <a href="#">Caption</a>

    </h3>

    <div class="prop-grid_container accordion-shadow-enabler" avq="panel:.:Caption.qvpp"></div>

  <h3 class="prop-h3 accordion-shadow" name="accordion-header">

      <a href="#">Options</a>

    </h3>

    <div class="prop-grid_container accordion-shadow-enabler" avq="panel:.:Options.qvpp"></div>

  <h3 class="prop-h3 accordion-shadow" name="accordion-header">

      <a href="#">New Tab</a>

    </h3>

    <div class="prop-grid_container accordion-shadow-enabler">

  <!-- Property components go here --!>

  </div>

  </div>

  <span class="bottom-gap"></span>

</div>

This isn't perfect so you'll need to play around with it but it should help you get started. As a side note you can also add a radio button to toggle the visibility of elements within the property panel, this is awesome if you want to provide a simple or advanced set of properties to users.

With all that said, depending on what you're looking for you may decide that using the dynamic properties file is a simpler option.

It's also worth noting that you need to remove the extension from the layout and re-add it to see changes made in the qvpp.

I hope that helps.

Nick