Vizlib KPI Designer
Vizlib KPI Designer is a new approach to a pixel-perfect design of your dashboards for Qlik Sense. Introducing a new layering concept, you have the power to combine charts, metrics, icons into your very own KPI object. With full control over x/y positioning with the possibility to overlap layers, you can practically achieve any desired layout.
















Actions add tremendous power to the Vizlib KPI Designer by permitting you to enrich the user experience with dynamic interactions. On clicking the KPI, any individual layer, your user can make selections, clear selections, and navigate to pre-defined sheets which can become an incredible value-add to your Qlik Sense dashboards. Actions can be added on an individual layer level or as a global setting applied to the whole KPI object. Layer visibility:

Visibility Condition on individual layer level can becomes useful if you only want to display certain parts of the KPI depending on calculation conditions or variables. A typical use case would be the showing of a warning icon when a certain KPI threshold is exceeded. Pre-sets:

Too lazy to create your own KPI from scratch? Use one of our eight available pre-sets which quickly sets up your standardized KPI layers for you to implement, adjust or modify. In the future, you will be able to generate your own custom pre-sets for your Vizlib Library.
Download Vizlib KPI Designer
Readme
- Installation
1.1 Qlik Sense Server
1.2 Qlik Sense Desktop - Features
- Extension Settings
3.1 Presets
3.2 Layers
3.2.1 Text Layer
3.2.2 Icon Layer
3.2.3 Image Layer
3.2.4 Line Layer
3.2.5 Barchart Layer
3.2.6 Linechart Layer
3.3 Add-ons
3.4 Appearance
3.5 Global Actions
3.6 Interactivity - What's new?
- Known Limitations
- Feedback & Bug Reporting
- Terms & Conditions
1. Installation
1.1 Qlik Sense Server
- Download the .zip file from the link provided your eMail.
- Visit the QMC on of your Qlik Sense Server.
- Import the .zip file in your extension tab.
- Open Qlik Sense and add the 'Vizlib KPI Designer' extension to a sheet.
1.2 Qlik Sense Desktop
- Download the .zip file from the link provided your eMail.
- Extract the .zip file to your default extension folder (documents/qlik/sense/extensions) in Qlik Sense.
- Open Qlik Sense and add the 'Vizlib KPI Designer' extension to a sheet.
2. Features:
- Choose from seven custom layers to create your very own Vizlib KPI Object
- Rich customization and formatting options for each layer including styling and layout options
- Support for (multiple) Actions to improve the user experience and user interactivity, either on layer level (different actions on different layers) or as a global settings
- Choose from a list of pre-defined pre-set to speed up your Vizlib KPI Object Design process
- Pixel-perfect Positioning of layers, inclusive responsive design. Overlaying of layer allows for 100% design accuracy.
- Dynamic visibility conditions to show or hide layers based on Qlik expressions or variables.
- Up to 5 users for free.
3. Extension Settings:
3.1 Presets
Use one of our eight available pre-sets which quickly sets up your standardized KPI layers for you to implement, adjust or modify. In the future, you will be able to generate your own custom pre-sets for your Vizlib Library.
Simply select one of the available pre-set and the Vizlib KPI Designer will pre-populate all layers together with their properties, formatting settings and layout position. Be careful when applying new presets as existing layers get replaced
3.2 Layers
The Vizlib KPI Designer supports an unlimited number of layers which can be added to the canvas.

3.2.1 Text Layer
Key Layer for any KPI Object as you can add any metric (or supporting metric) of your choice using dynamic Qlik expressions or variables. You can also use the text layer for titles or descriptions.

- Text
Here is where you can add the main text expression. You can use a static text, Qlik expressions or variables. - Format as number
If your text expression is a metric, you will have the option to format the resulting metric with the format of your choice. - Currency Format
With this setting, you can add a currency of your choice (or any text character) as a pre or suffix. - Indicators
Similar to Vizlib Table and Vizlib Pivot Table, you can supplement your measures with dynamic indicators. These are icons which are changing depending on a pre-defined threshold, e.g. when a value is above or below 0. - Horizontal Alignment
Horizontally position your text within its layer borders left/centrally/right. - Vertical Alignment
Vertically position your text within its layer borders top/middle/right. - Wrap Text
Wraps the text into a second line if it exceeds the available space. - Font Color
Color the text in any font color you like. Supports qlik expressions. - Font Style
Style your text using bold, underling or italic. - Font Family
Choose a font family for your text. - Auto Font Size
You can choose to either use a fixed font size for your KPI metric or to responsively adjust its size. - Background Color
Choose a background color for your text KPI. - Layer Borders
Here you have the possibility to add and customize the layer borders of your text layer. - Actions
Add one or multiple actions to your layer which can executed when the user clicks on it. - Position
Here you can manually define the individual coordinates, height and width of your layer using input boxes. - Visibility
Show/Hide Layer depending on Qlik expressions or variables.
3.2.2 Icon Layer
Icons can supplement metrics to help indicate whether something is good or bad, allowing you to communicate your message more effectively. They also represent an important design aspect of your KPI, greatly improving the look and feel of your dashboard.

