QlikView properties pages

As of version 11, QlikView uses partial HTML files, QVPP files, for properties pages. These must be written in XHTML and in such a way that they can be used as inner-HTML of a DIV.

In these pages you can use predefined QlikView JavaScript functions to refer to properties in the QlikView document or to reuse parts of the standard properties pages.

Getting started

To do this you use an avq attribute. The syntax is:

avq="verb:[property[:extra]]"

verb

The JavaScript function name. It is required and the possible value and their meaning are described below.

Some of these verbs can be combined with a icon-attribute to facilitate the use of built-in icons.

property

The property to which the element is bound. It almost always required. Typically the HTML element will be hidden if the property is hidden and disabled if the property is disabled.

extra

Some extra information required by some verbs, see below.

Functions (verbs)

prop_label

Use to flag a label.

Can be combined with the input elements.

Example: Show a label

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Show legend</div>

prop_dynamicDropdown

Use to create a drop-down listbox for Dimensions.

It will be automatically populated and possible to update if the property can be updated.

Example: Drop down Dimension list

<div class='prop-grid_span-7' avq='prop_dynamicDropdown:.Chart.Dimension.0.Field'></div>

prop_editexpression

Use for input for expressions or other properties.

You can then use an expression to set the property, which will be evaluated automatically by QlikView.

Example: Create a text box with the possibility to open the edit expression dialog

<div class='prop-grid_span-7 prop-grid_last' style='width:94%;' avq='prop_editexpression:.Chart.Expression.0.0.Definition'></div>

prop_checkbox

Use to create check-box input for your properties.

Example: Create a check-box for a field value

<div class='prop-grid_clear prop-grid_span-1' avq='prop_checkbox:.Chart.Text.0.Content'></div>

mySelect

Use this if you have a property with a predefined set of values.

Example: Create a HTML select element with predefined values

<select style='width:94%;' avq='mySelect:.Chart.Text.2.Content'>
	<option value='topleft'>Top Left</option>
	<option value='topright'>Top Right</option>
	<option value='bottomleft'>Bottom Left</option>
	<option value='bottomright'>Bottom Right</option>
</select>

prop_dlgbuttonjqui

Used to open a dialog to edit properties. QVPP-file to use should be after the :

All properties referenced in the sub-dialog will be prefixed with the property string from this element.

Use the attribute propicontype to specify icon for the button. Available icons are:

tool
delete-row
add-row
singlecolor
togglefont_bold
togglefont_italic
togglefont_underline
expression-text
expression
image
fontcolor
font

Show button with tool icon to edit Dimension properties

<div class='prop-width-28px' propicontype='tool' avq='prop_dlgbuttonjqui:.Chart.Dimension.0:ExtensionDimDialog.qvpp'></div>

prop_buttonjqui

Used to invoke an operation.

Use the attribute propicontype to specify icon for the button.

prop_dlgbuttonjqui

Example: Delete a Dimension or an Expression

<div class='prop-sortable-width-28px' name='sortable-list-item-close-button' propicontype='delete-row' avq='prop_buttonjqui:.Remove'></div>

list

Used to display a list of properties.

The content of the HTML element will be used as a template.

All property references in the list will be prefixed with the property of the list itself.

Example: A list of dimensions

list is used to define the list. The li element inside the ul element will be used as a template. All avq attributes inside the ul element will be prefixed with the list property plus the dimension number.

<ul avq='list:.Chart.Dimension' class='prop-dyn-sortable' tabindex='-1'>
	<li class='ui-state-default prop-sortable-list-li' name='chart-dimension' >
		<span class='prop-sortable-list-arrow-position' avq='list_movehandle:'></span>
		<div class='prop-sortable-item-narrow' avq='prop_dynamicDropdown:.Field'></div>
		<div class='prop-sortable-right-width-56px'>
			<div class='prop-sortable-width-28px' propicontype='tool' avq='prop_dlgbuttonjqui:.:ExtensionDimDialog.qvpp'></div>
			<div class='prop-sortable-width-28px' name='sortable-list-item-close-button' propicontype='delete-row' avq='prop_buttonjqui:.Remove'></div>
		</div>
	</li>
</ul>

panel

Used to include another QVPP file.

Example: Include panel named Layout

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

Example of a generated properties page (QVPP)

A good way to start is to define your properties with labels and types in the definition.xml file. In many cases this will give you a auto-generated QVPP file. If not, you can use it as a starting point for your own properties.qvpp file. Just make a copy of DynProperties.qvpp example below and modify it to your needs.

This example is taken from the StreamChart extension example.

Definition.xml

