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
