Coder Social home page Coder Social logo

fellowmind / fellowmind-qlik-kpi Goto Github PK

View Code? Open in Web Editor NEW
8.0 3.0 10.0 1.09 MB

KPI Extension for Qlik Sense. Custom actions for selection, navigation and variables.

License: MIT License

CSS 6.27% HTML 21.66% JavaScript 72.08%
qlik-sense kpi-extension kpi qlik qliksense

fellowmind-qlik-kpi's Introduction

Fellowmind Qlik KPI Extension

Formerly known as eCraft KPI Extension

eCraft KPI extension is configurable and clean looking KPI Extension for Qlik Sense.

Unlimited amount of custom actions can be added when clicking the extension. Actions include Select in field, Variable actions and move to sheet.

Multiple Style choices:

gif

Custom backgrounds and borders:

gif

gif

gif

Import Extension to Sense Server

  1. Download newest version of ecraft-kpi.zip from the dist folder.
  2. Import extension in QMC Extension section

qmc

Features

qmc

  • Custom and conditional coloring of indicator and KPI Text
  • Indicator depending on if measure 1 is larger or smaller than measure 2
  • Custom text for second measure
  • Compare measures by percentage
  • Automatic formatting of large numbers

KPI Colors

qmc

You can customize following colors:

  • Header text
  • Header background
  • KPI color
  • KPI Background
  • Second measure color
  • Indicator color
  • Border styles (Color and styles)

Color can be added from Qlik Expression or directly as CSS compatible color code (RGB, RGBA, HEX or color name).

Actions

Multiple actions can be added in extension property panel. You can chain actions together, for example select value and move to analysis sheet.

qmc

Custom actions when clicking KPI can be configured:

  • Selection in field Settings: Field name: Name of the field Value: Value to be selected Append to field selection: Either replace current selections or add to selection. Multiple values can be selected if you first replace selections and then add other values. First add one selection with replace and then add further actions to select additional values with add option

  • Set variable Settings: Variable name: Name of the variable to be setted Value: Desired value of the variable

qmc

  • Move to sheet Settings: Sheet: Dropdown of all sheets in Qlik Sense application. Select desired sheet from dropdown

qmc

Color can be added from Qlik Expression or directly as CSS compatible color code (RGB, RGBA, HEX or color name).

Author

Joonas Vermeulen, Fellowmind Finland

[email protected]

Bugs etc.

To report bugs and feature request please open issue.

fellowmind-qlik-kpi's People

Contributors

celindho avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

fellowmind-qlik-kpi's Issues

Extension doesn't work with QS September2020

After upgrading to the September 2020 reload of Qlik Sense this extension stopped working.

I get these errors in the console of the browser:
Uncaught SyntaxError: Unexpected token '<'
Uncaught SyntaxError: Unexpected token '<'

After trying to set some properties I get more errors:

setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
$apply @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
l @ analysis.96debf42e3d16d6306b5.js:9
(anonymous) @ analysis.96debf42e3d16d6306b5.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
$apply @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ qvangular.21964f16a5ee138df65b.js:9
dispatch @ jquery.a34e6c8099a68507375c.js:9
v.handle @ jquery.a34e6c8099a68507375c.js:9
trigger @ jquery.a34e6c8099a68507375c.js:9
(anonymous) @ jquery.a34e6c8099a68507375c.js:9
each @ jquery.a34e6c8099a68507375c.js:9
each @ jquery.a34e6c8099a68507375c.js:9
trigger @ jquery.a34e6c8099a68507375c.js:9
e @ setup-view.bf2af246af27462c071d.js:9
Z9ZH.t.Gesture.augment.end @ touchejs.83ef956f1bfa8a418eac.js:9
(anonymous) @ touchejs.83ef956f1bfa8a418eac.js:9
Z9ZH.t.GestureHandler.t.FlowHandler.augment.trigger @ touchejs.83ef956f1bfa8a418eac.js:9
Z9ZH.t.GestureHandler.t.FlowHandler.augment.end @ touchejs.83ef956f1bfa8a418eac.js:9
(anonymous) @ touchejs.83ef956f1bfa8a418eac.js:9
Z9ZH.t.SuperHandler.t.FlowHandler.augment.onEnd @ touchejs.83ef956f1bfa8a418eac.js:9
Z9ZH.t.FlowHandler.Object.augment.handleEvent @ touchejs.83ef956f1bfa8a418eac.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$broadcast @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ analysis.96debf42e3d16d6306b5.js:9
c @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$broadcast @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ analysis.96debf42e3d16d6306b5.js:9
c @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
angular.ee939c2f9e797b5055f7.js:9 TypeError: getSheets is not a function
at options (ecraft-kpi.js:126)
at u (setup-view.bf2af246af27462c071d.js:9)
at Object.e [as fillOptions] (setup-view.bf2af246af27462c071d.js:9)
at s (103.f49577e6ee4e6bd5e326.js:9)
at new o.controller (103.f49577e6ee4e6bd5e326.js:9)
at Object.h [as instantiate] (angular.ee939c2f9e797b5055f7.js:9)
at r (angular.ee939c2f9e797b5055f7.js:9)
at qvangular.21964f16a5ee138df65b.js:9
at h.$digest (angular.ee939c2f9e797b5055f7.js:9)
at angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$broadcast @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ analysis.96debf42e3d16d6306b5.js:9
c @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$broadcast @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ analysis.96debf42e3d16d6306b5.js:9
c @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
setup-view.bf2af246af27462c071d.js:9 Error! No component found with name "pp-ec-about"
a @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
s @ 103.f49577e6ee4e6bd5e326.js:9
(anonymous) @ 103.f49577e6ee4e6bd5e326.js:9
$digest @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
o @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
setTimeout (async)
Wn.a.defer @ angular.ee939c2f9e797b5055f7.js:9
$evalAsync @ angular.ee939c2f9e797b5055f7.js:9
(anonymous) @ angular.ee939c2f9e797b5055f7.js:9
h @ angular.ee939c2f9e797b5055f7.js:9
then @ angular.ee939c2f9e797b5055f7.js:9
g @ setup-view.bf2af246af27462c071d.js:9
(anonymous) @ setup-view.bf2af246af27462c071d.js:9
a.emit @ enigma.78fea08e5ef0fe3cffb8.js:9
e @ enigma.78fea08e5ef0fe3cffb8.js:9
angular.ee939c2f9e797b5055f7.js:9 TypeError: getSheets is not a function
at options (ecraft-kpi.js:126)
at u (setup-view.bf2af246af27462c071d.js:9)
at Object.e [as fillOptions] (setup-view.bf2af246af27462c071d.js:9)
at s (103.f49577e6ee4e6bd5e326.js:9)
at new o.controller (103.f49577e6ee4e6bd5e326.js:9)
at Object.h [as instantiate] (angular.ee939c2f9e797b5055f7.js:9)
at r (angular.ee939c2f9e797b5055f7.js:9)
at qvangular.21964f16a5ee138df65b.js:9
at h.$digest (angular.ee939c2f9e797b5055f7.js:9)
at angular.ee939c2f9e797b5055f7.js:9

Can't format the number

Hi, I love your extension and I used to using it in my all Dashboard , but I Can't format measure number by using the QS number Formatting

Could you help us to solve this Issue , Thanks in advance

Extension doesn't work with QS May 2021

After upgrading to Qlik Sense May 2021 the extension doesn't display properly anymore. I don't see any js errors in console though. Could you have a look at it again?

Not making field selection

Hi,

I am trying to use this extension in my project to make field selections, however it is not making any selections in the fields.

I am using Qlik Sense September 2017 release.

This is the simple code i am using:

Load script

tab1:
Load * Inline
[
myField,letter
1,a
2,b
3,c
4,d
5,e
];

Field name
=letter

Value
='b'

I have also tried the value =b -> 'b' -> b

Can you offer any advice on why it is not working.

The extension looks very good and is ideal for what I am trying to achieve.

Kind Regards,
Gary

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.