Horizontal list

The Horizontal list example demonstrates a horizontal listbox. It demonstrates how to build a visualization extension based on a list object definition and it also demonstrates some different options in implementing selection support.

Finding the examples

Qlik Sense Desktop: ...\Users\<UserName>\Documents\Qlik\Examples\Extensions.
Qlik Sense: ...\ProgramData\Qlik\Examples\Extensions.

Full code example

{
	"name" : "Horizontal Listbox",
	"description" : "Horizontal Listbox Extension Example",
	"icon" : "list",
	"type" : "visualization",
	"version": "1.0",
	"preview" : "listbox",
	"author": "QlikTech International AB"
}

define(["jquery", "text!./horizlist.css"], function($, cssContent) {'use strict';
	$("<style>").html(cssContent).appendTo("head");
	return {
		initialProperties : {
			version : 1.0,
			qListObjectDef : {
				qShowAlternatives : true,
				qFrequencyMode : "V",
				qSortCriterias : {
					qSortByState : 1
				},
				qInitialDataFetch : [{
					qWidth : 2,
					qHeight : 50
				}]
			},
			fixed : true,
			width : 25,
			percent : true,
			selectionMode : "CONFIRM"
		},
		definition : {
			type : "items",
			component : "accordion",
			items : {
				width : {
					type : "items",
					label : "Width and Selections",
					items : {
						fixed : {
							ref : "fixed",
							label : "Fixed width",
							type : "boolean",
							defaultValue : true
						},
						width : {
							ref : "width",
							label : "Width",
							type : "number",
							defaultValue : 25,
							show : function(data) {
								return data.fixed;
							}
						},
						percent : {
							ref : "percent",
							type : "boolean",
							label : "Unit",
							component : "switch",
							defaultValue : true,
							options : [{
								value : true,
								label : "Percent"
							}, {
								value : false,
								label : "Pixels"
							}],
							show : function(data) {
								return data.fixed;
							}
						},
						selection : {
							type : "string",
							component : "dropdown",
							label : "Selection mode",
							ref : "selectionMode",
							options : [{
								value : "NO",
								label : "No selections"
							}, {
								value : "CONFIRM",
								label : "Confirm selections"
							}, {
								value : "QUICK",
								label : "Quick selection"
							}, {
								value : "REPLACE",
								label : "Replace selection"
							}]
						}
					}
				},
				dimension : {
					type : "items",
					label : "Dimensions",
					ref : "qListObjectDef",
					min : 1,
					max : 1,
					items : {
						label : {
							type : "string",
							ref : "qListObjectDef.qDef.qFieldLabels.0",
							label : "Label",
							show : true
						},
						libraryId : {
							type : "string",
							component : "library-item",
							libraryItemType : "dimension",
							ref : "qListObjectDef.qLibraryId",
							label : "Dimension",
							show : function(data) {
								return data.qListObjectDef && data.qListObjectDef.qLibraryId;
							}
						},
						field : {
							type : "string",
							expression : "always",
							expressionType : "dimension",
							ref : "qListObjectDef.qDef.qFieldDefs.0",
							label : "Field",
							show : function(data) {
								return data.qListObjectDef && !data.qListObjectDef.qLibraryId;
							}
						},
						frequency : {
							type : "string",
							component : "dropdown",
							label : "Frequency mode",
							ref : "qListObjectDef.qFrequencyMode",
							options : [{
								value : "N",
								label : "No frequency"
							}, {
								value : "V",
								label : "Absolute value"
							}, {
								value : "P",
								label : "Percent"
							}, {
								value : "R",
								label : "Relative"
							}],
							defaultValue : "V"
						},
						qSortByLoadOrder:{
							type: "numeric",
							component : "dropdown",
							label : "Sort by Load Order",
							ref : "qListObjectDef.qDef.qSortCriterias.0.qSortByLoadOrder",
							options : [{
								value : 1,
								label : "Ascending"
							}, {
								value : 0,
								label : "No"
							}, {
								value : -1,
								label : "Descending"
							}],
							defaultValue : 0,
							
						},
						qSortByState:{
							type: "numeric",
							component : "dropdown",
							label : "Sort by State",
							ref : "qListObjectDef.qDef.qSortCriterias.0.qSortByState",
							options : [{
								value : 1,
								label : "Ascending"
							}, {
								value : 0,
								label : "No"
							}, {
								value : -1,
								label : "Descending"
							}],
							defaultValue : 0,
							
						},
						qSortByFrequency:{
							type: "numeric",
							component : "dropdown",
							label : "Sort by Frequence",
							ref : "qListObjectDef.qDef.qSortCriterias.0.qSortByFrequency",
							options : [{
								value : -1,
								label : "Ascending"
							}, {
								value : 0,
								label : "No"
							}, {
								value : 1,
								label : "Descending"
							}],
							defaultValue : 0,
							
						},
						qSortByNumeric:{
							type: "numeric",
							component : "dropdown",
							label : "Sort by Numeric",
							ref : "qListObjectDef.qDef.qSortCriterias.0.qSortByNumeric",
							options : [{
								value : 1,
								label : "Ascending"
							}, {
								value : 0,
								label : "No"
							}, {
								value : -1,
								label : "Descending"
							}],
							defaultValue : 0,
							
						},
						qSortByAscii:{
							type: "numeric",
							component : "dropdown",
							label : "Sort by Alphabetical",
							ref : "qListObjectDef.qDef.qSortCriterias.0.qSortByAscii",
							options : [{
								value : 1,
								label : "Ascending"
							}, {
								value : 0,
								label : "No"
							}, {
								value : -1,
								label : "Descending"
							}],
							defaultValue : 0,							
						}
					}
				},
				settings : {
					uses : "settings"
				}
			}
		},
		snapshot : {
			canTakeSnapshot : true
		},
		paint : function($element, layout) {
			var self = this, html = "<ul>", style;
			if(layout.fixed) {
				style = 'style="width:' + layout.width + (layout.percent ? '%' : 'px') + ';"';
			} else {
				style = '';
			}
			this.backendApi.eachDataRow(function(rownum, row) {
				html += '<li ' + style + ' class="data state' + row[0].qState + '" data-value="' + row[0].qElemNumber + '">' + row[0].qText;
				if(row[0].qFrequency) {
					html += '<span>' + row[0].qFrequency + '</span>';
				}
				html += '</li>';
			});
			html += "</ul>";
			$element.html(html);
			if(this.selectionsEnabled && layout.selectionMode !== "NO") {
				$element.find('li').on('qv-activate', function() {
					if(this.hasAttribute("data-value")) {
						var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
						if(layout.selectionMode === "CONFIRM") {
							self.selectValues(dim, [value], true);
							$(this).toggleClass("selected");
						} else if(layout.selectionMode === "REPLACE") {
							self.backendApi.selectValues(dim, [value], false);
						} else {
							self.backendApi.selectValues(dim, [value], true);
						}
					}
				});
			}
		}
	};
});