- Icon
Choose the icon here, either by selecting it from the available list of icons or by defining the icon text code. - Font Color
Selects the color of the icon. - Auto Size
You can choose to either use a fixed font size for your icon or to have it adjust size based on the available space. - Background Color
Here you can choose the background color for your icon layer. - Layer Borders
Here you have the possibility to add and customize the layer borders of your text layer. - Actions
Add one or multiple actions to your layer which can executed when the user clicks on it. - Position
Here you can manually define the individual coordinates, height and width of your layer using input boxes. - Visibility
Show/Hide Layer depending on Qlik expressions or variables.
3.2.3 Image Layer
One image says more than a thousand words. Jokes aside, the image layer gives you the opportunity to either contextualize your KPI, add more information to it, or simply give the KPI a branded signature by using your team's or company's logo.

3.2.4 Line Layer
Lines in the Vizlib KPI Designer give you the ability to better organize your KPI and segment different underlying metrics to achieve a better look and feel.

3.2.5 Barchart Layer
With the Barchart layer you can add your very own customized bar chart to the KPI which can be used to communicate additional information much more compellingly than a single KPI metric by its own. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

3.2.6 Linechart Layer
Same as with the bar chart, with the Linechart layer you can add your very own customized line chart to enrich your KPI with trend or time series data. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

3.2.7 Bulletchart layer
The Bulletchart layer is a powerful visual add-on to any KPI as it nicely captures targets vs current performance.

3.3 Data Handling
Data Handling section gives you control over when the Pivot Table is calculated and whether you wish to display or hide zero values.
- Show Zero Values
This setting has no effect on the Vizlib KPI extensions. - Calculation Condition
Only calculates the Vizlib KPI Object if this condition is true.
3.4 Appearance
In the Appearance section you can style the overall KPI object. Aside from adding a standard Qlik title, sub-title and footnote, you can also modify the background colors and the borders of the object.

3.5 Global Actions
In the Vizlib KPI Designer, you have the possibility to either define actions on a layer level or on an object level. In this part of the property panel, you can add one or multiple actions which apply to the whole object. Actions defined here will override individual layer actions.
3.6 Interactivity
The interactivity section of the property panel lets you control how the user, and you yourself as a developer, interact with the KPI object.

- Snapping
Snapping is a design feature which helps you better position and align your layers on your canvas by enabling layers gravity and alignment guides. It will auto-position itself to be horizontally and vertically aligned. - Rescale Layers on Resize
To ensure your KPI object works on different screen sizes alike, all layers will be adjusted and rescale after resizing the extension object. All layers will be adjusted proportionally to the new object size. If this setting is disabled, the layer sizes will remain static. - Design mode
When design mode is activated, in edit mode, all layers will have their borders visibly displayed at all times, and not only when you hover over them or select them. - Fullscreen Icon
Expands the extension object to full screen. - Snapshot Icon
Takes snapshots of the extension which can be used for story mode.
4. What's new?:
v1.1 20/09/2018:
New Features:
- Added sorting (by dimension & measure) in the Line and Bar chart layers.
Bug Fixes:
- Changing axis label font size wasn't working on the bullet chart layer
- Borders settings were not getting applied on the Bar chart layer
- Missing some axis values on the bullet chart layer.
- Fixed some rendering issues on IE
- Fixed unused top/bottom margin in layers
- Fixed css conflicts between Vizlib KPI & Vizlib Pivot Table
- Fixed some css cuts on the text layer in Firefox
- Right click was not showing the layers menu in some screen sizes & browsers.
v1.0 29/08/2018:
- First Release
Coming Soon:
- Boxplot Layer
- Grouping of Layers
- Hover Styling
- Tooltips
- Wizard Mode
- Preset wizard
5 Known Limitations
6 Feedback and Bug Reporting
Feel free to raise your feedback or bugs found on the page below:
www.vizlib.com/feedback
Contact us:
7. Terms & Conditions
Terms and Conditions
2018 © Vizlib Ltd. - All rights reserved.