# PowerKPI for Qlik Sense

The single trusted extension for Qlik Sense you need to build beautiful, interactive, pixel-perfect or adaptive dashboards of any complexity level

**PowerKPI for Qlik Sense** by **RBC GROUP** (see product page [powerkpi.rbcgrp.com](https://www.rbcgrp.com/en/power-kpi/) for more details) allows you to visually design responsive and interactive user experience for Qlik Sense: from simple KPI dashboards to interactive detailed list-like, table-like or card-like views.

{% embed url="<https://www.youtube.com/watch?v=Ty3GUL3uzag>" %}

We provide a visualization extension which allows you to build flexible and stunning-looking interactive and responsive dashboards using **spreadsheet-like visual editor**.&#x20;

<figure><img src="/files/PwupqP6F38LEuoKLFQ1g" alt=""><figcaption><p>Visual Editor</p></figcaption></figure>

It allows developers to design data views visually in accordance with business requirements and corporate styles, by applying styles using fonts, backgrounds, images, borders, alignments, colors, icons, etc.&#x20;

{% content-ref url="/pages/-LbRgfXNBdaRcitap7W\_" %}
[Visual editor](/visual-editor)
{% endcontent-ref %}

There is also a predefined set of actions based on Qlik stable API.

{% content-ref url="/pages/-LbSon-62PM-W9XGvmLV" %}
[Actions](/actions)
{% endcontent-ref %}

![](/files/-Lb8mKvozA7Pz_FoQyR9)

![](/files/-Lt0AsedNWmsGQxRMKQu)

![Examples](/files/-Lb8mdqsptOB0hX6ecZj)

{% hint style="info" %}
See "[Features overview](/features-overview)" for more details.
{% endhint %}

{% hint style="info" %}
See also "[Demo Apps](/demo-apps)".
{% endhint %}


# What's new

<figure><img src="/files/qz5kHizRxZE2mzZ9nMVZ" alt=""><figcaption></figcaption></figure>

### <mark style="color:green;">2025.1</mark>

### Cyclic Groups support

<figure><img src="/files/A05Um58qdtOvSQ2fdHt0" alt=""><figcaption></figcaption></figure>

### Minicharts - Sparkline initial release (packed with features)

<figure><img src="/files/gPQ5o9KMaVu1TF87Md8N" alt=""><figcaption></figcaption></figure>

Sparkline initial release packed with optional features:&#x20;

* **Area** feature (to show confidence interval area using expressions)

<figure><img src="/files/WkiQLk1OZzLqtegIpHnI" alt=""><figcaption></figcaption></figure>

* **Comparison** feature (to show side by side actual vs plan/forecast, like for like trends, etc)

<figure><img src="/files/qf6VDQFIv09uZjMk5Pmo" alt=""><figcaption></figcaption></figure>

* **X-Axis, Y-Axis** settings, including Local or Global Y-Axis

<figure><img src="/files/81jC8lj9Etk3jnvt0AmQ" alt=""><figcaption><p>Axis settings</p></figcaption></figure>

* **Line curve** (Linear/Monotone), **Line type** (Solid/Dashed), **Line thickness, Data points , Colors** settings&#x20;
* **Tooltips**

<figure><img src="/files/Nn2YTDBAP5pfAa9EeyTP" alt=""><figcaption></figcaption></figure>

* **Show value labels** settings (Last value only, First and Last values, Auto)

<figure><img src="/files/ew1Vh2HO8uNAz3DTpqgV" alt=""><figcaption></figcaption></figure>

### Symbol expression improvement

<figure><img src="/files/yUUHvzyqk6HmbmQr6kn6" alt=""><figcaption></figcaption></figure>

**Symbol** attribute expression for a measure can be used to add meaningful and valuable information to a KPI, visualize additional information alongside with a KPI, using different font color, size and position (before or after a KPI):

<figure><img src="/files/s1D8U0bsqylSIV6ICn5b" alt=""><figcaption></figcaption></figure>

### Qlik object styling support (see Appearance/Presentation/Styling)

<figure><img src="/files/aVUoa4qGjVd59TYMmHkT" alt=""><figcaption></figcaption></figure>

### Extension migration to Qlik Nebula.js framework

### Show sidebar action parameters improvement to set width of a sidebar

<figure><img src="/files/ULwPLflENJ4nZSbiayA1" alt=""><figcaption></figcaption></figure>

### <mark style="color:green;">February 2023</mark>

### Object level actions&#x20;

Added support for object-level actions ("General" tab) in addition to cell-level actions ("Cells" tab). When the user clicks on a visualization, the object-level action fires first, followed by the cell-level actions.

<figure><img src="/files/mZfXmcTFOHl5HRxPimPf" alt=""><figcaption></figcaption></figure>

### **Show sidebar** action

<figure><img src="/files/FCTnYZ4EbnVGJVbKdXKY" alt=""><figcaption></figcaption></figure>

It supports HTML as well as embedding master visualizations by using the following syntax:

```
$object_id{css styles}
```

&#x20;**object\_id** - identifier of the master visualization object.&#x20;

**css styles** - the CSS styles to apply to the embedded object.

Example:

```
$9bc03224-f072-439f-b0de-3014860d4f8a{width:100%;height: 40px}
```

See more details [here](/actions/show-sidebar).

<div align="center"><figure><img src="/files/31F9FbAquta1S32DM5j1" alt=""><figcaption></figcaption></figure></div>

### **Show popover** action

It supports HTML as well as embedding master visualizations. See more details [here](/actions/show-popover).

<figure><img src="/files/t0lEb4A8DoDjoFejvEEL" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/28MsdnQ6l4JBQdFcTm0e" alt=""><figcaption></figcaption></figure>

### **Tooltip** measure's attribute expression to simplify adding Tooltips&#x20;

<figure><img src="/files/6uOUecIsPTRqqwF1NQFU" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/YpygM8rbVWPLH2ROpYPM" alt=""><figcaption></figcaption></figure>

### "CSS classes" parameter to support custom themes

With custom themes developers can style Power KPI visualizations by applying custom classes defined in a theme.

```css
.qv-object-powerkpi .powerkpi-theme {
  background: linear-gradient(#f2f2f2, white) !important;
  border: solid 1px #f2f2f2;
  border-radius: 5px;
}

.qv-object-powerkpi .powerkpi-theme:hover  {
  background: linear-gradient(#CFF0F8, white) !important;
  border: solid 1px #3b93bd;
}
```

<figure><img src="/files/jhKmdu2QlZM1PWXdla4h" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dGITppbd3KPaOpQJ6tL3" alt=""><figcaption></figcaption></figure>

### Maximum font size in percentages for responsive text mode

It is now possible to set maximum font size in percentages when responsive text mode is activated for a cell using the <img src="/files/-LbSSiDh7WlroMnwep7G" alt="" data-size="original"> "Fit inside cell button" on the "Font" toolbar.  For example, in the image below, the maximum font size is set to 75% of the original size defined when drawing the data value for a particular cell in responsive mode.

<figure><img src="/files/QPAhTxU7HncMc7o2zKUn" alt=""><figcaption></figcaption></figure>

### <mark style="color:green;">August 2022</mark>

### **Chart Level Scripting support**&#x20;

It is a Qlik Sense feature available in **Qlik Cloud** and in **Qlik Sense Client Managed** version starting from **August 2022**.

Quote from Qlik documentation:

> **With chart level scripting, you can add script-like functionality to the results of a visualization. It complements chart expressions, as chart level scripting include control statements, such as loops and recursive actions, for more complex mathematical calculations. You can also modify multiple columns, as long as a placeholder exists in the chart, and add new rows to a result.**

**Chart level scripting must be enabled in the app** before you can add a chart script to a visualization.

See more at [help.qlik.com](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/ChartLevelScripting/chart-level-scripting.htm)

<figure><img src="/files/S9EHKzGyCUf0CianZzom" alt=""><figcaption><p>Scripts section</p></figcaption></figure>

<figure><img src="/files/yRtjAdvb6dVboNmZGYbT" alt=""><figcaption></figcaption></figure>

### <mark style="color:green;">September 2020</mark>

### Resizing of columns and rows

* **Resizing of columns and rows** has been added to be able to design more sophisticated visualization templates.

![](/files/-MBh5DwP1f-Oca9may8W)

It is also possible to change width/height of a column/row using the resize dialog by clicking on a column/row resize icon.

![](/files/-MBh6SOqxDvWy7642ytC)

### Embedding images using base64 encoding

* It is easy to **embed images** in visualizations **in base64 encoding** now.

![](/files/-MBhR4t_MUiyk6HpmkFu)

### **Embedding master visualizations**

* **Embedding master visualizations** can be done with toolbar button or context menu for a selected cell, which also allows to **change the interactions and selections options** for the master object, or **delete** the **embedded master object**.

![](/files/-MBhhwCH-kVq_TGbvJXC)

### **Insert and delete operations**

* **Insert and delete operations** have been **improved** and it is now possible to insert or delete columns or rows even if there are cells which span across several columns or rows.

![](/files/-MBi51uu1-1otpHzLlTV)

![](/files/-MBi58FEJTUJfTCv4n-A)

### Font tags

* **Font tags** allow to apply the **same font size** on various PowerKPI objects if they have same size on a sheet.

![](/files/-MBiOoS800G7a1rIaKjW)

![Same font size when font tags have been applied on the Margin YTD and Orders YTD KPIs](/files/-MBiVAInDB4m-4tIX3mO)

![Different font size without font tags](/files/-MBiTsLSLvThj0cvdHQe)

### Apply symbol action

* **Apply symbol action** has been **extended** with the possibility to map "Symbol" expression values to icons.

![](/files/-MBiI0H-H1TcRvGWiFvK)

* and other small improvements:
  * the Value color action has been extended with the "Text color expression" option.&#x20;
  * Shift + click on a color picker apply a color without opening the color dialog.

### <mark style="color:green;">April, June 2020</mark>

### Trusted Extension Developer program accreditation

* **Qlik Sense June 2020 accreditation on Trusted Extension Developer program.**

### Qlik Cloud Services and Qlik Sense Enterprise on Kubernetes support

* **Qlik Cloud Services (Business and Enterprise)** and **Qlik Sense Enterprise on Kubernetes support.** See installation instructions [here](https://help.rbcgrp.com/installation#how-to-install-extension-on-qlik-cloud-services-business-and-enterprise).

### Preview in Edit mode

* **Preview in the Qlik Sense Edit mode** works now in the same way as component visualize data in the Analysis mode.  To open up the PowerKPI editor a developer should click on a button <img src="/files/-M0wIsZpi7ajFMFFdZTX" alt="" data-size="original"> in the top left corner of the component or, as another option, open Visualizations sections on the property panel and then expand an appropriate  visualization and click on the "Edit template" button. The editor will be loaded and shown instead of a visualization.

![](/files/-M0wVV6wew4tdqFZf3H6)

### Editor Context Menu

* **Editor context menu** has been added to increase a developer productivity. Toolbar panel can be collapsed and expanded now.

![](/files/-M0wXSb3SctogWsZFX3X)

### Productivity enhancements

* The ability to create a visualization template in a couple of clicks has been added. The "Dimensions/Measures" panel automatically opens up when new visualization created. "Apply all" button allows developers to apply and use all dimensions and measures configured on the data sections of the property panel. It also applies predefined set of actions like "Sort", "Alternative dimensions/measures", "Searchable dimension", "Select dimension value", etc.

![](/files/-M0wZSpGDzmu6WVLFUN-)

### Add rows and columns buttons

* **Quick add rows/columns buttons**

![](/files/-M0wovK4otw0Fp2vJhOh)

### Native and Virtual scrolling modes

* **Native and Virtual scrolling modes for tables.** Native mode uses native pageable scroll in which the  "Load more" or "Load previous" buttons can be used to load the next or previous page of the data, while virtual scrolling mode allows to scroll the entire dataset.

![](/files/-M0wrv_Mvv6yqWNXU4rj)

### Fit height button

* **"Fit height" quick button.** It allows to set mode  in which it will shrink or stretch a visualization to fit the occupied by the component area.

![](/files/-M0wvM356PZPJVbiwxS9)

### Dimensions and Measures popup menu

* Double click on a cell or use **Ctrl + Space** (**⌘ + Space**)  to open up the dimensions and measures popup menu.

![](/files/-M0wndF9Ge0BvCujpCXW)

### Apply styles action

* **Apply styles action** allows to conditionally apply styles on a cell. See the action description [here](/actions/apply-styles).

![](/files/-M0wx30RGAgtkGRWxTfh)

### Apply symbol action

* **Apply symbol action** allows conditionally add an icon to a measure. See the action description [here](/actions/apply-symbol).

![](/files/-M0wywScFDNxsP7xzb42)

### Editor keyboard shortcuts

* **Editor keyboard shortcuts** enhancements

Keyboard **arrows keys** allow to navigate between cells;&#x20;

Hold **Shift** and use **arrows** to select cells;

**Ctrl + Alt + P** (**⌘ + Alt + P**) - preview mode;

**Ctrl + Alt + E** (**⌘ + Alt + E**) - edit mode (for selected component);

**Ctrl + Alt + C** (**⌘ + Alt + C**) - copy a cell content (including styling options and actions);

**Ctrl + Alt + V** (**⌘ + Alt + V**) - paste copied cell content;

**Ctrl + Space** (**⌘ + Space**) - open up the dimensions and measures popup menu.

See full editor keyboard shortcuts list [here](/visual-editor/visual-editor-keyboard-shortcuts).

* **and other performance improvements and bug fixes**.


# Compatibility

PowerKPI trusted extension for Qlik Sense is compatible with the latest **Qlik Sense Enterprise Client Managed**  release  as well as **Qlik Cloud**.

PowerKPI is also compatible with the following Qlik Sense Enterprise releases:&#x20;

* **Qlik Sense November 2025**
* **Qlik Sense May 2025**
* **Qlik Sense November 2024**
* **Qlik Sense May 2024**
* **Qlik Sense February 2024**
* **Qlik Sense November 2023**
* **Qlik Sense August 2023**
* **Qlik Sense May 2023**
* **Qlik Sense February 2023**
* **Qlik Sense November 2022**
* **Qlik Sense August 2022**
* **Qlik Sense May 2022**
* **Qlik Sense February 2022**
* **Qlik Sense November 2021**
* **Qlik Sense August 2021**
* **Qlik Sense May 2021**
* **Qlik Sense February 2021**
* **Qlik Sense November 2020**
* **Qlik Sense September 2020**
* **Qlik Sense June 2020**&#x20;
* **Qlik Sense April 2020**
* **Qlik Sense February 2020** &#x20;
* **Qlik Sense November 2019**
* **Qlik Sense September 2019**
* **Qlik Sense June 2019**
* **Qlik Sense April 2019**
* **Qlik Sense February 2019**
* it also should work with some older supported Qlik Sense releases.&#x20;


# Installation

This section describes how to install the extension on various versions of Qlik Sense.

Download the latest version of the extension from [powerkpi.rbcgrp.com](https://powerkpi.rbcgrp.com).&#x20;

## Qlik Sense Desktop

1. Navigate to the Extensions folder at C:\Users\\\<username>\Documents\Qlik\Sense\Extensions
2. Create a new folder and give it powerkpi name
3. Unzip downloaded powerkpi.zip file to the new folder

## Qlik Sense Enterprise on Windows or Qlik Analytics Platform

1. Navigate to the QMC
2. In the left menu, under "Manage Resources", find and click on "Extensions"
3. Click "Import" on the bottom nav bar
4. Click "Choose File" and navigate to the downloaded extension powerkpi.zip
5. Click "Import" to finish
6. Activate Power KPI component (go to [Activation ](/activation)page for more details).

{% hint style="info" %}
PowerKPI extension needs to be activated after importing it on Qlik Sense Enterprise Server. See the [**Activation** ](/activation)section of this documentation for more details.
{% endhint %}

## SaaS editions of Qlik Sense (Qlik Sense Business and Qlik Sense Enterprise SaaS), Qlik Sense Enterprise on Kubernetes

1. Navigate and login into your qlik cloud tenant.
2. Open management console by clicking on the avatar in the top right corner of the tenant hub and select the **Administration** menu ite&#x6D;**.**

![](/files/-M1-XQSwU579dgsq4Tb1)

3\.  In the management console, under the "Content" header, find and click on the "Extensions" section.

4\. Click "Add" button to open up the "Add extension" dialog

![](/files/-M1-ZdKnaVeeIEXLAyZT)

5\. To add an extension click "Browse" button, select powerkpi.zip file and then click "Add".

6\.  In the management console, go to the "Content Security Policy" section under the "Integration" header and click "Add" in upper the right-hand corner.

{% hint style="info" %}
If your installation of **Qlik Sense Enterprise on Kubernetes** misses "Content Security Policy" skip steps 6 - 7 of this instruction and go to the activation step.
{% endhint %}

7\. Add new content security policy item by filling up the following parameters under the "Add origin" dialog window and then click "Add" to finish with it:

* Name: **powerkpi**
* Origin: **ext.rbcgrp.com**
* Directive: **connect-src**

![](/files/-M1-gSSKkljMie5kTK2v)

8\. Activate Power KPI component (go to [Activation ](/activation)page for more details).

{% hint style="info" %}
&#x20;The installation process of visualizations extensions is also described in Qlik Sense Help.

<https://help.qlik.com/en-US/sense-developer/Subsystems/Extensions/Content/Sense_Extensions/Howtos/deploy-extensions.htm>
{% endhint %}

{% content-ref url="/pages/-Lb8owLeyNnTFjteECLD" %}
[Activation](/activation)
{% endcontent-ref %}


# Activation

After importing the extension to Qlik Sense Enterprise Server, you should activate the extension.

{% hint style="info" %}
&#x20;There is no need to activate the extension on Qlik Sense Desktop.
{% endhint %}

{% hint style="info" %}
To activate the extension on Qlik Analytics Platform use Single Configurator tool of the Dev Hub.
{% endhint %}

&#x20;The activation should be made by the **RootAdmin** user.

To activate the extension, you will have to choose one of the two options – **online activation (**&#x69;f you have internet connectio&#x6E;**)** or **offline activation:**

{% content-ref url="/pages/-Lb8pTDh-n2-KHTB-8Yr" %}
[Online activation](/activation/online-activation)
{% endcontent-ref %}

{% content-ref url="/pages/-Lb8pWw6UEBvYBAfymq\_" %}
[Offline activation](/activation/offline-activation)
{% endcontent-ref %}


# Online activation

The following steps should be taken to activate the extension:

**1.** **Create an empty application on a server and place the extension on the sheet.**

**2.** **Open “About” section on the properties panel.**

{% hint style="info" %}
The properties panel is available on the right-hand side when you are editing a visualization or a sheet. If it is hidden, click <img src="/files/-Lb8sLCLvg6O7pKmK8uP" alt="" data-size="original"> in the lower right-hand corner.
{% endhint %}

!["About" section of the properties panel in Qlik Sense ](/files/-Lb8r8EbviSuXKOyFpda)

You will see the version of the extensions along with the message “Valid license is missing”.

**3. Click “Activate” button to start the activation process.**

After clicking the “Activate” button, you will see the activation dialog.

![Activation dialog](/files/-Lb8tUoqkm0la-ekcZ6L)

**4. On the first page you read software license agreement and scroll down the text.**

![Accept the license](/files/-Lb8uVLV--XJQm3naKBF)

**5.&#x20;
At the end of the license you set “I accept the license” checkbox and click the “Next” button.**

**6.  On the next page you enter your activation key received while purchasing the product and fill up the "Organization" field if it is empty.**

{% hint style="info" %}

&#x20;Leave the “Activation key” field empty if you are making a trial activation request.
{% endhint %}

![Enter your activation key or leave it empty for a trial version](/files/-Lb8vG2O8EMVtIiHjmny)

**7. Click the “Next” button to finish the activation.**

After the successful activation you will get the message “Congratulations! PowerKPI has been successfully activated!”.

![PowerKPI has been successfully activated](/files/-Lb8vorbhjfKjWnxnPK3)

{% hint style="info" %}
If you have any questions regarding the activation process, feel free to contact us at <https://support.rbcgrp.com/>
{% endhint %}


# Offline activation

If you don’t have an internet connection for some reason or some kind of problem has occurred during online activation, there is the offline activation option.

The following steps should be taken to activate the extension using offline option:

**1.** **Create an empty application on a server and place the extension on the sheet.**

**2.** **Open “About” section on the properties panel.**

{% hint style="info" %}
The properties panel is available on the right-hand side when you are editing a visualization or a sheet. If it is hidden, click <img src="/files/-Lb8sLCLvg6O7pKmK8uP" alt="" data-size="original"> in the lower right-hand corner.
{% endhint %}

!["About" section of the properties panel in Qlik Sense ](/files/-Lb8r8EbviSuXKOyFpda)

You will see the version of the extensions along with the message “Valid license is missing”.

**3. Click “Activate” button to start the activation process.**

After clicking the “Activate” button, you will see the activation dialog.

![Activation dialog](/files/-Lb8tUoqkm0la-ekcZ6L)

**4. On the first page you read software license agreement and scroll down the text.**

![Accept the license](/files/-Lb8uVLV--XJQm3naKBF)

**5.&#x20;
At the end of the license you set “I accept the license” checkbox and click the “Next” button.**

**6. Specify your activation key on the appropriate page of the activation dialog and set “Offline activation” checkbox.**  Proceed offline activation by clicking the “Next” button.

{% hint style="info" %}
Leave the “Activation key” field empty if you are making a trial activation request.&#x20;
{% endhint %}

![Enter your activation key or leave it empty for a trial version](/files/-LbMZvrdKELCGjQkiHf9)

**7. Following the instructions on the next page you copy the displayed text and send it by email to** [**ext@rbcgrp.com**](mailto:ext@rbcgrp.com).

![Copy and send a license request by email](/files/-LbM_hKQyiqYbGuIbW_x)

**8. Some time later, you will receive an email with the valid license which you should paste into the textbox below the label “Paste received license content here” and then click the “Upload license” button.**

![Paste a license token and click "Upload license"](/files/-LbMaYkCslRiYHXt4AFA)

After clicking “Upload license”, you will get the message “Congratulations! PowerKPI has been successfully activated!”.

![](/files/-Lb8vorbhjfKjWnxnPK3)

{% hint style="info" %}
If you have any questions regarding the activation process, feel free to contact us at <https://support.rbcgrp.com/>
{% endhint %}


# Getting started tutorial

The purpose of the tutorial is to give you feeling how the extension component can be used to develop an interactive dashboards.

{% hint style="info" %}
&#x20;If you prefer, you can follow the link below to see the advanced tutorial in a video:
{% endhint %}

{% content-ref url="/pages/-LcBdMv-X0km\_JgUPPaN" %}
[Video tutorial](/video-tutorial)
{% endcontent-ref %}

In this tutorial, we show how to build an interactive dashboard. It will support the drill-down from general KPIs representation to the detailed view in just one click.

![](/files/-LbNvE9TwMbY29OEIZxh)

{% hint style="info" %}
The final app is available to download:
{% endhint %}

{% file src="/files/-LbT17iY6oGgiJjhizC1" %}
Power KPI tutorial.qvf
{% endfile %}


# Preparation steps

To follow this tutorial make the following preparation steps:

1. Create a new app
2. Open Qlik Sense script editor and hit Ctrl+Alt+00 to insert a demo script.
3. Click "Load data" button to execute the generated script.
4. Click "Analysis" tab to be able to start creating a visualization.


# Template design

To start building a dashboard using the PowerKPI extension component, just drag-and-drop it on a sheet from the "Extensions" section of the "Custom objects" of the Qlik Sense assets panel.

{% hint style="info" %}
See the description of the assets panel in Qlik help:&#x20;

[https://help.qlik.com/en-US/sense/February2019/Subsystems/Hub/Content/Sense\_Hub/Assets/assets-panel.htm](https://help.qlik.com/en-US/sense/Subsystems/Hub/Content/Sense_Hub/Assets/assets-panel.htm)
{% endhint %}

![](/files/-LbMjKAaPZQOVNwbb63m)

Next, open the “**Data**” section of the properties panel and add measures. One measure is the minimum requirement to start building a simple dashboard. Suppose it should be SUM(Expression1).

{% hint style="info" %}
You will have a possibility to add dimensions, measures and alternative ones. There are no constraints regarding the quantity of the used dimensions and measures.
{% endhint %}

<div align="left"><img src="/files/-LbMksOSch6yJOd1yToP" alt=""></div>

After adding a measure, you will be able to open a view data window or create a visualization template.

![](/files/-LbMlU80tEHs_8N3qi6U)

By clicking “View data” button, you will open a data preview. You can continue to add measures and dimensions and see the appropriate data changes in the preview.

![](/files/-LbMn80cbu_mme7wkX6r)

Add two additional measures: SUM(Expression2) and SUM(Expression3).&#x20;

Set measures labels to "KPI1", "KPI2", "KPI3".

In data preview mode hit “**New**” button or open “Visualizations” section on the properties panel and hit “**Create**” button. Visualization spreadsheet-like editor will be opened instead of data preview.

![](/files/-LbMoZTm_YxWhR5Ri18J)

A visualization template consists of cells which can be added, merged, removed in the same manner as you would do it in a spreadsheet-like editor. To start adding columns and/or rows, click “Add “Rows” <img src="/files/-LbMpKvSJ7rKC61lDslN" alt="" data-size="original">  and/or “Add columns” <img src="/files/-LbMphXbPJT0GfX5EUdd" alt="" data-size="original"> toolbar button.

{% hint style="info" %}
To insert a row, use "Shift + Insert" keyboard shortcut. To insert a column, use "Ctrl + Shift + Insert" keyboard shortcut
{% endhint %}

To merge cells, you should select cells from top left corner to bottom right corner. You can even select the entire column or row by clicking row or column header (the cell with a number displayed).

![](/files/-LbMqHyu7UMKQ_ktG72e)

After selecting cells, you can merge them by clicking "Merge"<img src="/files/-LbMqZ9lLxoLkeB8jkau" alt="" data-size="original"> toolbar button.

{% hint style="info" %}
To merge selected cells, use "Ctrl + M" keyboard shortcut&#x20;
{% endhint %}

![](/files/-LbMsPeVswWYNnR2AnUz)

To split merged cells, select a cell and click "Split" <img src="/files/-LbMt-JxAp1CVv9FTJmB" alt="" data-size="original"> toolbar button.

{% hint style="info" %}
To split merged cells, use "Ctrl + Alt + M" keyboard shortcut&#x20;
{% endhint %}

To remove a row or a column, you should select the entire row/column and hit "Delete" <img src="/files/-LbMuQh8XjeRnht-Os3r" alt="" data-size="original"> toolbar button.

In such a way, by adding columns and rows, merging them, you will design your visualization template (which can be improved later) and will be ready to bind measures with the visualization.

To start binding dimensions and measures, click "Dimensions/Measures" <img src="/files/-LbMv8O0FN1ZbHLOCh16" alt="" data-size="original"> toolbar button. Data panel with configured dimensions and measures will be opened along with the visualization template.

![](/files/-LbMvVovrfnh3Mfe2IkQ)

Data panel will show all measures which have been added to the Data section of the properties panel.

Each dimension and measure contain “Label” button, which will allow you to bind dimension/measure label within the template.&#x20;

Each measure, except the “Label” button, contains “Totals” button. It allows you to bind total calculated for the appropriate measure within the template. It makes sense to use “Totals” when constructing table-like templates.&#x20;

To bind a measure/dimension with the appropriate cell, select a cell and click the appropriate measure/dimension. Or, if you prefer, drag the data item (dimension or measure) onto the template and drop it on the appropriate cell. In such a way you will bind your data assets (dimensions and measures) with the designed template.

![](/files/-LbMz5qGDUGZdFjw8XXQ)

The bonded item will become grey and the data asset item icon will change accordingly.

![](/files/-LbMzh0sC3QzNTDdCqJf)

Click “Save” button to save changes.

Click “Preview” tab on the top of the component editor to preview the visualization.

![](/files/-LbN-YXduLCfaVciALGN)

{% hint style="info" %}
KPIs values should differ from the ones on the picture because of random nature of the generated script
{% endhint %}

To improve our visualization template, we should make some further steps - apply alignment, fonts and number formatting.


# Measures binding

To start binding dimensions and measures, click "Dimensions/Measures" <img src="/files/-LbMv8O0FN1ZbHLOCh16" alt="" data-size="original"> toolbar button. Data panel with configured dimensions and measures will be opened along with the visualization template.

![](/files/-LbMvVovrfnh3Mfe2IkQ)

Data panel will show all the measures which have been added to the Data section of the properties panel.

Each dimension and measure contain “Label” button, which will allow you to bind dimension/measure label within the template.&#x20;

Each measure, except the “Label” button, contains “Totals” button. It allows you to bind total calculated for the appropriate measure within the template. It makes sense to use “Totals” when constructing table-like templates.&#x20;

To bind a measure/dimension with the appropriate cell, select a cell and click the appropriate measure/dimension. Or, if you prefer, drag the data item (dimension or measure) onto the template and drop it on the appropriate cell. In such a way you will bind your data assets (dimensions and measures) with the designed template.

![](/files/-LbMz5qGDUGZdFjw8XXQ)

The bonded item will become grey and the data asset item icon will change accordingly.

![](/files/-LbMzh0sC3QzNTDdCqJf)

Click “Save” button to save changes.

Click “Preview” tab on the top of the component editor to preview the visualization.

![](/files/-LbN-YXduLCfaVciALGN)

To improve our visualization template, we should make some further steps - apply alignment, fonts and number formatting.&#x20;

Switch back to the edit mode by clicking editor tab (with pencil icon before the template name – “New visualization” in our case).

![](/files/-LbN4uTnFtqMHQ6hy_bX)


# Formatting

Select the appropriate cells containing measures and labels. You can make the selection by holding Ctrl key and clicking the required cells or making range selections from top left corner down to bottom right corner holding right mouse key.

To horizontally center all the data inside each selected cell, click "Center" <img src="/files/-LbN8U0rKZZk55_hUgJn" alt="" data-size="original">  toolbar button (or use "Ctrl + J" keyboard shortcut).

Apply vertical middle alignment clicking "Middle"<img src="/files/-LbN8rl_rdinX91LwNQ7" alt="" data-size="original"> toolbar  button (or use "Ctrl + Alt + J" keyboard shortcut).

![](/files/-LbN9NiEoyYjOvVCKI_5)

Click “Preview” tab.

![](/files/-LbN9dl-n2KVH-m4t4qp)

Numbers and labels are now properly aligned.&#x20;

Go to Data section of the properties panel, expand the first measure and set the approppriate number format. Apply similar number formatting with all the measures. During format changing you will immediately see changes in the “Preview” mode.

Let's apply another font on our KPIs. Return to edit mode by clicking "New visualization" tab <img src="/files/-LbNBE8xz39JBzWDvI8V" alt="" data-size="original"> . Cell selections should still remain active. Change font to Comfortaa, for example.

![](/files/-LbNAhZiJc4sBZMUoLF0)

Open “Preview” again to be able to see the latest changes.

![](/files/-LbNCOOgZhVnUNk8FEG9)


# Hypercubes

Suppose we want to have a possibility to drill into each particular KPI to be able to make some detailed analysis. In other words, clicking particular KPI should allow us to switch to another analysis context (another visualization template with a different set of dimensions and an expanded set of measures).

One of the interesting features of PowerKPI is the ability to define unlimited number of visualization templates bonded to different definitions of dimensions and measures (**Hypercube** in Qlik Sense technical term).

Let's expand **HyperCubes** section (the first section) on the properties panel.&#x20;

![](/files/-LbNDAXhnmKnabc6Iy09)

You already have one HyperCube here called “New hypercube”. It has been created when you added extensions to the sheet.

Rename it to something meaningful, for example – “KPIs”. Expand “New hypercube” item and change “Title” property accordingly. Thus, the current configuration of dimensions and measures which you can see on the "Data" section of properties panel will be called “KPIs”.

![](/files/-LbNDl3C5zniJ30ZCjzo)

Let's create another hypercube called “Details”. Click “Create” button of the “HyperCubes” section. A new hypercube will be added. If you open the Data section of the properties panel, it will be empty.

![](/files/-LbNE0eX6n6AGcmg2BEH)

To switch back to “KPIs” hypercube, expand it in “Hypercubes” section and click “Show” button.&#x20;

![](/files/-LbNFi1_OXXeBCZQGMKM)

The “Data” section should contain all previously created dimensions and measures, and the editor should show previously designed visualization template.&#x20;

Expand "KPIs" hypercube again and click "Copy" button. In such way, in one click, we can copy dimensions and measues configured for the hypercube.

![](/files/-LbNG0Q5YbIJa709ALY_)

Switch back to the “New hypercube” in the same way as you did it for “KPIs” (expand it and click "Show" button).&#x20;

Paste copied measures by clicking "Paste" button.

Change the title for the newly created hypercube to “Details”.&#x20;

![](/files/-LbNHY2OJ5fANRqhj-ON)

Expand the “Data” section of the properties panel. It should contain the copied measures. Let's add a dimension using field "Dim1".

![](/files/-LbNI7v9i74Iyfsb3FMJ)

After adding the required dimension and measures on the “Data” section, you are ready to start building a new visualization template to implement drill-down feature.


# Visualizations

After adding the dimension and measures to the “Data” section, you are ready to start building a new visualization template.

![](/files/-LbNJ5i7RPIqd2lkBTcv)

Hit “New” button <img src="/files/-LbNJNtpdg45iUR7iXhG" alt="" data-size="original">  to add a new visualization template. A new template will be created and the “Visualization” section of the properties panel should contain two items.

![](/files/-LbNJZnJur_gvgpSvVoW)

Both visualizations are called “New visualization”. You can change the titles for each of item. Expand the first item of the “Visualizations” section of properties panel and change the title to “KPIs”, expand the second one and change it to “Details”.

You can easily switch between visualization templates using special button  <img src="/files/-LbNKhmsG0oG0VK91Bsw" alt="" data-size="original">in the top left corner of the component.

![](/files/-LbNKUg8pI_y7KpfzZrB)

{% hint style="info" %}
Switching between visualization templates you also switch between hypercube’s definitions. “Data”, “Sorting” and “Add-ons” sections of the properties panel can be used to change the properties of the currently active hypercube
{% endhint %}

Open “Data” section and try to switch between visualizations. So, when you switch between visualizations, data panel will contain dimensions and measures for currently active visualization.

You should get back to “Details” template. Add 2 columns and 3 rows to it.&#x20;

We are going to build a simple table view. Drag and drop data items from “Dimensions / Measures” panel to the template as it is shown in the figure below.

![](/files/-LbNd79uEyfcPwjJw1gF)

Open “Preview” tab to see what you have.

![](/files/-LbNdpd-S1TvtMMOPckQ)

Return to the edit mode by clicking “Details” tab.&#x20;

Building table-like views in such a way, we need to specify which row/rows is/are details rows of the current template. For that purpose, open “Tags” panel by clicking "Tags" <img src="/files/-LbNecCCZUar31n7j3JJ" alt="" data-size="original">  toolbar button on the panel “Data” of the editor toolbar.&#x20;

![](/files/-LbNevTgrG6ZlVuo83y5)

Select the second row clicking on the cell with row number “2” and then click on the “Rows” tag.

![](/files/-LbNfLAxy2puAd3XnMJU)

You should get a layout as it is shown in the figure below.

![](/files/-LbNfp8KZyFc4KKuv44u)

Open “Preview” tab to see what you get now.

![](/files/-LbNg-YgZqfx6RUtAWrp)

You can suppress null value for the used dimension “Dim1”. Open “Data” section, expand “Dim1” and uncheck “Include null values” parameter. That’s it for now.


# Actions

But remember what the reason to build “Details” visualization was. We have a requirement to build an interactive dashboard with the ability to “drill into kpi” from the simple kpi view to the detailed one.

PowerKPI component has a predefined set of actions which can be applied to any cell of our template. One of such actions is “Activate view” action. You can apply it on a cell with KPI.

Open “KPIs” template in the edit mode by clicking <img src="/files/-LbNiCw_Fu61QIn2Jg6I" alt="" data-size="original">button in the top left corner. Open “Actions” panel by clicking "Actions" <img src="/files/-LbNkDBjY0i-bZAQr4q7" alt="" data-size="original"> toolbar button (or use "Ctrl + Shift + A" keyboard shortcut to do the same).&#x20;

Select the appropriate cell (with KPI1, for example).

![](/files/-LbNka9VL-5HxRfaZ8xE)

Click “+ Add” button on “Actions” panel. The “Activate view” action will be the first item in the list. Click it.

![](/files/-LbNmgdYynT1UxmqQTEY)

It will open “Actions” parameters panel. In our particular case there is only one parameter – “Linked visualization”, which will be opened when user clicks on the KPI.

If you click on the icon below “Linked visualization” title, you will get a list with available visualizations. In our case it should be only one - “Details”.

![](/files/-LbNn8aLR5OkXWUhTu6J)

Select it and click “Apply” button. “Activate view” item will be shown on the “Actions” panel and a special icon <img src="/files/-LbNnZLIHTG60labiFjI" alt="" data-size="original"> will be shown in the top left corner of the selected cell.

![](/files/-LbNnNXdBqGEQjriFO8c)

Save all changes clicking "Save" <img src="/files/-LbNrOVpfKAwZ23xeyAw" alt="" data-size="original"> button.


# The final result

{% hint style="info" %}
The final app is available to download:
{% endhint %}

{% file src="/files/-LbT17iY6oGgiJjhizC1" %}
Power KPI tutorial.qvf
{% endfile %}

You can test how it works now. Stop editing your sheet (if Qlik Sense is still in the edit mode) by clicking "View" <img src="/files/-LbNrwZtZuFHBgRcbk_O" alt="" data-size="original"> button (or "Done" <img src="/files/-LbNs3XnnUPJVZXisePg" alt="" data-size="original"> button if you use an older version of Qlik Sense).&#x20;

Your visualization should look like this:

![](/files/-LbNsffX6IKsPl8gLtKf)

If you click on “first number”, you should drill into our detailed view:

![](/files/-LbNtJw32ZbAdXntVX2D)

It should look and function like this:

![](/files/-LbNvE9TwMbY29OEIZxh)

Feel free to improve the current solution – try to add “Back” button to the “Details” template and apply various formatting options, cell borders, fonts, or even actions.

In this tutorial we have used only one feature of PowerKPI component. See “Features overview” section of the documentation for more details and available features of the component.


# Video tutorial

{% hint style="info" %}
You should install PowerKPI extension before you get started
{% endhint %}

{% content-ref url="/pages/-Lb8i7u\_mEMseZFSiRlW" %}
[Installation](/installation)
{% endcontent-ref %}

{% hint style="info" %}
Download the "Starting point app" to move along with the tutorial. The "Final App" is also available to download. See links bellow
{% endhint %}

{% file src="/files/-LcBeuuq-d5cJs1o7doV" %}
The starting point app
{% endfile %}

{% file src="/files/-LcBeC6pa\_PwW3rtPnbN" %}
The final App
{% endfile %}

{% embed url="<https://youtu.be/BZJLoFpfviE>" %}

{% embed url="<https://youtu.be/QaxCaU3BSCI>" %}

{% embed url="<https://youtu.be/dDwEbUSozlI>" %}

{% embed url="<https://youtu.be/DF5hwn87A3Y>" %}

{% embed url="<https://youtu.be/WON24kaob5M>" %}

{% embed url="<https://youtu.be/nEyM6X_fRLE>" %}

{% embed url="<https://youtu.be/xKFRROKTdGQ>" %}


# Features overview

PowerKPI component allows developers to visually design stunning-looking, responsive and interactive dashboards using **spreadsheet-like visual editor**: from simple kpi to interactive fancy and stunning-looking "table-like" data views (with the ability to build custom multiline detailed row templates).

See also [What's new](/whats-new) for the latest version.

See Demo Apps for more details.

{% content-ref url="/pages/-LdELleT1sT6986TeNLa" %}
[Demo Apps](/demo-apps)
{% endcontent-ref %}

![Spreadsheet-like visual editor](/files/-LbNx7rYVqZMYrHCOpIt)

{% content-ref url="/pages/-LbRgfXNBdaRcitap7W\_" %}
[Visual editor](/visual-editor)
{% endcontent-ref %}

It allows developers to apply styles on a business visualization template using **fonts**, **backgrounds**, **images, borders, alignments, colors, icons**, etc. You can apply color on any cell, cell borders, and text using user-friendly color dialog.

![Colors](/files/-LbNxZdrRqLlsNpeFjsm)

Borders panel allows you not only to apply borders to cells, but also to set the style, thickness and color of lines.

![Borders](/files/-LbNxlBPK8jC5qbZGY69)

If you need to get a more expressive way of visualizing KPIs, just select and apply the appropriate font, set text color, vertical and/or horizontal alignment, make it responsive, multiline for a long text,

![Fonts](/files/-LbNyEOk0amRNungAcx1)

or add images and icons to make your KPIs more readable.

![Image embedding](/files/-LbNyXlpBNenbdD323op)

PowerKPI is prepackaged with a **set of fonts**, which can be used to format numbers and text. Also, there is a set of **icon fonts** included. You can even extend the provided set of fonts with your own ones.

{% content-ref url="/pages/-LbSRnmVQBhx5D\_DGCjy" %}
[Font](/visual-editor/font)
{% endcontent-ref %}

![Icons fonts](/files/-LbNzW5PzqIGmGCMxbvC)

![](/files/-LbNzRQ9p6zPpZGG-kdT)

Icons can be displayed based on the expression entered in “Symbol” parameter of a dimension/measure:

![Showing icons using expression](/files/-LbO-HqG-zCmlykk_j9W)

Data configuration made using dimensions and measures doesn’t differ from making it using standard charts: use drag and drop or standard properties panel. You can even add and use **alternative dimensions and measures**, which will be available for business users in your visualizations to choose during the analysis.

![Alternative dimensions and measures](/files/-LbO0n1JjdgjFArAImYe)

Apart from all standard configuration capabilities, like sorting and add-ons, there is a possibility to add an **unlimited number of visualizations templates and hypercubes** with their own sets of dimensions and measures in one component in order to be able to make not only dimensions drills, but also to make “drill into kpi” feature.

{% content-ref url="/pages/-LbOFmedWB0Vk6w0jJKb" %}
[HyperCubes](/properties/hypercubes)
{% endcontent-ref %}

{% content-ref url="/pages/-LbONhzdwADHnwt\_NP-4" %}
[Visualizations](/properties/visualizations)
{% endcontent-ref %}

Using simple drag and drop (or double click) it is easy to bind dimensions and measures with the appropriate cells of a visualization template.

![Dran and drop dimensions and measures](/files/-LbO4Lm0_EhMR7H4Jv2J)

It is easy to preview your template in the edit mode.

![Visualization preview mode](/files/-LbO5WVB0YwE4hKycU3h)

\
Sometimes you need not only to show KPIs based on current selections, but also, in many cases, to activate another data view with an absolutely different set of dimensions and measures.

Just add an unlimited number of data views bonded each with its own set of dimensions and measures, including alternative ones. You can then easily switch between visualization templates in the design mode using properties panel or a special menu in the top left corner.

![Unlimited number of visualization templates](/files/-LbO7k04vW9kt_va-Ub8)

A visualization template can be activated based on user interactions using actions or conditionally, with the help of expression, using the name of the visualization template in “Show” property of the properties panel.

![Show visualization using expression](/files/-LbO80wj94K7x3H2r53o)

&#x20;There is a **predefined set of actions** based on Qlik stable API:

* “**Set variable**” action allows you not only to create and set variables with custom values or using expressions, but also to set variables based on dimensions and measures values of a “current” dataset row
* “**Activate view**” action allows you to interactively visualize one from the predefined sets of visualization templates. Users can activate views manually in accordance with user interactions (clicking and tapping) or conditionally - using expression
* “**Go to sheet**”, “**Next sheet**”, “**Previous sheet**”, “**Go to story**”, “**Go to url**” allows business users to open the appropriate business data context in just one click – sheet, story or even another application
* “**Select values**”, “**Select all**”, “**Select match**”, “**Select alternative**”, “**Select possible**”, “**Select excluded**”,  “**Toggle select**”, “**Clear**”, “**Clear all**”, “**Clear other**”, “**Lock**”, “**Lock all**”, “**Unlock**”, “**Unlock all**”, “**Create bookmark**”, “**Apply bookmark**”, “**Remove bookmark**” set of actions allows you to extend standard based selections model with custom selections scenarios during user interaction with  data visualizations
* “**Reload**”, “**Partial reload**” actions allow you to load data on demand
* “**Export data**” allows you to export data not only from the current data view but also from any predefined master visualization item
* “**Value color**” and “**Mini chart**” actions allow you to represent numbers in one of the graphically predefined ways
* “**Zoom in**” and “**Zoom out**” actions allow you to expand visualization in full screen mode and close it
* “**Sort**” allows you to apply or remove interactive sorting capability for each column separately (in case of table representations)
* “**Alternative dimensions/measures**” action allows you to apply or remove interactive dimensions and measures buttons separately for each data column labels
* “**Searchable dimension**” allows you to apply or remove search functionality for each individual dimension column.

{% content-ref url="/pages/-LbSon-62PM-W9XGvmLV" %}
[Actions](/actions)
{% endcontent-ref %}

You can apply a set of actions on any cell or cells to make the view more interactive.&#x20;

![](/files/-LbO9SqZmof4fYL2prd1)

See Actions section of this documentation for more details.

You can use master item library colors or conditionally control color with the help of expressions (background and text colors), or even easier - apply “Value color” action.

!["Value color" action](/files/-LbO9q3esWdv98b6WQgM)

It is easy to add and customize histogram mini chart in your data view template using “Mini chart action”.

!["Mini chart" action](/files/-LbOA887rTigdzbwK5KW)

Use one from a predefined set of minicharts to visually represent your KPIs. As an example, developers can design tables with waterfall charts in the columns.

![](/files/-Lt0AsedNWmsGQxRMKQu)

See “Mini chart” action of the documentation for more details.

![Mini chart customization](/files/-LbOB5aZfAxL2rHydS0C)

Apart from the advanced features, there are also standard Qlik Sense features available: **dimensions limits**, **null values and data handling**, **calculation conditions**, **background and text colors expressions**, **library color support**, **formatting**, **totals**, **sorting**, etc.


# Properties

PowerKPI properties panel has the following sections:

* HyperCubes
* Data
* Sorting
* Add-ons
* Appearance
* Visualizations
* About

![](/files/-LbOFjd1WmUo4bUtt5xB)


# HyperCubes

It allows you to add and remove data hypercubes which can be configured in “Data”, “Sorting”, “Add-ons” sections.

![](/files/-LbOFti3gqCN6pxFpEFG)

To add one, click “Create” button. Change the hypercube title using “Title” property. Proceed the hypercube configuration on “Data” panel.

To delete the hypercube, expand the appropriate item and click “Delete” button.

“Copy” button allows you to copy the hypercube definition (dimensions and measures), which can be pasted for another item using “Paste” button.

To activate the appropriate hypercube, expand the corresponding item and click “Show”. The "Data" section will contain dimensions and measures for the active hypercube.

{% hint style="info" %}
Only one hypercube can be active at a time.
{% endhint %}


# Data

It allows you to add dimensions and measures (including alternative ones).

![](/files/-LbOGKA4rbf7C0OfncWE)

Each dimension item has the following features:

![Dimension properties](/files/-LbOGNxt5gr9MsK_e1Sg)

Apart from standard options, there is a possibility to set background/text color, an icon (symbol) and tooltip using expressions. The same thing can be done for a measure.

![Measure properties](/files/-LbOG_eP_oHHdSpT3pNO)


# Sorting

It allows you to sort your data using standard sorting options.&#x20;

{% hint style="info" %}
See Qlik Sense documentation for more details.

<https://help.qlik.com/en-US/sense/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-sorting-of-visualization.htm>
{% endhint %}

![](/files/-LbOGprP7qUvMPD2yE6U)


# Add-ons

It allows you to suppress zero values and add calculation condition:

* **Include zero values**: When unselected, measures that have the value ‘0’ are not included in the presentation. If there is more than one measure value, all the measure values must have the value ‘0’ to be excluded from the presentation.
* **Calculation condition**: Specify an expression in this text field to set a condition that needs to be fulfilled (true) for the object to be displayed. The value may be entered as a calculated formula. For example: count(distinct Team)<3. If the condition is not fulfilled, the message or the expression entered in Displayed message is displayed.

  A calculation condition is useful when a chart or a table is very big and makes the visualization slow to respond. A calculation condition can then help so that, for example, an object is not shown until the user has filtered the data to a more manageable level by applying selections.

![](/files/-LbOHz-nb7F6af5mLo-C)

See Qlik Sense documentation for more details.


# Appearance

![](/files/-LbOJ62hFEmQ0RGTkAtD)

It allows you to set title, subtitle and footnote.

![General](/files/-LbOJ7kkMAX_9A2abqML)

“Alternate states” subsection can be used to apply an alternate state for an object. See Qlik Sense documentation for more details.

![Alternative states](/files/-LbOJC3tRnn45-QMDaXU)

“Settings” subsection allows you to disable and hide “Export”, “Export data”, “View data” context menu options.&#x20;

<figure><img src="/files/pTLmSVzTN4iBAOUYzWgL" alt=""><figcaption><p>Custom settings</p></figcaption></figure>

![Visualization context menu](/files/-LbOKwh3YbsOX_Bou0c9)

It also allows you to replace url in a browser adding a hashtag link of the active visualization using History API. Such option can be activated by setting "Replace "URL".

![Replace "URL"](/files/-LbOMdxyalYw-SZJ2JpR)

With custom themes developers can style Power KPI visualizations by applying custom classes using the "**CSS classes**" parameter.

<figure><img src="/files/dGITppbd3KPaOpQJ6tL3" alt=""><figcaption></figcaption></figure>

For example, by defining the following classes inside a custom theme, you can achieve the following effects:

```css
.qv-object-powerkpi .powerkpi-theme {
  background: linear-gradient(#f2f2f2, white) !important;
  border: solid 1px #f2f2f2;
  border-radius: 5px;
}

.qv-object-powerkpi .powerkpi-theme:hover  {
  background: linear-gradient(#CFF0F8, white) !important;
  border: solid 1px #3b93bd;
}
```

<figure><img src="/files/jhKmdu2QlZM1PWXdla4h" alt=""><figcaption></figcaption></figure>


# Visualizations

To add a visualization, click “Create” button. Visualization template editor will open and it will allow you to visually create a visualization template.

![](/files/-LbONrV8d3hG1xRUl97t)

“Title” parameter can be used to change the visualization title. It can be used in "Show" parameter. &#x20;

“Show” parameter can be used to show the corresponding visualization based on expression and state. The expression should return a string value equal to a visualization template title which will be shown automatically.

“Data” parameter allows you to bind the template to the corresponding hypercube.&#x20;

“Edit template” button allows you to open the editor and load to edit the corresponding visualization template.

![](/files/-LbOPgYb5pTP2hPYFDZA)

“Library colors” option allows you to use library colors applied on master items.&#x20;

{% hint style="info" %}
See Qlik Sense documentation for more details.

<https://help.qlik.com/en-US/sense/Subsystems/Hub/Content/Sense_Hub/Colors/assigning-colors-to-master-items.htm>
{% endhint %}

"Delete" <img src="/files/-LbOPTDg-xSmqxrBPxj4" alt="" data-size="original"> button of each item can be used to delete the particular visualization.

{% content-ref url="/pages/-LbRgfXNBdaRcitap7W\_" %}
[Visual editor](/visual-editor)
{% endcontent-ref %}


# About

It contains a component version and allows you to activate the component if it is used on Qlik Sense Enterprise.

![](/files/-LbRe79PnG_cmZQ9sNWQ)

“Activate” button will be shown only if the component has not been activated. See “Activation” section of the documentation for more details.

{% content-ref url="/pages/-Lb8owLeyNnTFjteECLD" %}
[Activation](/activation)
{% endcontent-ref %}

If the component was activated, it shows version info, license details, such as expiration date, or if it is a trial activation.

![](/files/-LbRg2CbsajkYvfZxkgg)

In Qlik Sense Desktop only version info is shown.

![](/files/-LbRgIlvhkLdlbFdz4Bg)


# Visual editor

Visual editor allows you to create and edit visualization templates, which can be added using properties panel of the component (see section “[Visualizations](/properties/visualizations)” of the documentation).

{% content-ref url="/pages/-LbONhzdwADHnwt\_NP-4" %}
[Visualizations](/properties/visualizations)
{% endcontent-ref %}

Spreadsheet-like visual editor allows developers to visually design stunning-looking, responsive and interactive visualizations: from simple kpi to interactive fancy and stunning-looking "table-like" data views (with the ability to build custom multiline detailed views).

![](/files/-LbRhDd8NCQD7HcyKD_p)

The "Dimensions/Measures" panel automatically opens up when new visualization created. "Apply all" button allows developers to apply and use all dimensions and measures configured on the data sections of the property panel. It also applies predefined set of actions like "Sort", "Alternative dimensions/measures", "Searchable dimension", "Select dimension value", etc.

![](/files/-M0wZSpGDzmu6WVLFUN-)

To create a custom visualization template, you should add columns/rows, merge cells, resize columns and rows in accordance with the design requirements.  Quick add buttons allow to easily add columns / rows.

![](/files/-M0wovK4otw0Fp2vJhOh)

To change column width it needs to hover mouse pointer over a divider between columns and holding left mouse key change the width by dragging it to the right or to the left (to increase or decrease column width). In a same way a row height can be changed.

![](/files/-MBh5DwP1f-Oca9may8W)

It is possible to set or change column width (or row height) by clicking a special icon or width label shown over the column number (to the left of a row number). Popup window will arise and help to set, change or clear column width (or row height).

![](/files/-MBh6SOqxDvWy7642ytC)

You should bind dimensions and measures with the custom template, and then apply various style options – fonts, alignment, borders, colors, backgrounds. To bind a dimension or measure with the template just double click on a cell or use **Ctrl + Space** (**⌘ + Space**)  to open dimensions and measures popup menu and then select an appropriate item. As an alternative, developers can use "Dimensions/Measures" [data](/visual-editor/data) panel.

![](/files/-M0wndF9Ge0BvCujpCXW)

Editor context menu can be used to increase a developer productivity. Toolbar panel can also be collapsed to increase the working area and expanded again if need it.

![](/files/-M0wXSb3SctogWsZFX3X)

To preview visualization, click “Preview” tab at the top of the toolbar.&#x20;

To open up the PowerKPI editor a developer should click on a button <img src="/files/-M0wIsZpi7ajFMFFdZTX" alt="" data-size="original"> in the top left corner of the component or, as another option, open Visualizations sections on the property panel and then expand an appropriate  visualization and click on the "Edit template" button.

![](/files/-M0wVV6wew4tdqFZf3H6)

In the top left corner of the toolbar panel there is a button which allows a quick and easy switch between visualization templates (if several visualizations have been created in one component).

![](/files/-LbRkC1BlOuvrU7NZcD9)

“Custom objects” tab allows you to preview and apply a predefined visualization template.

![](/files/-LbRhYSkXQMmKZyVPUkw)

Button <img src="/files/-M10BQXna6_ZMgKIT9Cm" alt="" data-size="original"> on the toolbar panel of the editor allows you to open up a menu, which allows copying, exporting and importing designed templates as well as opening template properties panel ("Show properties" menu item).&#x20;

![](/files/-M109_c4zLDDC5CxZXCk)

A developer can use "Export" button to export developed template into a file, and then import it in another component using "Select file..." menu item. In such a way, developers can create own visualization templates library in the form of files on a drive.

To open a template properties panel use "Show properties" menu item.

![](/files/-M10AMRxDyd9cQFgDDsu)

Properties panel allows to apply “Fit to height” parameter, which will shrink or stretch a visualization to fit the occupied by the component area. It is recommended to set this option on visualization templates without dimensions only.

"Scrolling" option allows to choose between Native or Virtual scrolling mode for table&#x73;**.** Native mode is used when "Scrolling" option is set. Native mode uses native pageable scroll in which the  "Load more" or "Load previous" buttons can be used to load the next or previous page of the data, while virtual scrolling mode allows to scroll the entire dataset.

“Background image” allows adding an image as a background for templates.&#x20;

“Thumbnail” allows setting a thumbnail for templates.

"Fit to height" mode can also be applied with the help of a quick button in the visual editor (see image below).&#x20;

![](/files/-M0wvM356PZPJVbiwxS9)

The toolbar also has buttons to “undo/redo” changes and a “Save” button, along with template and hypercube titles.

![](/files/-LbRivNVQAupjTG9mMvS)

The visualization template is displayed in a spreadsheet-like view with cells below the toolbar.

![](/files/-LbRj0uAOMTbuFHQNsMI)

To be able to merge cells, you should select cells from the top left cell to the bottom right cell holding the left mouse button.

![](/files/-LbRj8pxpIid7jM5gXvM)

To apply some operations on several cells, you should select them holding "Ctrl" key.

To select an entire column, you should click the column header (the cell with the column number). In such a way, by clicking the row number, you can also select the entire row. It is possible to select several columns/rows by selecting the corresponding column/row headers.

{% hint style="info" %}
To increase developer's productivity the editor context menu and/or keyboard shortcuts can be used. See [Visual Editor keyboard shortcuts](/visual-editor/visual-editor-keyboard-shortcuts) for more details.
{% endhint %}

Main operations are grouped by sections on the toolbar:

![](/files/-LbRjvDMKwoq3LDrVrAU)

“**Cells**” operations allow you adding/removing cells, as well as changing cells settings;

{% content-ref url="/pages/-LbRlUa1ShgOukexAepS" %}
[Cells](/visual-editor/cells)
{% endcontent-ref %}

* “**Data**” section contains operations which will allow you to bind data items (dimensions and measures), apply actions, insert text, icons, images;

{% content-ref url="/pages/-LbRzcabCiF36riPY0Ub" %}
[Data](/visual-editor/data)
{% endcontent-ref %}

* “**Borders**” will allow you to set borders and border styles on cells;

{% content-ref url="/pages/-LbSD9yXj01RvR-NRetX" %}
[Borders](/visual-editor/borders)
{% endcontent-ref %}

* “**Alignment**” will allow you to align data horizontally and/or vertically;

{% content-ref url="/pages/-LbSLj1-LFxCVqIJH5S9" %}
[Alignment](/visual-editor/alignment)
{% endcontent-ref %}

* “**Font**” will allow you to apply font, size and styles/text behavior options.

{% content-ref url="/pages/-LbSRnmVQBhx5D\_DGCjy" %}
[Font](/visual-editor/font)
{% endcontent-ref %}


# Cells

“Cells” section of the toolbar allows you to add/insert/remove rows, columns, merge/split cells, change background color and even copy styles settings between cells.

![](/files/-LbRl_mmb6kw_SAMrbmr)

It has the following buttons:

* <img src="/files/-LbRlkvgwsrN7yp0_VVv" alt="" data-size="original"> - add row;
* <img src="/files/-LbRlrQFLPpjKWGlsZMC" alt="" data-size="original"> - add column;
* <img src="/files/-LbRlx_ol-Pb2fO4Q2YF" alt="" data-size="original"> -&#x20;
  merge several selected cells;
* <img src="/files/-LbRmAOBmAfzYEF9r_p0" alt="" data-size="original"> -&#x20;
  split merged cells;
* <img src="/files/-LbRmJSuPujKcdWHk2TD" alt="" data-size="original"> -&#x20;
  insert row and/or column depending on current cells selections (it will insert one row above the current selected one, or insert one column before the selected one, or insert one row and one column before the selected cell);
* <img src="/files/-LbRme0RpXBdxOkyBJz6" alt="" data-size="original">&#x20;
  \- copy styles settings from the current selected cell and apply them on the cell which will be selected;
* <img src="/files/-LbRmqfpbED6C-hINIzi" alt="" data-size="original"> -&#x20;
  change background color on the selected cell/cells

To be able to merge cells, you should select cells from the top left cell to the bottom right cell holding the left mouse button.

![](/files/-LbRj8pxpIid7jM5gXvM)

To apply some operations on several cells, you should select them holding "Ctrl" key.

To select an entire column, you should click the column header (cell with a column number). In such a way, by clicking the row number, you can also select an entire row. It is possible to select several columns/rows by selecting the corresponding column/row headers.

To quickly add a copy of columns or rows, select the appropriate columns or rows and then click the corresponding button <img src="/files/-LbRlrQFLPpjKWGlsZMC" alt="" data-size="original"> (to add columns) or <img src="/files/-LbRlkvgwsrN7yp0_VVv" alt="" data-size="original"> (to add rows).

![](/files/-LbRyUm0hYQ7HwjdioF_)


# Data

“Data” section of the toolbar contains the following buttons:

![](/files/-LdEicVwn03yNk2Xcsqe)

{% hint style="info" %}
Dimensions / Measures
{% endhint %}

* ![](/files/-LbRzoPxxyKlwSkW1b_J)**open data panel** contains dimensions and measures which can be bonded to cell using simple drag-and-drop:

![](/files/-LbS-33CohTrj4WpNlDx)

Data panel will show all dimensions (if any were used) and measures which were added to Data section of the properties panel.

Each dimension and measure contain “Label” ![](/files/-LbS-QO2oFPwT56Q_bt-) button, which will allow you to bind dimension/measure label within the template. Each measure, except the “Label” button, contains “Totals” ![](/files/-LbS-Y3Lc35XGWIpq_pl) button. It allows you to bind the total calculated for appropriate measure within the template. It makes sense to use “Totals” when constructing table-like templates.

To bind a measure/dimension with the appropriate cell, select a cell and click the appropriate measure/dimension. Or, if you prefer, drag data item (dimension, measure, label or total) onto the template and drop it on the appropriate cell. In such a way you will bind your data assets to the designed template.

![](/files/-LbS73eGVFPdeA78xp3V)

{% hint style="info" %}
Delete
{% endhint %}

* ![](/files/-LbS0ARqXLgZYCIB4BBV)**delete selected cell/cells binding** (dimensions, measures, text, icons, images etc.)

![](/files/-LbS7vpunjSblwb2UP9h)

{% hint style="info" %}
Actions
{% endhint %}

* ![](/files/-LbS0HzsWnrlQ20TEBd0) **open actions panel** allows you to apply actions on the selected cell

![](/files/-LbS0XY3ALdTn2cEKYjl)

{% hint style="info" %}
See “Actions” section of the documentation for more details.
{% endhint %}

{% content-ref url="/pages/-LbSon-62PM-W9XGvmLV" %}
[Actions](/actions)
{% endcontent-ref %}

{% hint style="info" %}
Tags
{% endhint %}

* ![](/files/-LbS5wDNbwiMSH-ZIawr) **open “Tags” panel** allows you to make a markup of template to be able to build table-like views (it makes sense to use only for table-like views with dimensions)

![](/files/-LbS12SAtB-koyRE_Cbb)

For table-like templates you will have to select row numbers which correspond to the details rows, and then click on “Rows” tag ![](/files/-LbS1ASqc-3RJZOLsYg_).

In such a way you will always have to tag details rows for table-like templates:

![](/files/-LbS1j4leFRcbne5ej8Y)

If you need to change your markup, you can click on ![](/files/-LbS2VPZLJzijNBT1HDP) icon to remove the markup and tag your rows in a different way.

![](/files/-LbS2N7TNVxw3cOMqHXQ)

{% hint style="info" %}
Text
{% endhint %}

* ![](/files/-LbS3L0BUWwqTI5aLHgO) **insert any text into the selected cell**

![](/files/-LbS4zxJkkO2D1lOKIfc)

{% hint style="info" %}
Icons
{% endhint %}

* ![](/files/-LbS3WvNkkTvakU1lyOy) **insert an icon into the selected cell**

![](/files/-LbS4SbvofXjR4KLYeJJ)

It allows you to choose an icon, position (left, right or replace the content in a cell), icon font and font size.

In case of the "Replace" option it completely replaces the cell content. It makes sense to select such option on the cell with linked measure. In such a way, icon will be displayed instead of the measure's value, but it will be possible, for example, to use the Value Color action that will change the icon color based on the measure's value. So, you will be able to get the result as it is shown on the image below, when the measure's values were replaced with the red or green "dot" icon.

![](/files/-LdEeU6OwWDkueE8yYKk)

{% hint style="info" %}
See Demo Apps for more details
{% endhint %}

{% content-ref url="/pages/-LdELleT1sT6986TeNLa" %}
[Demo Apps](/demo-apps)
{% endcontent-ref %}

{% hint style="info" %}
Images
{% endhint %}

* ![](/files/-LbS5Pbmj9j9gmlpZncm)**insert an image** in the selected cell from the content library

![](/files/-LbS8EcTkWZq93llWwEa)

{% hint style="info" %}
See "Content libraries" in Qlik help for more details

<https://help.qlik.com/en-US/sense/Subsystems/ManagementConsole/Content/Sense_QMC/content-libraries-overview.htm>
{% endhint %}

![](/files/-LbSAMP1kSkIx2PbJ4w3)

Image ![](/files/-LbSAfwTwcCFserwAlCO) button will allow you to select an image from one of the predefined content libraries.

It is also possible to embed an image in a visualization template using BASE64 encoding.

![](/files/-MBhR4t_MUiyk6HpmkFu)

Alternatively, if the selected cell contains data binding (dimension/field with images links), you might want to select “From a field” option.

![](/files/-LbSBzPoCOJLlF_Iyq6P)

“Sizing” parameter allows you to choose one of the predefined values to size image accordingly inside the selected cell.

Using “Position” parameter, you might position an image in accordance with your requirements inside the selected cell.

{% hint style="info" %}
Master items
{% endhint %}

To embed a master visualization in a cell click on a toolbar button  <img src="/files/-MC6xsQC9xEU9oqcpi8S" alt="" data-size="line"> and select a master visualization in the popup menu.&#x20;

![](/files/-MBhhwCH-kVq_TGbvJXC)

It also possible to use the context menu for the selected cell (select a cell and click on the right mouse key), which allows to change the interaction and selection options for the master object, or delete the embedded master object.

![](/files/-MC6zToKde7LfQjks7FV)


# Borders

“Borders” section of the toolbar contains the following buttons:

![](/files/-LbSDIHRqSf9RD1EVeW7)

* <img src="/files/-LbSDUPf3lxS6fvqC-ST" alt="" data-size="original"> -&#x20;
  insert borders on each side of the selected cell/cells
* <img src="/files/-LbSDaWS6kXIjftjq1jM" alt="" data-size="original"> -&#x20;
  insert border at the top of the selected cell/cells
* <img src="/files/-LbSDetpW1O6xq4QN8vF" alt="" data-size="original"> -&#x20;
  insert border at the bottom of the selected cell/cells
* <img src="/files/-LbSDkEibnsiWoS7nADC" alt="" data-size="original"> -&#x20;
  insert left border for the selected cell/cells
* <img src="/files/-LbSE4k7ZW2LfMfg7FN1" alt="" data-size="original"> -&#x20;
  insert right border for the selected cell/cells
* <img src="/files/-LbSE9fYhQPN7XJvCX7j" alt="" data-size="original"> -&#x20;
  remove borders on currently selected cell/cells
* <img src="/files/-LbSEGH-OwhkyrnfFr_e" alt="" data-size="original"> -&#x20;
  change border line type and line width
* <img src="/files/-LbSEKPCP9DxV5N6rwQX" alt="" data-size="original"> -&#x20;
  change border color

![](/files/-LbSHM8TTciwWOLrArJ7)


# Alignment

“Alignment” section of the toolbar contains the following buttons:

![](/files/-LbSLs-Y82K-5S-w6Nm5)

* <img src="/files/-LbSN6LCFGnoaUwKyOOL" alt="" data-size="original"> - align cell/cells content left
* <img src="/files/-LbSNDLLENCU9iyB_agh" alt="" data-size="original"> - center cell/cells content
* <img src="/files/-LbSNUdxcy6Mi05xsR0k" alt="" data-size="original"> - align cell/cells content right
* <img src="/files/-LbSNbc5tddDyGv9OiU1" alt="" data-size="original"> - vertically align cell/cells content to the top
* <img src="/files/-LbSMsFNvKNFmXAT1rYU" alt="" data-size="original"> - vertically center cell/cells content
* <img src="/files/-LbSMznP3IRuv3wwCaRl" alt="" data-size="original"> - vertically align cell/cells content to the bottom

![](/files/-LbSPDwhin992fkRdqHZ)


# Font

“Font” section of the toolbar contains the following buttons:

![](/files/-MC70OddROwHMNqnNW8c)

* <img src="/files/-LbSS3FeXE6fD3dwYS98" alt="" data-size="original"> - make text bold
* <img src="/files/-LbSSBDANdAoLXtCX6bZ" alt="" data-size="original"> - make text italic
* <img src="/files/-LbSSId9tlryzu0FYkLc" alt="" data-size="original"> - make text underlined
* <img src="/files/-LbSSWzXsRzloFxgtEtz" alt="" data-size="original"> - select font size

![](/files/-LbSk4u8DmG9OEMs5zKn)

It allows you to select or enter the text size. There are several ways to specify the font size, including keywords or numerical values for pixels or ems.

{% hint style="info" %}

See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-size> for more details
{% endhint %}

* <img src="/files/-LbSSbQaXyVB0C_VE_HU" alt="" data-size="original"> - make text multiline
* <img src="/files/-LbSSiDh7WlroMnwep7G" alt="" data-size="original"> - make text responsive and, thus, the text will always fit the cell size (this option should always be used for responsive visualization templates)

{% hint style="info" %}
If you make the text responsive and specify the font size at same time, it will be responsive but not more than the specified size.
{% endhint %}

* <img src="/files/-MC71VrTB5Mox2UOWW3p" alt="" data-size="original"> - allows to set a font tag which defines global font size context. It will apply the same font size using same font in the PowerKPI objects if they have same size on a sheet as well as  the same cells size in the visualization templates. This button will be shown if the responsive option is set by using the <img src="/files/-LbSSiDh7WlroMnwep7G" alt="" data-size="original">toolbar button.

![](/files/-MBiOoS800G7a1rIaKjW)

![Same font size when font tags have been applied on the Margin YTD and Orders YTD KPIs](/files/-MBiVAInDB4m-4tIX3mO)

![Different font size without font tags](/files/-MBiTsLSLvThj0cvdHQe)

* <img src="/files/-LbSSoJNCRnsiEFZsEK2" alt="" data-size="original"> - clear applied font styles
* <img src="/files/-LbSSu1zBlG3IDWwj0EN" alt="" data-size="original"> - set font color
* <img src="/files/-LbST-4gor2SaIQwmmue" alt="" data-size="original"> - select and apply font on the selected cell/cells

![](/files/-LbSkWhiIRO3c68SCINI)

Fonts with special icon <img src="/files/-LbSkjbgxouoqXFylnKz" alt="" data-size="original"> to the right from the font name specify that the font comes as an external font included with PowerKPI component, and thus, it will be loaded and used automatically.

Fonts without <img src="/files/-LbSkjbgxouoqXFylnKz" alt="" data-size="original"> icon should be available (installed) on the user computer. If the specified font isn’t available on the client side, the default web browser font will be used instead.

![](/files/-LbSmbQYsVvJh7vOaxYU)


# Visual editor keyboard shortcuts

Keyboard **arrows** can be used to navigate between cells. Hold **Shift** and use **arrows** to select cells.

**Ctrl + Alt + P**  / **⌘ + Alt + P** - preview mode;

**Ctrl + Alt + E**  / **⌘ + Alt + E** - edit mode (for selected component);

**Shift + Delete** / **Ctrl + Delete** / **⌘ + Delete** - delete (unlink) cells data;

**Insert / Ctrl + Insert** / **⌘ + Insert** - insert a column and a row before selected cell;

**Shift + Insert** - add a row;

**Ctrl + Shift + Insert / ⌘ + Shift + Insert**  - add a column;

**Ctrl + M** / **⌘ + M** - merge selected cells;

**Ctrl + Alt + M** / **⌘ + Alt + M** - split selected cells;

**Ctrl + Alt + C**  / **⌘ + Alt + C** - copy cell content (including styling options and actions);

**Ctrl + Alt + V** / **⌘ + Alt + V** - paste copied cell content;

**Ctrl + Alt + Z** / **⌘ + Alt + Z -** undo edits;

**Ctrl + Alt + Y** / **⌘ + Alt + Y** - redo edits;

**Ctrl + Space** / **⌘ + Space** - open dimensions and measures popup menu;

**Ctrl + B** / **⌘ + B** - set bold font style;

**Ctrl + I** / **⌘ + I** - set italic font style;

**Ctrl + U** / **⌘ + U** - set underline font style;

**Ctrl + L** / **⌘ + L** - left horizontal text alignment;

**Ctrl + R** / **⌘ + R** - right horizontal text alignment;

**Ctrl + J** / **⌘ + J** - center horizontal text alignment;

**Ctrl + Alt + L** / **⌘ + Alt + L** - top vertical text alignment;

**Ctrl + Alt + R** / **⌘ + Alt + R** - bottom vertical text alignment;

**Ctrl + Alt + J** / **⌘ + Alt + J** - middle vertical text alignment;

**Ctrl + Alt + F** / **⌘ + Alt + F** - fit text inside a cell (autosize text mode);

**Ctrl + Shift + U** / **⌘ + Shift + U** - delete (unlink) cells data;

**Ctrl + Shift + L** / **⌘ + Shift + L** - open/close "Dimensions / Measures" panel;

**Ctrl + Shift + A** / **⌘ + Shift + A** - open/close "Actions" panel;

**Ctrl + Shift + S** / **⌘ + Shift + S** -  open/close tags panel.


# Actions

There is a **predefined set of actions** based on Qlik stable API:

* “**Set variable**” action allows you not only to create and set variables with custom values or using expressions, but also to set variables based on a “current” dataset row dimensions and measure values
* “**Activate view**” action allows you to interactively visualize one from predefined sets of visualization templates. Users can manually activate views in accordance with user interactions (clicking and tapping) or conditionally - using expression;
* “**Go to sheet**”, “**Next sheet**”, “**Previous sheet**”, “**Go to story**”, “**Go to url**” allow business users in just one click to open the appropriate business data context – sheet, story or even another application;
* “**Select values**”, “**Select all**”, “**Select match**”, “**Select alternative**”, “**Select possible**”, “**Select excluded**”, “**Toggle select**”, “**Clear**”, “**Clear all**”, “**Clear other**”, “**Lock**”, “**Lock all**”, “**Unlock**”, “**Unlock all**”, “**Create bookmark**”, “**Apply bookmark**”, “**Remove bookmark**” set of actions allows you to extend standard based selections model with custom selections scenarios during user interaction with data visualizations;
* “**Reload**”, “**Partial reload**” actions allow you to load data on demand;
* “**Export data**” action allows you to export data not only from the current data view but also from any predefined master visualization item;
* “**Value color**” and “**Mini chart**” actions allow you to represent numbers in one of graphically predefined ways;
* “**Zoom in**” and “**Zoom out**” actions allow you to expand visualization in full screen mode and close it;
* “**Sort**” action allows you to apply or remove interactive sorting capability for each column separately (in case of table representations);
* “**Alternative dimensions/measures**” action allows you to apply or remove interactive dimensions and measures buttons separately for each data column labels;
* “**Searchable dimension**” action allows you to apply or remove search functionality for each individual dimension column;
* **"Show dialog"** allows you to use a custom popup dialog with a content formatted using HTML and embedding master visualizations support;
* **"Show tooltip"** allows you to create custom tooltips with possibility to use HTML;
* **"Show sidebar"** allows you to show a sidebar with some content;
* **"Show popover"** allows you to show a popup window with some content;
* and others.

{% hint style="info" %}
See the detailed description of the actions in the following sections.
{% endhint %}

Click <img src="/files/-LbS0HzsWnrlQ20TEBd0" alt="" data-size="original">toolbar  button to **open actions panel**.

![](/files/-LbT3NHdd8-Ujfhu3D9p)

There are object-level actions ("General" tab) and cell-level actions ("Cells" tab). When the user clicks on a visualization, the object-level action fires first, followed by the cell-level actions.

<figure><img src="/files/mZfXmcTFOHl5HRxPimPf" alt=""><figcaption></figcaption></figure>

You can apply the set of actions to any cell or cells to make the visualization more interactive and functional.

To add an action, click <img src="/files/-LbT4-8aA0is-ZTbGAvW" alt="" data-size="original">button on "Actions" panel. You may apply as many actions as you want on any cell.

{% hint style="info" %}
Some actions are applicable on a cell with a bonded dimension, some - with a measure, and there are actions which can be applied on any cell.
{% endhint %}

Cells with the applied actions will have <img src="/files/-LbT3kRW_Kd1QEbiRpPA" alt="" data-size="original">special icon in the top left corner when “Actions” panel will be shown.

You can drag an action to change the execution order. Put the cursor on the <img src="/files/-LbTV3nM5l3kmgo2_wdN" alt="" data-size="original"> drag bars and drag the action to rearrange the execution order.

![](/files/-LbTTMUyGKvarcdX55-I)

To remove an action from the applied actions list, click <img src="/files/-LbTW2SRZncsKKBPut5o" alt="" data-size="original">.


# Apply symbol

The action will conditionally apply a symbol (icon) for a cell with a measure and the one of the predefined algorithms: “Positive/Negative” or “Less than 100%”.

### Positive/Negative

"Positive/Negative" algorithm can be used to show icons for postive, negative and zero values by setting appropriate icons.

![](/files/-M0wywScFDNxsP7xzb42)

### Less than 100%

"Less than 100%" algorithm can be used to show icons for values less than 100% and for values greater or equal to 100% by setting appropriate icons.

![](/files/-M10t3HNoz5nXa2H5-Cc)

### Expression

The "Expression" option  allows to map the "Symbol" expression's values to particular icons. To be able to use such option a "Symbol" expression should be set for a measure using the properties panel:

![if("± SALES %" < 0, 'down', 'up')](/files/-MC7CYJy0fqL_yuPrHxZ)

After binding the measure with a cell (in our case the "± SALES %" measure) it is possible to map the "Symbol" expression's values to particular icons:

![](/files/-MBiI0H-H1TcRvGWiFvK)

You can add as many mapping items as needed by clicking the button<img src="/files/-MC7FRevq-LMYzSCovQK" alt="" data-size="original"> next to the "Edit mappings" label. For each added row you need to specify a value (by entering it in the input text field) and an icon (by selecting it from the icon popup menu).


# Apply styles

The action will conditionally apply style formatting options on a cell. Currently, font styling options like bold, italic, underline, size, color and background color are supported. Those styles will be only applied if the calculation condition measure returns true. As an alternative option, if you specify a measure in the calculation condition parameter that returns non-boolean values you can also specify any value in the "Value" parameter. In such a case, specific styles will be applied only if the "Value" equal to calculated condition value. The "Value" parameter is optional.

![](/files/-M0wx30RGAgtkGRWxTfh)


# Set Variable

The action will set a variable value based on the manually entered text/expression or selected dimension/measure.&#x20;

{% hint style="info" %}
Variable will be created during the action execution if it was not created before.
{% endhint %}

![](/files/-LbT6J0T79ELsINtixc-)

In the “**Variable**” parameter you can specify a variable name by selecting a variable from the list by clicking the <img src="/files/-LbT6YDCcYxxkaCKf2PX" alt="" data-size="original"> button or entering it manually.

A Qlik expression can be used in the “Variable” parameter by prefixing a variable with an equals sign, e.g.:

```
=if(someCondition, 'var1', 'var2')
```

In the “**Value**” parameter you can manually enter a value or select a dimension/measure by clicking the<img src="/files/-LbT7mBv6m1TKfPcUw97" alt="" data-size="original"> special button. A Qlik expression can be used by prefixing a value with an equals sign.


# Activate View

The action will activate the specified visualization.

![](/files/-LbTBX2jUYIc1WHL3rR6)

Click the<img src="/files/-LbTBaFexXzBP0CnJvkm" alt="" data-size="original"> special button to select a visualization.

![](/files/-LbTLy4Is71zK7RYQsrt)

{% hint style="info" %}
See "**Visualizations**" section of the documentation for more details about creating visualizations.
{% endhint %}

{% content-ref url="/pages/-LbONhzdwADHnwt\_NP-4" %}
[Visualizations](/properties/visualizations)
{% endcontent-ref %}


# Go to sheet

The action will navigate a user to a given sheet in the current app

![](/files/-LbTMOrzh8wThAYSbJnL)

Select a “Sheet” by clicking <img src="/files/-LbTMXuGdmqRU2MnFTLq" alt="" data-size="original"> special button. The sheet object ID will be used as a value.

A Qlik expression can be used in the “Sheet” parameter by prefixing it with an equals sign.


# Next sheet

The action will navigate a user to the next sheet in the current app.

There are no parameters available.


# Previous sheet

The action will navigate a user to the previous sheet in the current app.

There are no parameters available.


# Go to story

The action will navigate a user to a given story in the current app.

![](/files/-LbTNycQnRWHUwK4I5wm)

Select a “Story” by clicking the <img src="/files/-LbTO56FfmPIIsVamXoF" alt="" data-size="original"> special button. The story ID will be inserted as a value.

A Qlik expression can be used in the “Story” parameter by prefixing it with an equals sign.


# Go to URL

The action will navigate a user to a given URL.

![](/files/-LbTRMeasDFOpmcK1h0T)

A URL should contain a schema (http\://, https\://) to be able to open absolute URLs. If the schema isn’t specified, it will try to open a relative path.

Optional “Name” parameter can be used to specify the name of the browsing context (window, [\<iframe>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) or tab) into which to load the specified resource.

To open url in the same window you can specify **\_self** as a value in the "Name" parameter.

{% hint style="info" %}

See <https://developer.mozilla.org/en-US/docs/Web/API/Window/open> for more details.
{% endhint %}

Qlik expressions can be used in both parameters by prefixing each of them with an equals sign.


# Select values

The action will select specific values in a field.

![](/files/-LbTYfH2oLlnjJYEqery)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original">button.

The “Value” parameter can contain a single value or several values separated by a semicolon.

The “Toggle” parameter will toggle selection from a "selected" to a "not selected" state and vice versa.

The “Soft lock” parameter will allow you to override the locked selections.

Qlik expressions can be used in “Field” and “Value” parameters by prefixing each of them with an equals sign.


# Select all

The action will select all values in a field.

![](/files/-LbWryjW7MuTSjBN8yyg)

Enter a field name manually or select it by clicking <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.&#x20;

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.

The “Soft lock” parameter will allow you to override the locked selections.


# Select match

The action will select matching field values.

![](/files/-LbWsSp4guTjwG5HK8q8)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

The “Value” parameter can contain a mask. Special symbol **\*** can be used in a mas&#x6B;*.* The  **\*** symbol means any combination of characters. E.g. to find items containing ‘air’ substring the following mask can be used: \*air\*. But if you need items which start with ‘air’ substring, the following mask can be used: air\*. The operation is case insensitive.

The “Soft lock” parameter will allow you to override the locked selections.

Qlik expressions can be used in “Field” and “Value” parameters by prefixing each of them with an equals sign.


# Select alternative

The action will select alternative values in a field.

![](/files/-LbWtSsl9fpQmwu9YZvS)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original">button.

The “Soft lock” parameter will allow you to override the locked selections.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Select possible

The action will select possible values in a field.

![](/files/-LbWu0rskBFA5lGqdxV9)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original">button.

The “Soft lock” parameter will allow you to override the locked selections.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Select excluded

The action will select excluded values in a field.

![](/files/-LbWuwX6umQWAZr1p459)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original">button.

The “Soft lock” parameter will allow you to override the locked selections.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Toggle select

The action will toggle a field selection.

![](/files/-LbWv7UvhyfmvKW-AMQj)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

The “Value” parameter can contain a mask. Special symbol **\*** can be used in a mas&#x6B;*.* The  **\*** symbol means any combination of characters. E.g. to find items containing ‘air’ substring the following mask can be used: \*air\*. But if you need items which start with ‘air’ substring, the following mask can be used: air\*. The operation is case insensitive.

The “Soft lock” parameter will allow you to override the locked selections.

Qlik expressions can be used in “Field” and “Value” parameters by prefixing each of them with an equals sign.


# Clear

The action will clear a field selection.

![](/files/-LbWvVPFLgvyRAY8QY_6)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Clear other

The action will clear all fields except the selected one.

![](/files/-LbWvp_kHTf3ug6w6R6P)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

The “Soft lock” parameter will allow you to override the locked selections.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Clear all

The action will clear all selections in all fields of the current Qlik Sense app.

There are no parameters available.


# Lock

The action will lock a field selection.

![](/files/-LbWwQux3Itnsooi0mEo)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Unlock

The action will unlock field selections.

![](/files/-LbWwalvXa4BWFMj_2S7)

A Field can be entered manually or selected by clicking the <img src="/files/-LbWqqA3M4yuV4ioisW9" alt="" data-size="original"> button.

A Qlik expression can be used in the “Field” parameter by prefixing it with an equals sign.


# Lock all

The action will lock all selections.

There are no parameters available.


# Unlock all

The action will unlock all selections that have previously been locked.

There are no parameters available.


# Create bookmark

The action will create a bookmark based on the current selection.

![](/files/-LbWxBAIuXMbldPOMXox)

The "Title", "Description" and "Sheet" parameters can be specified.

The "Sheet" parameter is not required. If it has been specified, it will open the specified sheet during the action execution.

Qlik expressions can be used in parameters by prefixing each of them with an equals sign.


# Apply bookmark

The action will apply a bookmark.

![](/files/-LbWxj3dLTY8I58aBAaV)

A Bookmark can be selected by clicking the<img src="/files/-LbWxtcA-vc1Xk0LKelG" alt="" data-size="original">button.

A Qlik expression can be used by prefixing it with an equals sign.


# Remove bookmark

The action will remove a bookmark.

![](/files/-LbWyEy36-08gqrNALXA)

A Bookmark can be selected by clicking the<img src="/files/-LbWxtcA-vc1Xk0LKelG" alt="" data-size="original">button.

A Qlik expression can be used by prefixing it with an equals sign.


# Reload

The action will reload the data in a Qlik Sense app.

There are no parameters available.


# Partial reload

The action will execute partial reload of the data in a Qlik Sense app.

There are no parameters available.


# Export data

The action will export the data of the current visualization or a master visualization data if the "Master items" option has been specified.

![](/files/-LbWzhKKvRfkaMN9YWoT)

A Master visualization can be specified by clicking <img src="/files/-LbWzvEs2vtlo1ZB_pvF" alt="" data-size="original"> button.

A Qlik expression can be used to specify a master visualization by prefixing it with an equals sign.


# Value color

The action will set the font color, background color or border color by using the measure value and the one of the predefined algorithms: “Positive/Negative”, “Less than 100%”, “Heatmap”.

{% hint style="info" %}
This action can be applied on a cell linked with the dimension or measure
{% endhint %}

Choose "Font color", "Background color", "Line" or "Symbol" to apply selected algorithm on particular property. Font or background color can be set for particular cell with the help of the action.  In case of the "Line" property a border color will be set  with the help of the action (if the borders were applied on the cell). The icon color can be set by selecting "Symbol" value.

###

### Positive/Negative

![](/files/-LbX-UXhS2IXBsk98WuB)

Choose colors for “Positive” and “Negative” parameters by clicking the corresponding button <img src="/files/-LbX1nd-qpDcp2H7owid" alt="" data-size="original"> or  <img src="/files/-LbX1crZF4XJq-tMDZOY" alt="" data-size="original">

All positive and negative values will be colored in the selected colors.

### &#xD;&#x20;

### **Less than 100%**

![](/files/-LbX1JN1QChC-4vFv0Vz)

Choose colors for “Less than 100%” and “otherwise” parameters by clicking the corresponding button <img src="/files/-LbX1nd-qpDcp2H7owid" alt="" data-size="original"> or  <img src="/files/-LbX1crZF4XJq-tMDZOY" alt="" data-size="original">

The color will be applied on a cell with a measure depending on the measure value: if it is less,  greater or equal to 1.

### Heatmap

![](/files/-LbX39AH1IIZ6OXpQB5w)

Applies one of the predefined heatmap color schemes.

With the help of “Custom” option you will be able to change "Min", "Average" and/or "Max" parameters and specify colors for minimum, average and maximum values. It allows building custom heatmap color schemes.

### Text color expression

This option allows to set a "Font color", "Background color", "Line" or "Symbol" color by using the "Text color expression" for a measure. It has no parameters.


# Mini chart

The action will show a minichart based on a measure value.

{% hint style="info" %}
This action can be applied on a cell with a measure
{% endhint %}

There are following minichart options available:

* Histogram
* Histrogram (2 Levels)
* Bullet

### Histogram

![](/files/-LdEBWS7McEKbgJ_47uo)

Histogram is the graphical way of representing KPIs.

![](/files/-LdEIqn_AlfRTIOzJfWS)

It is possible to set the minimum, average and maximum values and set the corresponding colors. By default, those parameters are initialized based on the corresponding measure values.

The "**Offset**" parameter is optional and can be used to apply offset on a bar based on the selected measure. To open list of available measures and be able to select a measure, click <img src="/files/-LdEDmHUK1NHtJlTLT0b" alt="" data-size="original"> button.

![](/files/-LdEHlme4-lTqsvmsEGC)

The "**Offset**" parameter can be used to build **WaterFall** charts.

![](/files/-LdEILwBXo1ODVE0Tf1J)

**To create WaterFall** chart you should add a measure which will define the offset for each dimension's value. In our example we have used a dimension with the following values: "In stock", "In transit", "Damaged", etc. Stocks level is determined by the measure "StocksLevel" which was defined as: `SUM(StockLevel)`. The Offset measure called "BarOffset" can be defined in the following way: `rangesum(above("StocksLevel"), above("BarOffset"))`. So, Minichart action is applied on the "StocksLevel" measure with selected "BarOffset" measure as the "Offset" parameter.&#x20;

See Demo Apps page for more details.

{% content-ref url="/pages/-LdELleT1sT6986TeNLa" %}
[Demo Apps](/demo-apps)
{% endcontent-ref %}

It is also possible to change the size of the minichart using the “**Width**” and “**Height**” options. The width and height is set in percentage of the occupied area.

There is the "**Hide**" parameter under the "Value labels" header.  It allows to hide value labels.

### Histogram (2 Levels)

![](/files/-LbX6cr3OuCRpW1ti1T7)

It allows to show a histogram with two color levels only.

A Boundary value is set to the average of the corresponding measure by default and can be changed.

It is also possible to change the size of the minichart using the “Width” and “Height” options.

### Bullet

![](/files/-LbX7peqJhiJ-vYBRAS5)

It allows to show the bullet chart, based on a measure value. The additional measure can be used to draw the reference line.

The "Measure" parameter is bonded to the measure of the current cell and, thus, it can't be changed here.

It is possible to change color, font size, font color and label position for the "Measure" parameter.

The "Reference line expression" is not mandatory but can be used to show the reference line using the specified measure. It is also possible to set the appropriate color for the reference line, and additionally - font size, color and label position.

Background color can be also changed.


# Zoom in

The action will switch the visualization into the "full screen" mode.

There are no parameters available.


# Zoom out

The action will switch back the visualization from the previously set "full screen" mode into the "normal" mode.

There are no parameters available.


# Sort

The action will allow users to interactively sort data by clicking the corresponding cell with a label.

{% hint style="info" %}
The action can be applied on a cell with a dimension or a measure label only. The action is applied automatically when the dimension or measure label is dragged onto a cell
{% endhint %}

There are no parameters available.


# Alternative dimensions/measures

The action will allow users to interactively select an alternative dimension or a measure using <img src="/files/-LbXGouWCebq3OIRGWZU" alt="" data-size="original"> special button displayed along with the label.

{% hint style="info" %}
The action can be applied on a cell with a dimension or a measure label only. The action is applied automatically when the dimension or measure label is dragged onto a cell. The visualization should have at least one alternative dimension or a measure
{% endhint %}

There are no parameters available.

![](/files/-LbXG_CYbqTdslR0zZAb)


# Searchable dimension

The action will allow users to interactively search and make selections of the data in the specified dimension using  <img src="/files/-LbXHQ7HLkYML7Lvqc-c" alt="" data-size="original"> special button displayed along with the dimension label.

{% hint style="info" %}
The action can be applied on a cell with a dimension label only. The action is applied automatically when the dimension label is dragged onto a cell
{% endhint %}

There are no parameters available.

![](/files/-LbXIFZEYs02ScA3gn69)


# Select dimension value

The action will allow to make selections of dimension values (with or without confirmations).

{% hint style="info" %}
The action can be applied on a cell with a dimension only. The action is applied automatically when the dimension is dragged onto a cell
{% endhint %}

![](/files/-LdDQDyCPWPTOwc637EL)

The "Quick selections (without confirmation)" option will allow to make selections without the confirmation (the confirmation panel will not be shown).

If the "Quick selections" parameter is not set the confirmation selection panel will be shown.

![](/files/-LdDTZg-1HAEAA8CpB7q)


# Show dialog

The action will open a popup dialog when a user clicks or taps on a particular cell on which the action has been applied.

![](/files/-LdDXHbc-q_9ofXRB0Zr)

The "**Title**" parameter can be used to define a dialog title. It can be formatted using HTML.

A Qlik expression can be used in the “Title” parameter by prefixing it with an equals sign, e.g.:

```
=if(GetPossibleCount(Year) > 1, '<h1>YTD Sales Analysis<h1>', '<h1>Sales Analysis</h1>')
```

The "**Value**" parameter defines the body of a dialog. HTML can be used to format a dialog content.

A Qlik expression can be used in the “Value” parameter by prefixing it with an equals sign and a text content should be enclosed with single quotes.

There is a **special macro** wich can be used **to embedd a master visualization** in a dialog:

```
$object_id{<css styles>}
```

&#x20;**object\_id** - is an Object ID. You can get it by using the "Embed chart" context menu or hidden "Developer" menu. As an alternative option, you can use "Single configurator" tool from Qlik Sense Dev Hub. See [Single configurator](https://help.qlik.com/en-US/sense-developer/Subsystems/Dev-Hub/Content/Sense_Dev-Hub/SingleConfigurator/dev-hub-single-configurator.htm) help for more details.

{% hint style="info" %}
See video below how to use hidden menu for developers.
{% endhint %}

<**css styles**> - optional. It can contain valid Cascading Style Sheets (**CSS**) definitions. See [Mozilla Developer Network](https://developer.mozilla.org/docs/Web/CSS) for more details on this topic.&#x20;

For example, to embed a master visualization with appropriate Object ID (e.g., ed67d66d-022a-4755-9f2d-49cf2fda2abf)  and set the width and height of the object the following macro can be used in the "Value" parameter:

```
$ed67d66d-022a-4755-9f2d-49cf2fda2abf{display: inline-block;width: 100%; height: 250px}
```

In such a way, **unlimited number of master visualizations can be embedded in a dialog**.&#x20;

![](/files/-LdDi4sebjwLqJ1Fncli)

{% hint style="info" %}
Video: Qlik Sense February 2018 - hidden menu for developers
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=uw3IxCoqZag>" %}


# Show tooltip

The action will allow to create custom tooltips.

![](/files/-LdDl9fI4RH3BNHu-z10)

The "**Value**" parameter defines the tooltip content. HTML can be used to format the content.

A Qlik expression can be used in the “Value” parameter by prefixing it with an equals sign.

![](/files/-LdE0uv5HzYFSCDPr0-Y)


# Show sidebar

The action shows a sidebar panel on the left or right side of a sheet.

<figure><img src="/files/FCTnYZ4EbnVGJVbKdXKY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/31F9FbAquta1S32DM5j1" alt=""><figcaption><p>Parameters</p></figcaption></figure>

The "**Title**" parameter can be used to define a title. It can be formatted using HTML.

A Qlik expression can be used in the “Title” parameter by prefixing it with an equals sign, e.g.:

```
=if(GetPossibleCount(Year) > 1, '<h1>YTD Sales Analysis<h1>', '<h1>Sales Analysis</h1>')
```

The "**Value**" parameter defines the body of a sidebar. HTML can be used to format the content.

A Qlik expression can be used in the “Value” parameter by prefixing it with an equals sign and a text content should be enclosed with single quotes.

It is possible to **embedd a master visualization** using the following syntax:

```
$object_id{css styles}
```

**object\_id** - identifier of the master visualization object.&#x20;

**css styles** - the CSS styles to apply to the embedded object.

Example:

```
$9bc03224-f072-439f-b0de-3014860d4f8a{width:100%;height: 40px}
```

The "**Position**" parameter determines the side of the sheet on which the sidebar is displayed.


# Show popover

The action allows the developer to show a popup window with a given width and height. It supports HTML as well as embedding master visualizations.

<figure><img src="/files/t0lEb4A8DoDjoFejvEEL" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/28MsdnQ6l4JBQdFcTm0e" alt=""><figcaption></figcaption></figure>

The "**Value**" parameter defines the body of a popup window. HTML can be used to format the content.

A Qlik expression can be used in the “Value” parameter by prefixing it with an equals sign and a text content should be enclosed with single quotes.

It is possible to **embedd a master visualization** using the following syntax:

```
$object_id{css styles}
```

***object\_id*** - identifier of the master visualization object.&#x20;

***css styles*** - the CSS styles to apply to the embedded object.

Example:

```
$9bc03224-f072-439f-b0de-3014860d4f8a{width:100%;height: 40px}
```

The "**Width**" and "**Height**" parameters allow the developer to set the size of the popup in pixels.

The "**z-index**" CSS property sets the z-order of a popover. Overlapping elements with a larger z-index cover those with a smaller one.

The "**Close Button**" checkbox determines how the popover is closed. If the "Close Button" check box is set, the pop-up window can be closed by clicking the close icon. Otherwise, the popup window can be closed by clicking on any object on the sheet outside the popup window.

<figure><img src="/files/ruYZmeywha3tVdlm27qN" alt=""><figcaption><p>Popover with the Close Button</p></figcaption></figure>


# Demo Apps

The following app is a simple PowerKPI features demo. The demo app contains randomly generated sales data and contains simple examples which demonstrates features of PowerKPI component.

{% file src="/files/-LdEPJSLPRqHpKPEarXU" %}
PowerKPI features demo app
{% endfile %}

The PowerKPI component should be installed to be able to play around with the demo app.

{% content-ref url="/pages/-Lb8i7u\_mEMseZFSiRlW" %}
[Installation](/installation)
{% endcontent-ref %}

{% hint style="info" %}
Some business demo apps are available on our Qlik Sense Demo portal. To see more demos feel free to contact us in one of the preferable way following <https://www.rbcgrp.com/en/contacts/> link.
{% endhint %}

Some screenshots from the demo app.

![](/files/-LdERR6vAlCLXsSkhOwY)

![](/files/-LdERtaLphfCY5DgKKPN)

![](/files/-Lt0AsedNWmsGQxRMKQu)

![](/files/-LdESnn6077zqFI_TJi6)

![](/files/-LdETJuoIzve5plnI836)


# FAQ

## Is the Power KPI free to use?

The PowerKPI is absolutely **free** to use **on Qlik Sense Desktop**.

You will have to **purchase subscription** if you plan to use the extension in an **enterprise environment**.  See the [Pricing](https://powerkpi.rbcgrp.com/#pricing) page for more details.

For **non-commercial organizations** the component is absolutely **free to use**. Feel free to contact us to get the license.

## What licensing options are available?

There is only one simple licensing model available – **subscription** model. See the [Pricing](https://powerkpi.rbcgrp.com/#pricing) page for more details.

## What is included in the subscription?

The subscription includes **product support** and any **upgrades** and **additions** we make.

## How can I install the PowerKPI on Qlik Sense?

See:

{% content-ref url="/pages/-Lb8i7u\_mEMseZFSiRlW" %}
[Installation](/installation)
{% endcontent-ref %}

## How can I trial the PowerKPI on Qlik Sense Enterprise server?

Follow these steps:

{% content-ref url="/pages/-Lb8i7u\_mEMseZFSiRlW" %}
[Installation](/installation)
{% endcontent-ref %}

{% content-ref url="/pages/-Lb8owLeyNnTFjteECLD" %}
[Activation](/activation)
{% endcontent-ref %}

## What does support include?

Product support includes management of the support cases and bug-fixing, as well as help in installing the product. Support is available online at <https://support.rbcgrp.com/>

## Not found what you are looking for?

Contact us following <https://www.rbcgrp.com/en/contacts/> link.