Using leonardo-ui in Qlik Sense

Overview

leonardo-ui is an Open Source library which is used within Qlik Sense, providing a variety of graphical UI components. The markup of these components can be used in extensions, and mashups. The library is maintained and supported by Qlik. leonardo-ui can be used with both Qlik Sense and Qlik Sense Desktop. leonardo-ui is available to visualization extension developers out of the box, no installation is required.

The complete documentation for this library can be found on GitHub.

leonardo-ui documentation

leonardo-ui GitHub repository

Using leonardo-ui in visualization extensions

This example describes how to create a simple leonardo-ui dialog that opens when you click a button.

Creating the container

Create a folder that will contain your assets. The folder should be created in the following location: C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\.

Example:  

C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\lui-example

Creating the QEXT file

Create a QEXT file in the folder we just created and name it lui-example.qext.

It should contain the following information:

lui-example.qext

{
	"name" : "lui-example",
	"description" : "Sample to show how Leonardo UI components can be used.",
	"icon" : "extension",
	"type" : "visualization",
	"version" : "0.1.0",
	"author" : "Qlik",
	"keywords" : "qlik-sense, visualization-extension, extension, visualization",
	"license" : "mit",
	"dependencies" : { "qlik-sense" : ">=3.2.0" }
}

Creating the main script file

Create the main script file and place it in the same folder as the QEXT file. Name it lui-example.js and paste the following code into the script file and then save it:

lui-example.js

define( [
	'text!./template.ng.html',
	'text!./dialog-template.ng.html'
],
function ( template, dialogTemplate ) {
	'use strict';

	return {
		support: {
			export: false,
			exportData: false,
			snapshot: false
		},
		template: template,
		controller: ['$scope', 'luiDialog', function ( $scope, luiDialog ) {
			$scope.openDialog = function() {
				luiDialog.show({
					template: dialogTemplate,
					input: {
						name: $scope.name
					},
					controller: ['$scope', function( $scope ) {
						$scope.text = 'Use the dialog to display important messages or use it for actions requiring a lot of space, ' +
							'like entering information into a form.'
					}]
				});
			};
		}]
	};
} );

Creating the template files

This example uses two template files, one for an extension and one for a dialog.

template.ng.html

Create the template file for the extension. It includes an input field and a button.

<div qv-extension>
  <div style="margin-bottom: 5px;">This extension showcases how to use a Leonardo UI dialog. Enter your name:</div>
  <input class="lui-input" ng-model="name" style="margin-bottom: 5px;"/>
  <button class="lui-button" ng-click="openDialog()">Open dialog</button>
</div>

dialog-template.ng.html

Create the template file for the dialog that is opened when clicking the button.

<lui-dialog style="max-width: 450px;">
  <lui-dialog-header>
    <lui-dialog-title>My dialog</lui-dialog-title>
  </lui-dialog-header>
  <lui-dialog-body>
    Hello, <i>{{input.name || "Missing name"}}</i>!

    <div style="margin-top: 10px">
      <b>Tip</b>
    </div>
    <div style="margin-top: 5px">
      {{text}}
    </div>
  </lui-dialog-body>
  <lui-dialog-footer>
    <button class="lui-button  lui-dialog__footer-button" ng-click="close();">Close</button>
  </lui-dialog-footer>
</lui-dialog>

Additional (optional) files

The wbfolder.wbl is only used for opening the files in the Extension editor that comes with Dev Hub.

wbfolder.wbl

Testing the leonardo-ui example

Now is a good time to test your visualization extension.

Do the following:

1. Open Qlik Sense Desktop.
2. Open an existing app or create a new one.
3. Open an existing sheet or create a new one.

4. Go to Edit mode. The visualization extension should be visible in the library.

   

5. Drag and drop the visualization extension onto the sheet and exit Edit mode.

6. Enter your name in the input field.

   

7. Click Open dialog.