1 2 3 Previous Next

Qlik Design Blog

42 Posts authored by: Yianni Ververis

Recently, Julie Whipple blogged about Qlik’s partnership with Team Rubicon. She talked described how we helped Team Rubicon by creating an amazing mashup which gives the world a view of the awesome job Team Rubicon, it's partners, and countless volunteers are doing around the world. You can find Julie’s blog here: The Value of Data – Team Rubicon and Qlik | Qlik Blog

Even though the data is complex, using Qlik Sense to bring it all together in one view was like a walk in the park, too easy!

Once the data was uploaded into a Qlik Sense app, we setup the entire mashup using the qdt-react-template. We set up the pages and the routes and then used qdt-components to connect to the server and get the KPIs, Charts and Maps. In order to that, all we needed is the config to server https://github.com/qlik-demo-team/qdt-react-template/blob/master/src/components/QdtComponent.jsx and we were ready to go!

We are so thrilled to use our awesome products to make a difference. In general, developing is fun, really fun. When you add in the fact that what we develop is having a positive impact on the world, it makes us proud to be part of such a great company.  

Check out the  Team Rubicon – Open Initiative project: https://teamrubiconusa.org/open/

Here are some helpful links referenced above:

qdt-react-template: https://github.com/qlik-demo-team/qdt-react-template

Examples:  https://webapps.qlik.com/qdt-components/react/index.html#/

qdt-components: https://github.com/qlik-demo-team/qdt-components

Best,

Yianni

 

2018-08-03 12_53_43-Open Initiative _ Team Rubicon.png

I have blogged about qdt-components in the past, on how we can use it with Angular, React, Vue and simple html in the past.

 

Today I will focus on the Wordpress version.

 

We can start by searching for the plugin. You can type "Qlik" or "qdt" and you will see it in the results

Search.png

 

Once installed, go to the settings and add your server configuration

Settings.png

 

Then, you can go ahead and create your page/post and add the shortcodes. So far, the only available ones are for KPIs and embedding visualizations.

 

[qdt-component type="QdtKpi" expr="=Num(Count(distinct operation_id), '###,###')"]
[qdt-component type="QdtViz" id="sNMsjYL" height="400px"]

 

Here is how it should like at the end

page.png

 

Coming up: All of the features in qdt-components

React template with qdt-components

 

Github: https://github.com/qlik-demo-team/qdt-wordpress-plugin

 

Yianni

bannerVuewjs.jpg

I have talked about about qdt-components in the past and how it can be used with Angular, React and in a simple html page.

qdt-components - A Components Library that can be used in simple Html, Angular 5 and React


Today I will show you how to use it with Vue.js.

 

You can start by the template that we put together https://github.com/qlik-demo-team/qdt-vue-template.

 

The main component is the QdtComponent.vue https://github.com/qlik-demo-team/qdt-vue-template/blob/master/src/components/QdtComponent.vue

 

import QdtComponents from 'qdt-components';
const options = {
  config: {
    host: '<yourserver.com>',
    secure: true,
    port: 443,
    prefix: '',
    appId: '133dab5d-8f56-4d40-b3e0-a6b401391bde',
  },
  connections: {
    vizApi: true,
    engineApi: true,
  },
};
const qdtComponents = new QdtComponents(options.config, options.connections);
export default {
  name: 'QdtComponent',
  props: {
    type: String,
    props: Object,
  },
  mounted() {
    qdtComponents.render(this.type, this.props, this.$el);
  },
};

 

Then you can create your pages and start adding your visualizations.

 

To embed a simple Qlik Sense chart just add this line

<QdtComponent :type="viz2.type" :props="viz2.props"  />


Where viz2 is


const viz2 = {
  type: 'QdtViz',
  props: {
    type: 'barchart', id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height: '300px',
  },
};

 

The full example is at

https://github.com/qlik-demo-team/qdt-vue-template/blob/master/src/components/EmbedObject.vue

 

and you can view it live at

https://webapps.qlik.com/qdt-components/vue/index.html#/embed-object

 

More posts on qdt-components

qdt-components - Horizontal Barchart by Picasso.js & Selection Toolbar

Qdt-components & Picasso.js - More Charts!

 

This is it

Yianni

Tshirt_Student_Fair_OSS-V2.jpg

 