The file defines two Dimensions, one Measure and four Text properties (two check-boxes and two select lists). All have Labels to be used in the property page.

<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject Label="Stream Chart" Description="Data in a flow-like diagram" PageHeight="200">
	<Dimension Label="Horizontal" Initial="" TargetName="Horizontal" />
	<Dimension Label="Vertical" Initial="" TargetName="Vertical" />
	<Measurement Label="Measure" Initial="" TargetName="Measure" />
	<Text Label="Show column labels" Type="checkbox" Initial="" />
	<Text Label="Show legend" Type="checkbox" Initial="" />
	<Text Label="Legend position" Initial="" Type="select"
		Select="topleft,topright,bottomleft,bottomright"
		SelectLabel="Top Left,Top Right,Bottom Left,Bottom Right" />
	<Text Label="Show data labels" Type="select"
		Select="never,hover,always"
		SelectLabel="Never,Hover,Always" Initial="" />
	<Initiate Name="Chart.Title" value="Stream Chart" />
	<Initiate Name="Chart.BgColor.ColorHex" value="#FFF" />
</ExtensionObject>

DynProperties.qvpp

The following properties file is generated (WHEN???) based on the above Definition.xml.

Note that the QVPP file has been divided into sections for convenient reference to the Definition.xml.

Header, with the extension label set as the header

<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="#">
			Stream Chart
			</a>
		</h3>
		<div class="prop-grid_container accordion-shadow-enabler" style="overflow:auto;">
		<div class="prop-grid_clear prop-grid_top-vertical-spacer-12px prop-grid_last"></div>

First dimension with label

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Horizontal</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<div class='prop-grid_span-7' avq='prop_dynamicDropdown:.Chart.Dimension.0.Field'></div>
	<div class='prop-width-28px' propicontype='tool' avq='prop_dlgbuttonjqui:.Chart.Dimension.0:ExtensionDimDialog.qvpp'></div>
</div><br />

Second dimension with label

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Vertical</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<div class='prop-grid_span-7' avq='prop_dynamicDropdown:.Chart.Dimension.1.Field'></div>
	<div class='prop-width-28px' propicontype='tool' avq='prop_dlgbuttonjqui:.Chart.Dimension.1:ExtensionDimDialog.qvpp'></div>
</div><br />

Measure with label

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Measure</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<div class='prop-grid_span-7 prop-grid_last' style='width:94%;' avq='prop_editexpression:.Chart.Expression.0.0.Definition'></div>
</div><br />

Check-box property

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Show column labels</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<div class='prop-grid_clear prop-grid_span-1' avq='prop_checkbox:.Chart.Text.0.Content'></div>
</div><br />

Second check-box property

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Show legend</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<div class='prop-grid_clear prop-grid_span-1' avq='prop_checkbox:.Chart.Text.1.Content'></div>
</div><br />

Select list property

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Legend position</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<select style='width:94%;' avq='mySelect:.Chart.Text.2.Content'>
		<option value='topleft'>Top Left</option>
		<option value='topright'>Top Right</option>
		<option value='bottomleft'>Bottom Left</option>
		<option value='bottomright'>Bottom Right</option>
	</select>
</div><br />

Second select list property

<div class='prop-grid_clear prop-grid_prepend-1 prop-grid_span-5' avq='prop_label'>Show data labels</div>
<div class='prop-grid_span-10 prop-grid_last'>
	<select style='width:94%;' avq='mySelect:.Chart.Text.3.Content'>
		<option value='never'>Never</option>
		<option value='hover'>Hover</option>
		<option value='always'>Always</option>
	</select>
</div><br />

Footer, including standard panels (Presentation, Caption and Options) and foldouts

		</div>
		<h3 class="prop-h3 accordion-shadow" avq="activeAccordionHeader:.:GenericPresentationFoldout.qvpp">
			<a href="#">Presentation</a>
		</h3>
		<div class="prop-grid_container accordion-shadow-enabler" avq="panel::Layout.qvpp"></div>
		<h3 class="prop-h3 accordion-shadow" avq="activeAccordionHeader::PropertiesCaptionFoldout.qvpp">
			<a href="#">Caption</a>
		</h3>
		<div class="prop-grid_container accordion-shadow-enabler" avq="panel::Caption.qvpp"></div>
		<h3 class="prop-h3 accordion-shadow" avq="activeAccordionHeader:.:PropertiesOptionsFoldout.qvpp">
			<a href="#">Options</a>
		</h3>
		<div class="prop-grid_container accordion-shadow-enabler" avq="panel::Options.qvpp"></div>
	</div>
	<span class="bottom-gap"></span>
</div>

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here