.qv-object-com-qliktech-horizlist .qv-object-content {
	overflow: auto;
}
.qv-object-com-qliktech-horizlist ul {
	list-style: none;
}
.qv-object-com-qliktech-horizlist li.data {
	display: inline-block;
	margin: 3px;
	padding: 4px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #111;
	border-right: 1px solid #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* frequency */
.qv-object-com-qliktech-horizlist li.data span {
	padding-left: 10px;
	font-style: italic;
	float:right;
}
/* colors when NOT in selection mode*/
.qv-object-com-qliktech-horizlist li.stateS, .qv-object-horizlist li.stateL {
	background-image: linear-gradient(top, #52cc52, #4dc04d);
	background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
	color: #fff;
}

.qv-object-com-qliktech-horizlist li.stateX, .qv-object-com-qliktech-horizlist li.stateXL, .qv-object-com-qliktech-horizlist li.stateXS {
	background-color: #A9A9A9;
	color: #fff;
}

/* colors when in selection mode*/
.qv-object-com-qliktech-horizlist li.stateA, .qv-object-com-qliktech-horizlist.qv-selections-active li {
	background-image: none;
	background-color: #ddd;
	color: #000;
}
.qv-object-com-qliktech-horizlist.qv-object-com-qliktech-horizlist li.selected {
	background-image: linear-gradient(top, #52cc52, #4dc04d);
	background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
	background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
	color: #fff;
}

Example breakdown

Edit the applicable fields of the QEXT file to set a default title, description, icon and type.

Use a list object definition. To do this, you set up your initial properties to include a qListObjectDef:

	return {
		initialProperties : {
			version: 1.0,
			qListObjectDef : {
				qShowAlternatives : true,
				qFrequencyMode : "V",
				qInitialDataFetch : [{
					qWidth : 2,
					qHeight : 50
				}]
			},
			fixed : true,
			width : 25,
			percent : true,
			selectionMode : "CONFIRM"
		},

You also need to set up your properties panel to reference the qListObjectDef in definition:

dimension : {
	type : "items",
	translation : "properties.dimension",
	ref : "qListObjectDef",

In your paint method you can use the helper method eachDataRow, which is available in the Backend API, to loop through your data. You can also render frequency if frequency is enabled:

			this.backendApi.eachDataRow(function(rownum, row) {
				html += '<li ' + style + ' class="data state' + row[0].qState + '" data-value="' + row[0].qElemNumber + '">' + row[0].qText;
				if(row[0].qFrequency) {
					html += '<span>' + row[0].qFrequency + '</span>';
				}
				html += '</li>';
			});

Enable selections. In an extension, you can choose between three options for selections.
- No selections
- Standard Qlik Sense selection model with toolbar and wrapper around the object
- Quick selection, where selections are sent straight to the Qlik Sense Engine and immediately are reflected in the object
For standard Qlik Sense selection mode, use the selectValues method available in the extension:
```
	self.selectValues(dim, [value], true);
```
For Quick selection, send selections straight to the Engine using the Backend API:
```
	self.backendApi.selectValues(dim, [value], true);
```
Enable snapshots for use in storytelling:
```
snapshot : {
	canTakeSnapshot : true
},
```
Add styling to separate CSS file.

It is good programming practice to keep your styling in a separate CSS file. Qlik Sense set the CSS class qv-object-[extension name] on your extensions. You should prefix your CSS rules with that. You then load your CSS file with RequireJS and add its content to the HTML page:
```
define(["jquery", "text!./horizlist.css"], function($, cssContent) {'use strict';
	$("<style>").html(cssContent).appendTo("head");
```

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