Using leonardo-ui in Qlik Sense

Warning: This 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, mashups and widgets. 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: The 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.

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.

Using leonardo-ui in widgets

Tip: The easiest way to get started building your widgets is to use Qlik Sense Desktop. This section assumes that Qlik Sense Desktop is being used.

This example describes how to create action buttons in a widget: one so it can be used for navigating between sheets, and one to activate edit.

It assumes that you have opened the Widget editor and have created a new widget.

Creating the button group container

Create a button group container for the buttons

<div class="lui-buttongroup">
</div>

Creating the buttons

Populate the button group with the buttons. In this example we are creating buttons to:

  • Navigate to the next sheet.
  • Navigate to the previous sheet.
  • Activate edit.
<div class="lui-buttongroup">
	<lui-button>Next sheet</lui-button>
	<lui-button>Previous sheet</lui-button>
	<lui-button>Edit mode</lui-button>
</div>

Adding actions using the Navigation API

Add the actions to execute when the buttons are clicked. Use methods from the Navigation API for the actions.

<div class="lui-buttongroup">
	<lui-button ng-click="navigation.nextSheet()">Next sheet</lui-button>
	<lui-button ng-click="navigation.prevSheet()">Previous sheet</lui-button>
	<lui-button ng-click="navigation.setMode('edit')">Edit mode</lui-button>
</div>

Result

This is what the preview looks like when an app has been selected.

 

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?