Toolbar

The Toolbar visualization extension demonstrates how to programatically call Qlik Sense functions. It also shows that you can create a visualization extension that does not visualize Qlik Sense data but is used for interaction with the app. You do this by leveraging the Mashup API into your extension by loading the qlik JavaScript module, the same module used when building mashups that include Qlik Sense objects and calls.

Below you see three ways of how the Toolbar example can be displayed in Qlik Sense.

Finding the examples

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

Full code example

{
	"name" : "ToolBar",
	"description" : "ToolBar example",
	"type" : "visualization",
	"version": "1.0",
	"author": "QlikTech International"
}

/*global define */

define(["jquery",
//mashup and extension interface
"qlik"], function($, qlik) {
	function createBtn(cmd, text) {
		return '<button class="qui-button" style="font-size:13px;" data-cmd="' + cmd + '">' + text + '</button>';
	}

	return {
		initialProperties : {
			version : 1.0,
			qBookmarkListDef : {
				qType : "bookmark",
				qData : {
					title : "/title",
					description : "/description"
				}
			},
			qFieldListDef : {
			}
		},
		definition : {
			type : "items",
			component : "accordion",
			items : {
				buttons : {
					type : "items",
					label : "App buttons",
					items : {
						clearButton : {
							ref : "buttons.clear",
							label : "ClearAll",
							type : "boolean",
							defaultValue : true
						},
						backButton : {
							ref : "buttons.back",
							label : "Back",
							type : "boolean",
							defaultValue : true
						},
						forwardButton : {
							ref : "buttons.forward",
							label : "Forward",
							type : "boolean",
							defaultValue : true
						},
						lockButton : {
							ref : "buttons.lockall",
							label : "Lock All",
							type : "boolean",
							defaultValue : false
						},
						unlockButton : {
							ref : "buttons.unlockall",
							label : "Unlock All",
							type : "boolean",
							defaultValue : false
						}
					}
				},
				field : {
					type : "items",
					label : "Field and field buttons",
					items : {
						showfield : {
							ref : "field.show",
							type : "boolean",
							label : "Show",
							defaultValue : false
						},
						list : {
							ref : "field.list",
							component : "switch",
							type : "boolean",
							label : "Field",
							defaultValue : true,
							options : [{
								value : true,
								label : "List Fields"
							}, {
								value : false,
								label : "Fixed field"
							}],
							show : function(data) {
								return data.field && data.field.show;
							}
						},
						fixed : {
							ref : "field.fixed",
							label : "Use field",
							type : "string",
							defaultValue : "",
							show : function(data) {
								return data.field && data.field.show && !data.field.list;
							}
						},
						clearButton : {
							ref : "field.clear",
							label : "Clear",
							type : "boolean",
							defaultValue : false,
							show : function(data) {
								return data.field && data.field.show;
							}
						},
						lockButton : {
							ref : "field.lock",
							label : "Lock",
							type : "boolean",
							defaultValue : false,
							show : function(data) {
								return data.field && data.field.show;
							}
						},
						unlockButton : {
							ref : "field.unlock",
							label : "Unlock",
							type : "boolean",
							defaultValue : false,
							show : function(data) {
								return data.field && data.field.show;
							}
						},
						matchButton : {
							ref : "field.selectmatch",
							label : "Select match",
							type : "boolean",
							defaultValue : false,
							show : function(data) {
								return data.field && data.field.show;
							}
						}
					}
				},
				bookmark : {
					type : "items",
					label : "Bookmarks",
					items : {
						applyButton : {
							ref : "bookmark.apply",
							type : "boolean",
							label : "Apply",
							defaultValue : false
						},
						createButton : {
							ref : "bookmark.create",
							label : "Create",
							type : "boolean",
							defaultValue : false
						}
					}
				},
				settings : {
					uses : "settings"
				}
			}
		},
		paint : function($element, layout) {
			$element.css('overflow', 'auto');
			//create the app button group
			var html = '', app = qlik.currApp(this);
			html += '<div class="qui-buttongroup">';
			if(layout.buttons.clear) {
				html += createBtn("clearAll", "Clear All");
			}
			if(layout.buttons.back) {
				html += createBtn("back", "Back");
			}
			if(layout.buttons.forward) {
				html += createBtn("forward", "Forward");
			}
			if(layout.buttons.lockall) {
				html += createBtn("lockAll", "Lock All");
			}
			if(layout.buttons.unlockall) {
				html += createBtn("unlockAll", "Unlock All");
			}
			html += '</div>';
			if(layout.field && layout.field.show) {
				html += '<div class="qui-buttongroup">';
				//create the field btn group
				if(layout.field.list && layout.qFieldList) {
					html += '<select class="qui-select" id="fields">';
					$.each(layout.qFieldList.qItems, function(key, value) {
						html += "<option value='" + value.qName + "'>" + value.qName + "</option>";
					});
					html += '</select>';
				} else {
					//display the fixed field
					html += '<div class="qv-object-title">' + layout.field.fixed + '</div>';
				}
				if(layout.field.clear) {
					html += createBtn("clear", "Clear");
				}
				if(layout.field.lock) {
					html += createBtn("lock", "Lock");
				}
				if(layout.field.unlock) {
					html += createBtn("unlock", "Unlock");
				}
				if(layout.field.selectmatch) {
					html += '<div class="qui-buttongroup">';
					html += createBtn("selectmatch", "Select match");
					html += '<input class="qui-input" type="text" id="match" value="" name"match"/>';
					html += '</div>';
				}
				html += '</div>';
			}
			if(layout.bookmark && layout.bookmark.apply && layout.qBookmarkList) {
				html += '<div class="qui-buttongroup">';
				html += '<select class="qui-select" id="bookmark_list">';
				$.each(layout.qBookmarkList.qItems, function(key, value) {
					if(value.qData.title) {
						html += "<option value='" + value.qInfo.qId + "'>" + value.qData.title + "</option>";
					}
				});
				html += '</select>';
				html += createBtn("bmapply", "Apply");
				html += '</div>';
			}
			if(layout.bookmark && layout.bookmark.create) {
				html += '<div class="qui-buttongroup">';
				html += createBtn("bmcreate", "Create Bookmark");
				html += '<input class="qui-input" type="text" id="bmtitle" value="" name"bmtitle"/>';
				html += '</div>';
			}

			$element.html(html);
			//
			var $fields = $element.find("#fields"), $bookmarks = $element.find("#bookmark_list");

			$element.find('button').on('qv-activate', function() {
				switch($(this).data('cmd')) {
					case 'clearAll':
						app.clearAll();
						break;
					case 'back':
						app.back();
						break;
					case 'forward':
						app.forward();
						break;
					case 'lockAll':
						app.lockAll();
						break;
					case 'unlockAll':
						app.unlockAll();
						break;
					//field actions
					case 'clear':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).clear();
						break;
					case 'lock':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).lock();
						break;
					case 'unlock':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).unlock();
						break;
					case 'selectmatch':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).selectMatch($element.find("#match").val(), true);
						break;
					//bookmark actions
					case 'bmapply':
						app.bookmark.apply($bookmarks.val());
						break;
					case 'bmcreate':
						app.bookmark.create($element.find("#bmtitle").val(), null);
						break;
				}
			});

		}
	};
});