Hopefully you all attended Qonnections 2018 and saw Jimmie on the bike !!!

twitter4.jpg

 

Bike.qlik.com is the latest mashup build entirely with Qlik's open source libraries, Qlik Core, Enigma.js, Picasso.js, Leonardo UI and the Demo Team's Qdt-components.

bike.qlik.com.png

 

Here is briefly how we did it

  • Sensors are sending data wireless to the Raspberry Pi
  • Node.js reads and writes csv
  • Qlik Core in Raspberry Pi is reading csv with a reload script and saves the data
  • Enigma.js connects and gets the data from Qlik Core then, Picasso.js is displaying that data in a graphical format
  • Node.js is uploading the qvds on Bike.qlik.com
  • Bike.qlik.com is a Docker that runs 2 containers in an AWS EC2 instance. One for the Qlik Core / Engine and another for an apache server
  • The htdocs and the Apps for the Qlik Core, are mounted outside of the 2 containers so there is no need to reload containers or recreate the Docker images, once the html code is changed or the qvf
  • Once uploaded, a Node.js restful api endpoint is reloading the session app, reads the new data from the just uploaded qvds and saves the qvf with the new data
  • React.js with Qdt-components is connecting to Qlik Core on the server and is getting the data
  • Qdt-components is rendering 11 KPI components and one search component (Leonardo UI) on the Rider field
  • Picasso.js is used to read the data and display a scatter plot and a line chart with tooltip and multiple selections

 

Expect more examples in the coming future with these combinations of our Open Source Software!!!!!

 

Yianni

We have been adding more features to our qdt-components and some of these, are the latest Picasso.js charts.

 

Here are the charts that we have so far.

Also you can interact with them live on our react template, https://webapps.qlik.com/qdt-components/react/index.html

 

  1. You can Embed any object from Qlik Sense and the Capability API
  2. You can create any custom Session object by defining your own definition properties like dimension, measures, title, subtitle, color, order etc
    embedded.png
  3. There is a custom Selection Toolbar that we use extensively in our mashups
    selectionToolbar.png
  4. A Picasso Horizontal bar that detects the height of the div. Once The bars exceed that, it adds a scrollbar. It also features multiple selections and tooltip
    picassoHorizontalBarchart.png
  5. The same idea but with vertical bars
    picassoVerticalBarchart.png
  6. A new Picasso Pie Chart with Legend, multiple selections and tooltip
    picassoPie.png
  7. A new Scotterplot with multiple selections, tooltip and legend
    picassoScotterplot.png
  8. And now the latest addition, scotterplot with custom images
    picassoScotterplotImages.png
  9. A simple line chart
    picassoLinechart.png

10. Combo chart

picassoCombochart.png

 

More are coming soon with this amazing library!!!!

 

Yianni

banner_3technologies.jpg

Continuing our blog series on the qdt-components (qdt-components - A Components Library that can be used in simple Html, Angular 5 and React & qdt-components - React template by fka), today, I will talk about two new components, the Horizontal Barchart, created with Enigma.js and Picasso.js and the Selection Toolbar that we usually use in our mashups (demos.qlik.com & webapps.qlik.com).

 

The Selection Toolbar is a simple component that listens to selections and displays the selected items either as simple buttons or if there are more than one items selected for the same field, as a dropdowns with buttons.

2018-03-02 19_51_43-Simple html with qdt-components.png

 

The Horizontal Barchart is using the latest Qlik Open Source, Picasso.js. It has a Tooltip with Dimension and Measure and multiple selections.

2018-03-02 19_56_39-Simple html with qdt-components.png

