Skip to main content Skip to complementary content

Using leonardo-ui in Qlik Sense

Warning noteThis feature is delivered as EXPERIMENTAL in this release.

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.

Using leonardo-ui in visualization extensions

Tip noteThe easiest way to get started building your visualization extension is to use Qlik Sense Desktop. This section assumes that Qlik Sense Desktop is being used.

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:

{
	"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:

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.

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>

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.

dialog-template.ng.html; lui-example.js; lui-example.qext; template.ng.html

Testing the leonardo-ui example

Now is a good time to test your visualization extension.

  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.

    An example interface containing a sidebar with a puzzle piece, a link icon, and a three-layered column that looks like it would represent a harddrive or a database. The puzzle piece is selected and its interface is titled "Custom objects". Inside the "Custom objects" section there is a search bar and a subsection called "Extensions". Under "Extensions", there are five items: "Hello Data", "lui-example", "MyNewChartExt", "MyVisExt", and "Sheet Navigation & actio...". The "lui-example" is selected, which caused a pop-up message on the right to appear. The pop-up messge contains a large puzzle piece icon, with bolded text reading "lui-example". There is sample text udner the bolded text that reads "Sample to show how Leonardo UI components can be used."

  5. Drag and drop the visualization extension onto the sheet and exit Edit mode.
  6. Enter your name in the input field.

    An interface that reads "This extension showcases how to use a Leonardo UI dialog.". Below that text is more text reading "Enter your name:". Below "Enter your name:", there is an input box with "David" inside of it, and a button labelled "Open dialog" below the text box.

  7. Click Open dialog.

    A dialog box with the title "My dialog". Below, there is text saying "Hello, David!". Below "Hello, David!", there is a tip with the text "Use the dialog to display important messages or use it for action requiring a lot of space, like entering information into a form.". Below, there is a "Close" button.