Example breakdown

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

Define properties.

To be able to interact with the app we use a qlik JavaScript module, the same module used when building websites that includes Qlik Sense objects and calls:

define(["jquery",
//mashup and extension interface
"qlik"], function($, qlik) {
	function createBtn(cmd, text) {
		return '<button class="qui-button" style="font-size:13px;" data-cmd="' + cmd + '">' + text + '</button>';
	}

Implement paint method.

In the paint method we create the HTML for our extension based on data in the data parameter.

Then we set the content of the $element parameter to display the extension content.

		paint : function($element, layout) {
			$element.css('overflow', 'auto');
			//create the app button group
			var html = '', app = qlik.currApp(this);
			html += '<div class="qui-buttongroup">';
			if(layout.buttons.clear) {
				html += createBtn("clearAll", "Clear All");
			}
			if(layout.buttons.back) {
				html += createBtn("back", "Back");
			}
			if(layout.buttons.forward) {
				html += createBtn("forward", "Forward");
			}
			if(layout.buttons.lockall) {
				html += createBtn("lockAll", "Lock All");
			}
			if(layout.buttons.unlockall) {
				html += createBtn("unlockAll", "Unlock All");
			}

For full implementation on the paint method, see the full code example.

App level commands.

The extension connects app level commands to a row of buttons:

			$element.find('button').on('qv-activate', function() {
				switch($(this).data('cmd')) {
					case 'clearAll':
						app.clearAll();
						break;
					case 'back':
						app.back();
						break;
					case 'forward':
						app.forward();
						break;
					case 'lockAll':
						app.lockAll();
						break;
					case 'unlockAll':
						app.unlockAll();
						break;

Field level commands.

The Toolbar extension connects some field level commands to another row of buttons using the value selected in the drop-down list as the field name parameter:

					//field actions
					case 'clear':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).clear();
						break;
					case 'lock':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).lock();
						break;
					case 'unlock':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).unlock();
						break;
					case 'selectmatch':
						app.field(layout.field.list ? $fields.val() : layout.field.fixed).selectMatch($element.find("#match").val(), true);
						break;

Bookmark commands.

Bookmark actions are connected to another row of buttons:

					//bookmark actions
					case 'bmapply':
						app.bookmark.apply($bookmarks.val());
						break;
					case 'bmcreate':
						app.bookmark.create($element.find("#bmtitle").val(), null);
						break;

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