Also, we use Leonardo UI (https://qlik-oss.github.io/leonardo-ui/index.html) for icons, buttons etc..

 

Live: Simple html with qdt-components

qtd-components: https://github.com/qlik-demo-team/qdt-components

 

Enjoy ,

Yianni

banner-4.jpg

qdt-components (Qlik Demo Team Components) is a library of components that we have developed in the demo team and that have been used in most of our mashups found in webapps.qlik.com and demos.qlik.com. It's a collection of filters, tables, barcharts, selection toolbars, or even simple getting/creating object methods from the Visualization Api. You do not have to worry about connection strings, loading Requirejs, jQuery etc. Everything is taken care for you! The library can be used in a simple html page by loading the qdt-components.js or in React and Angular2+ via npm.

 

Today, I will show you how to load a simple object and create a session barchart, in simple html and Angular 5

 

Simple Html

  • In your Html add
<head>
<script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
<div id="qdt1"></div>
</body>












  • In your Javascript code, add
var qConfig = {
   "config": {
      "host": "your-sense-server.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}
var QdtComponent = new window.qdtComponents.default(qConfig.config, qConfig.connections);
var element = document.getElementById('qdt1');
QdtComponent.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);












 

Simple html template: GitHub - qlik-demo-team/qdt-html-template: A simple html template that uses qdt-components

Live Demo: Simple html with qdt-components


Angular 5

 

  • Install the package
npm install --save qdt-components







 

  • Create new component by typing in the command line
ng generate component components/qdt-components --style=less







 

  • In your qdt-component.component.ts import the library and import or set the qConfig with the connection details
import { Component, OnInit, ElementRef, Input } from '@angular/core';
// import * as qConfig from '../../../qConfig.json';
import QdtComponents from 'qdt-components';
let qConfig = {
   "config": {
      "host": "sense-demo.qlik.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}








 

  • Replace the class with
export class QdtComponentComponent implements OnInit {


   @Input() Component: Function;
   @Input() props: object;

   static QdtComponent = new QdtComponents(qConfig.config, qConfig.connections);

   constructor(private elementRef: ElementRef) { }

   ngOnInit() {
      QdtComponentComponent.QdtComponent.render(this.Component, this.props, this.elementRef.nativeElement);
   }
}








 

  • After this, you can start using it in any other component. In the html add
<qdt-component [Component]="'QdtViz'" [props]="{id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}"></qdt-component>







 

Template: GitHub - qlik-demo-team/qdt-angular-template: An Angular 5 template that is using qdt-components for connecting to Qlik …

Live Demo Angular 5: https://webapps.qlik.com/qdt-components/angular5/index.html

Live Demo Angular 6: https://webapps.qlik.com/qdt-components/angular/index.html


React 16.3

Live Demo: https://webapps.qlik.com/qdt-components/react/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-react-template


Vue 2.5

Live Demo: https://webapps.qlik.com/qdt-components/vue/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-vue-template


qdt-components

Branch: Qlik Branch

Github: GitHub - qlik-demo-team/qdt-components: React Components to be used with Angular2+ and React. Connects with the Capabili…

Npm: qdt-components

 

Yianni

Qlik_BOT_Headers_Skype.jpg

 

Last month I talked about our new QlikBotNode, setting it up and getting it ready for Telegram Qlik Sense Bot with Node.js and Enigma.js.

 

Today, I will talk about the steps needed to make your bot available for Microsoft Skype as well!

 

Assuming that you have already forked the code from GitHub - qlik-bots/QlikBotNode: QlikBotNode is a server build in Node.js, Express.js, Enigma.js and MySql that connects … and you have already went through the previous tutorial and set up the Telegram bot.


Installation


  • First you need to "Register a Bot with Bot Service". Login to the Azure Portal http://portal.azure.com/
  • Click the New button found on the upper left-hand corner of the Azure portal, then select AI + Cognitive Services > Bot Channels Registration.
  • Click the Create button to start the creation process.

registration-create-bot-service-blade.png

 

  • Enter a Bot Name as you want to appear in your contact list
  • You can use the free Pricing Tier for testing
  • For the Messaging Point add you full route like https://{your-server}/api/sense-bot/microsoft/
  • You can skip the Application Insight for now
  • Once registered, go to settings and get the AppId and the Password. You will need to add them in your environmental variables

registration-settings-manage-link.png

 

  • Click on Manage to get the password

registration-generate-app-password.png

 

  • Put the AppId and Password in your Environmental variables.
  • For Windows, go to "Control Panel" -> "System" -> "Advanced System Settings" -> "Environment Variables"
  • - For Linux, from your directory (~), type "nano .bash_profile" or "vim .bash_profile" and enter the variables there like
  • export SKYPE_BOT_ID_SCV=''
    • export SKYPE_BOT_PASSWORD_SVC=''
  • While still in settings, go to "channel" and add skype.


Thats it!


For more Details on Register a bot with Bot Service (https://docs.microsoft.com/en-us/bot-framework/bot-service-quickstart-registration)


Usage


  • Type help for all of the available commands.

chat-help.png

 

  • Click on Salesforce to get the available commands for the Salesforce App and then click on the Dashboard to get a list of KPIs

chat-salesforce.png

 

  • Click on CIO Dashboard and then on Management

chat-cio.png

 

  • - If you want to change your language click on Language and select one of the available ones. So far we have only 3, English, Spanish and Greek but please feel free to add as many more as you want

chat-language.png

That's it!

 

Make sure you follow:

 

 

Best,

Yianni

Qlik_BOT_Headers_Telegram.jpg

Hello everyone. After I saw the popularity of Juan's Qlik Bot for Telegram written all in C#, I decided to create another one in JavaScript with Node.js and Enigma.js. Today I am going to share with you the code and how to get started creating your own bot for Telegram on any Operating System that has Node.js installed.

 

The server will be running under https so if you do not have valid certificates for your domain, or localhost if you are testing it on your local computer, you can have Qlik Sense Enterprise take care of that for you. From QMC, go to start->Certificates and then export for localhost using the "Platform Independent PEM-format"

export-certificates.png

Copy these certificates and paste them into {QlikBotNode folder}/app/server/certs/localhost

 

I have used 3 apps in this, helpdesk, Salesforce and CIO dashboard. The qvf for helpdesk is bundled in your Qlik Sense Desktop while the Salesforce one you can get from Salesforce/Files at master · yianni-ververis/Salesforce · GitHub and the CIO Dashboard one from CIO/Files at master · yianni-ververis/CIO · GitHub.

 

Now lets get the code from GitHub - qlik-bots/QlikBotNode: QlikBotNode is a server build in nodejs, expressjs and MySql that connects to chat and m…

 

From the command line using your favorite tool, I am using Git Bash for this one, type Npm install to get all of the required modules.

 

Install MySql or Xampp / Wamp and connect to it. Xampp is bundled with phpmyadmin so you can use that. Then create the database and the tables by running sql query (QlikBotNode/sensebot.sql at master · qlik-bots/QlikBotNode · GitHub)

 

Every platform, upon creation of the bot, it gives you some tokens so your code can authenticate with the platform's servers. Once we have these tokens, for security reasons, we need to set them as environment variables. So, lets create our bot and get our token.

 

Once you install Telegram Desktop, go to your "BotFather" contact and type "/newbot". Everything in Telegram that starts with "/" is a command. So we typed the command to create a new bot. This will give you an options menu to configure your bot.

settings.png

Go ahead and give your Bot a name, an icon and a description. If you click on "Back to Bot", you will get a button with the "API Token". Take that token and store it as Environment Variable.

In windows you have to go to "Control Panel" -> "System" -> "Advanced System Settings" -> "Environment Variables" and set a new one as "TELEGRAM_BOT_TOKEN", while in Linux, from your directory (~), type "nano .bash_profile" or "vim .bash_profile" and enter a new line with the token "export TELEGRAM_BOT_TOKEN=######".

 

Now you should be ready to run your code. From the command line (Git Bash), type "gulp". If everything goes well and you do not have any errors, you should see a message "[nodemon] starting `node app/server/server.js`". Your server is up and running and communication via the Token auth has been established.

 

Now lets explore the Bot.

  • Type help to view all of the available commands main.png

 

  • Click on the Salesforce button or type /salesforce salesforce.png
  • Here, there are some buttons to get KPIs and one that takes you to the mashup for validation. Try them all!!!!!
  • Click on the CIO button or type /cio and then click on "Management" to get the set of KPIscio-dashboard-management.png
  • Click on the Helpdesk button or type /helpdesk helpdesk.png

That's it! Now you can a have a Node.js server running with your QlikBotNode and you can start experimenting with KPI commands in the Telegram app.


The code is open sourced at GitHub - qlik-bots/QlikBotNode: QlikBotNode is a server build in nodejs, expressjs and MySql that connects to chat and m…

There are a lot of people that use Wordpress as their company's portal. If you are one of these people then, you may find this plugin very useful. You can create a mashup from within wordpress, using the Capabilities API, without writing a single line of code. Just add the settings with the host and the App ID, then the shortcode for the objects that you want and you are done.

Here, I will show you how to do that.

 

  1. First go to your wp admin panel, under "Plugins" click on "Add New" and then search for "Qlik"
    install.png
  2. Click on "Install Now" and then on "Activate"
  3. This will create a "Qlik Sense" settings page, just open that
  4. Settings.png
  5. Here you need to define your host, the Virtual Proxy (prefix) and the App Id, as you would in a regular mashup. If you are planning on using a second app, then add the second app id in "App2 ID".
  6. Save changes.
  7. Then add the shortcode into your posts "[qlik-sense-object id="page1-obj2" qvid="nvqpV" height="400" app2="true"]"

- id: is the unique div id. This is needed especially when you want to display the same object in 2 different instances

- qvid: Is the object id as found in the "dev-hub/single-configurator"
- height: The height of the visualization in pixels
- nointeraction: Add this if you want to disable interactions. If you want the objects to have interaction, you can just omit this.

- app2: Add this if your object is coming from the second app that you have specified in the settings

 

 

EditPost.png

  • I have added few objects with a specific height in a bootstrap template for better layout. Now, lets preview the page
    Helloworld.pngHelloworld2.png

Make sure you whitelist your url in the virtual proxy.

 

If you use it and like it, please give it a 5 star in Wordpress.

 

This is it!

Yianni

 

In Portuguese: Qlik Sense Plugin para Wordpress by cleveranjos. Thank you Clever!

GitHub - yianni-ververis/qlik-sense-wordpress-plugin: A Wordpress plugin to create a Qlik Sense Mashup

Qlik Branch

There are cases where we need to switch among charts in a mashup. The easiest way is with jQuery show/hide or if you are using Angular then show the chart based on the model value.

 

But what about if we have many charts, with the same measures but only the dimensions change? What if we could just change the dimension in the engine and let the engine take care of all the changes and animations?

 

This is possible through the Visualization API and the applyPatches() method.

 

Here I will explain how to create a simple dropdown that changes based on the dimension selected. Since I am using Angularjs 1.5.8 like Qlik Sense September 2017, I have created a component that

a) gets first object,

b) populates a dropdown with titles and

c) upon change, the chart is changing based on the dimension provided

 

First, we get the first object as usual and display it in our mashup. This is what the html looks like

<sense-object-multi-dropdown

                qvid="'BRjnYJ'"

                height="300"

                data="[

                    {title:'Total Costs by Branch', dimension:'Branch'},

                    {title:'Total Costs by Work Center', dimension:'Work Center Name'},

                    {title:'Total Costs by Division', dimension:'Division'},

                    {title:'Total Costs by Collection', dimension:'Collection'}

                ]"

            ></sense-object-multi-dropdown>

 

Here, in the "qvid" is the id (BRjnYJ) of the first object. In the "data" we add the title as we want it to display in our dropdown and the actual dimension.

 

In our components's Javascript code, we get and then show the object as usual

qlik.app.visualization.get($ctrl.qvid).then(function (viz) {

        $ctrl.viz = viz;

        $ctrl.viz.show($element.find('#obj'))

        $element.find('.qv-object-header').remove();

    });

 

Here is the html code for the component

<div class="sense-object-multi-dropdown">

    <div class="v title-1">{{ $ctrl.currentData.title }}</div>

    <div class="dropdown">

        <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            <i class="fa fa-chevron-down" aria-hidden="true"></i>

        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

            <a class="dropdown-item" href ng-repeat="item in $ctrl.data" ng-click="$ctrl.change(item)">{{item.title}}</a>

        </div>

        </div>

    <div class="qvobject" id="obj" height="{{$ctrl.height}}"></div>

</div>

 

Now, by just this, the page should have a chart and a dropdown populated.

2017-10-12 10_41_09-Plant Operations.png

 

Now, let's add the code that will change the dimension

    $ctrl.change = function(item) {

        $ctrl.currentData = item;

        $ctrl.viz.model.applyPatches([{

            qOp: "replace",

            qPath: "/qHyperCubeDef/qDimensions/0/qDef/qFieldDefs/0",

             qValue: `\"${$ctrl.currentData.dimension}\"`

  }], true);

    }

 

Here we are telling the engine that, hey for this object (model), replace the first field (qFieldDefs) of the first dimension (qDimensions) to the one I am giving you.

 

That's it. Once the engine receives the new change via websocket, it will redraw automatically, without any flickering and it will animate from one chart to the next.

 

Attached is my entire component if you want to use it in your Angular apps. Feel free to remove all the unnecessary libraries to make it work.

 

 

Live example: Plant Operations "Total Costs by Division"

 

Yianni

While ago I wrote a simple tutorial on how to connect to Trello API and get the lists and cards into Qlik SenseTrello and Qlik Sense.

 

Today I will go one step further and add more fields into Trello so we can import them into sense and use them as filters. I will use the labels and due dates.

 

I like to use labels to highlight the importance or urgency of each project. So I named all of the labels as:

2017-07-19 08_19_31-_ SaaS Demo on Qlik - Demos &amp; Best Practices _ Trello.png

 

So in one of my cards, I have given it a label of normal and I have added a due date for today which I also marked it as complete. So, this is how my card should like

 

2017-08-18 16_26_22-_ Qlik Design Blog on Qlik - Demos &amp; Best Practices _ Trello.png

 

Now lets go to my Qlik Sense and try to re import the cards.

 

I have changed the api path from last time to :

https://api.trello.com/1/boards/[board-id]/cards?fields=all&members=true&key=[key-id]&token=[token-id]

 

Here is my load script

 

LIB CONNECT TO 'Demos - Trello-cards';

RestConnectorMasterTable:
SQL SELECT 
"id" AS "id_u1",
"name" AS "name_u0",
"idList",
"url",
"due",
"dueComplete",
"__KEY_root",
(SELECT 
"id",
"idBoard",
"name",
"color",
"uses",
"__FK_labels"
FROM "labels" FK "__FK_labels"),
(SELECT 
"id" AS "id_u0",
"avatarHash",
"fullName",
"initials",
"username",
"__FK_members"
FROM "members" FK "__FK_members")
FROM JSON (wrap on) "root" PK "__KEY_root";

[labels]:
LOAD [id] AS [trello.label.id],
[idBoard] AS [trello.board.id],
[name] AS [trello.label.name],
[color] AS [trello.label.color],
[uses] AS [trello.label.uses],
[__FK_labels] AS [__KEY_root]
RESIDENT RestConnectorMasterTable
WHERE NOT IsNull([__FK_labels]);

[members]:
LOAD [id_u0] AS [trello.member.id],
[avatarHash] AS [trello.member.avatarHash],
[fullName] AS [trello.member.fullName],
[initials] AS [trello.member.initials],
[username] AS [trello.member.username],
[__FK_members] AS [__KEY_root]
RESIDENT RestConnectorMasterTable
WHERE NOT IsNull([__FK_members]);

[root]:
LOAD [id_u1] AS [trello.card.id],
[name_u0] AS [trello.card.name],
[idList] AS [trello.list.id],
[url] AS [trello.card.url],
//[due] AS [trello.card.due],
    Date([due],'MM/DD/YYYY') as [trello.card.due],
[dueComplete] AS [trello.card.dueComplete],
[__KEY_root] AS [__KEY_root]
RESIDENT RestConnectorMasterTable
WHERE NOT IsNull([__KEY_root]);

DROP TABLE RestConnectorMasterTable;

 

If everything works well you should be able to get all of your cards in the QVF. Now, lets add the filters for priority and completed

2017-08-18 16_43_49-.png

 

That's it!

 

Yianni

Yianni Ververis

Trello and Qlik Sense

Posted by Yianni Ververis Jul 21, 2017

Are you a Trello user and want to start integrating your cards with Qlik Sense and getting some statistical analysis out of your projects' workflow? Here I will show you how to connect to you boards and get your lists and cards into Qlik Sense.

 

First, you need to have a developer’s key and an authorization token, both generated for you by trello.com.

  • To get you Key you need to go to https://trello.com/app-key
  • To get your Auth token, at the same page, right under your key, there is a link "Token". Click on that and it will take to a page that asks you "Let Server Token use your account?". You need to click "Allow" and then copy the key.

 

Then, lets go to Qlik Sense and setup our Rest Connector to get our data. All of the desired template links are in Trello Developers. Here I will just create a simple connection that retrieves all of the lists and their cards from a single board

  • Go to your "Data Load Editor"
  • Create a new section and name it Trello
  • Create a new connection using the "Qlik REST Connector"
  • In the url add "https://api.trello.com/1/boards/[board_id]/lists?cards=open&card_fields=name&fields=name&key=[key]&token=[token]". Don't forget to substitute the key and token that you got above. To get your board id, simply open your trello board and go to the url. It should be in the form of "https://trello.com/b/[board_id]/[your-board-name]".
  • Method is "GET"
  • Under Authentication select "BASIC" and add your username and password, give it a name and save it.
  • 2017-07-19 07_49_08-Qlik Sense Desktop.png
  • Click on "Select Data" and select what you want to get. If you select "root", you will get only the lists. If you select cards too, then you will get all of the lists with their cards
  • The REST Connector should generate the load script for you and should look something like this

 

LIB CONNECT TO 'Trello-board-list';

RestConnectorMasterTable:
SQL SELECT
"id" AS "id_u0",
"name" AS "name_u0",
"__KEY_root",
(SELECT
"id",
"name",
"__FK_cards"
FROM "cards" FK "__FK_cards")
FROM JSON (wrap on) "root" PK "__KEY_root";

[cards]:
LOAD [id] AS [card_id],
[name] AS [card_name],
[__FK_cards] AS [list_key]
RESIDENT RestConnectorMasterTable
WHERE NOT IsNull([__FK_cards]);

[root]:
LOAD [id_u0] AS [list_id],
[name_u0] AS [list_name],
[__KEY_root] AS [list_key]
RESIDENT RestConnectorMasterTable
WHERE NOT IsNull([__KEY_root]);

DROP TABLE RestConnectorMasterTable;






 

The end result should be something like :

2017-07-18 10_48_40-Qlik Sense Desktop.png

 

There are a lot of possibilities here. You can combine this with some power ups/custom fields that you would like to track and get more detail into your visualizations.

 

This is it!! Now with few steps you can add your lists and cards intro Qlik Sense and create charts or KPIs based on these data.

 

https://branch-blog.qlik.com/trello-and-qlik-sense-2da6e1912967

 

Yianni

A while ago I blogged about 2 of our most beautiful mashups in the Demo Team, Salesforce and CIO dashboard.

 

Case study: Salesforce mashup

Jazzing up your Mashups

 

After I was asked by many for the source files, here are the 2 github pages

 

GitHub - yianni-ververis/CIO: CIO mashup created by the Demo Team

GitHub - yianni-ververis/Salesforce: Salesforce Mashup created by the Demo Team

 

Upload the qvfs on your server and put the ids into the project.json file. Then in the command line type "npm install" to install all the required libraries and "gulp" to build and run the project.

 

Depending of the version of Qlik Sense you are running, most likely you will get CORS errors and some fonts may not load up. If you have valid certificates for localhost then under ./gulp-tasks/server.js comment out lines 15-18

 

Mashups:

https://webapps.qlik.com/salesforce/index.html

CIO Dashboard

 

Best,

Yianni

Last year I blogged about our  Mobile Friendly Horizontal Bar Chart that we use in most of our mashups in the Qlik Demo Team.

 

Since then, many things have changed. For a start, if you have a mashup that uses many objects, you will see the load time to be much faster since I used d3.v4 and I have added a break point on how many bars to create, You can define if you want to show all or only the first 50.

 

I have also changed the currency. If you select the measure to be displayed as 'auto' then extension will use the custom format. You can abbreviate the measure with their respective symbol like 'B' for billions, 'T' for trillions etc and use your custom currency symbol

2017-05-24 18_04_56-Nordea Masters - CBO _ Sheets - Qlik Sense.png

Another new feature is the custom text to display when there is no data. If you make a selection in the sheet and that produces no results then this text will be displayed.

2017-05-25 19_33_42-_Nordea Masters - CBO - 2017 Nordea Golfers _ Sheets - Qlik Sense.png

 

Also, the tooltip is more elegant now and different from the standard Qlik Sense one. I changed it to follow the mouse instead of always aligned center at the top of the bar

2017-05-25 17_40_21-_Nordea Masters - CBO - 2017 Nordea Golfers _ Sheets - Qlik Sense.png

YIANNI

 

Files

Qlik Branch

Filter Blog

By date:
By tag: