1 2 3 Previous Next

Qlik Design Blog

474 posts

Sometimes the secret sauce of a successful data visualization project lies in the correct choice of the visual object(s) that represents the data. Factors like picking the right chart, placing it in the right spot, and user interaction are key to make a data piece memorable, insightful, and truthful. However, on other occasions, the key to success is to “simply” make data available, this is particularly true for data that was previously inaccessible to most of us.


An example of this is our latest project. We partnered with Canadian National Post to, for the first time, make available over 6 million donations made on a national scale during the last 25 years.




In the last decade, open data has been a hot topic for governments all over the world, but open or public data isn't necessarily easy to access. That’s especially true when it's data that can help citizens to understand and track how our politicians’ campaigns are funded.

There are no consistent rules — or penalties — for political financing across Canada. Spending limits, out-of-province and foreign gifts, money from unions and corporations, donations from numbered companies: in some places anything goes, in other regulations are rarely enforced.


For Qlik one of the project main challenges was the data cleaning and normalization process. The project contains more than 25 different data sources. We fixed some of the most obvious issues with data, please read the methodology page (http://special.nationalpost.com/follow-the-money/methodology), but we also wanted the data to show how it was originally recorded without any makeover. It’s common to find small variations in names across the app, for example chances are that the donor names ‘Justin Trudeau’ and ‘Justin P.J. Trudeau’ belong to the same person also known as Justin Pierre James Trudeau.


We ended up having a large app holding around 6.5 million rows of data (at the time of writing) and a clear goal, make the data searchable. Anyone should be able to find individual donations and get some information about the shape of the data.


We used enigma.js to interface our Qlik Engine API and React to build the user interface. We created a powerful piece that displays millions of rows of data in the blink of an eye. React.js is designed to work with simply reacting to changes in data, and its super-efficient diffing algorithm makes DOM updates super-fast resulting in a blasting fast experience.




The main table displays the more granular level of data including individual donations and all the relevant details. To show the complete 6.5 millions of rows we use virtual scrolling and paging. The table is getting new data from the server as users scrolls the table.


We also included two bar charts to ease the data profiling task, compressing down millions of rows to a few bars. Lastly we use two small tables to illustrate the top donors and donations so the readers who are interested only in the super donors have a quick way of finding the information in the table.






Check the online version here Follow the Money - Political Donations Database | National Post



Hi guys - when working with a customer requirement, I recently discovered some additional controls one can implement in a published Qlik Sense app. There may be times, when you want to hide additional fields that are displayed in the Qlik Sense design interface. Now these fields are commonly ID and KEY fields which may not be necessary to one's analysis and the requirement might not always be for any specific security...as in our example they simply just want to control the visibility in the interface to reduce clutter and confusion.

Under default conditions, these fields will be displayed in the data visualization's field selector, the data properties drop down and in the expression editor. During this discovery, I was under the impression that when a user (consumer / viewer / non ContentAdmin role) - who can create their own analysis from a approved base app, they would only see the measures and dimensions populated in the Master Items panel on the left. While this is true, I discovered that the aforementioned user interface components, still display ALL the fields.


Here is how you can control that: Use system variable HidePrefix

set HidePrefix='_' ;

Watch this video to learn more:




Note: The data model fields are STILL accessible - however one would need to know what the prefix character is in order to use it in the expression editor or to be able to access it.


3-19-2018 5-18-41 PM.png


If you need an extra layer of security - where access to certain fields and data are restricted per user, group, or role then you would use section access to control the available fields and data from displaying.

One of our community members has also made mention you can use:



Tag Fields

[Hidden Field 1],

[Hidden Field 2],

[Hidden Field 3]

with $hidden;



Thank you!


Can't see the video? YouTube is blocked by your organization or region? Download the .mp4 to view on your computer or mobile device?



Michael Tarallo

As many of you know, custom themes shipped with Qlik Sense February 2018, and we covered how to start creating custom themes which you can check out here -How to create a custom theme in Qlik Sense. But did you know that Qlik Sense February 2018 also shipped with a new Theme API under the Capability APIs collection?


What can you do with the Theme API?

The Theme API can basically be used for two purposes, to get and to apply themes. You can view the documentation here - Theme API. Getting a theme is useful for applying styles to extensions, widgets, and mashups that are identical to the theme style. You can also apply themes to both Qlik Sense apps and independently of the theme set in the Qlik Sense app to native Qlik Sense objects created or embedded using the Visualization API (or app.getObject, if you're still using that).


You can get a theme using one of two different methods, the `get` method and the `getApplied` method. The difference is that the `get` method you call on the `qlik` object and pass a theme id to get any theme in your extensions, while the `getApplied` method you call on an instance of an `app` and it simply returns the current theme applied to that app. The `getApplied` method is particularly useful for widgets and extensions, since it allows you to style your widgets and extensions in such a way that they will match the theme the user applies to their app.


Both the `get` method and the `getApplied` method returns a promise which resolves to a `QTheme` object. The `QTheme` object currently has two methods available on it, the `getStyles` method, and the `apply` method. The `getStyles` method can be used to get a particular style by passing it a few parameters. It's an easy way to find the style you are looking for in the `QTheme` object. The `apply` method is one of the ways in which you can apply a theme to all visualizations on the page.


You can also apply a theme using the `apply` method of the Theme API without first fetching a `QTheme` object. The `apply` method of the Theme API just requires that you pass the theme id. These apply methods are particularly helpful for applying a theme to mashups and other embedded visualizations. Below is a code sample and image of the mashup with the theme applied.


require( ["js/qlik"], function ( qlik ) {


 var app = qlik.openApp('Helpdesk Management.qvf', config);

} );



There's one final method to mention, and that is the `save` method. The `save` method allows you to programmatically set the theme in a Qlik Sense app. This differs from simply applying a theme, as it actually sets and saves the theme in the Qlik Sense app, and not just for the session like the apply methods do.


And that's the introduction to the Theme API.

Hi Guys - do you have 4 minutes? Good, then let's forego my normal formalities this morning and jump right into it!


Here are some recent product and resource updates s well as an informal list of features for the next release of Qlik Sense - April 2018.


Let us know what you think in the comments below.




Michael Tarallo (@mtarallo) | Twitter



Links mentioned in the video are:





  • Can't see the video?
  • YouTube blocked by your organization or region?


Download the attached .mp4 to view on your computer or mobile device.

As a member of the Demo Team, I often use random, dummy data to build demos.  If the data is not exactly how I would like it to be, I can tweak it to best illustrate Qlik products and features.  One of the tweaks that I often make is to update the dates in the data model – I take an old data set from a few years ago and refresh it so it looks more current.  The AddYears and AddMonths functions make this easy to do.


The AddYears and AddMonths functions can be used in the script and in a chart.  Here is how the AddYears function is defined in Qlik Sense Help.



This function returns the date occurring n years after startdate or, if n is negative, the date occurring n years before startdate.



AddYears(startdate, n)


The AddYears function adds or decreases a date by the number of years indicated in the second parameter.  If the parameter is positive, the date is increased, and if the parameter is negative, the date is decreased.  In the table below, the Date column has the original date.  The AddYears(“Date”, 5) column increases the date by 5 years.  The AddYears(“Date”, -5) column decreases the date by 5 years.  You can see how easy this to use to refresh the dates in your data model.


The AddMonths function works the same way except the AddMonths function has a third parameter to set the mode.  The syntax looks like this:



This function returns the date occurring n months after startdate or, if n is negative, the date occurring n months before startdate.



AddMonths(startdate, n , [ , mode])


The mode, as defined in Qlik Sense Help, “specifies if the month is added relative to the beginning of the month or relative to the end of the month. If the input date is the 28th or above and mode is set to 1, the function will return a date which is the same distance from the end of the month as the input date. Default mode is 0.”


Let’s look at some examples.  In the table below, the AddMonths(“Date”, 3) column add 3 months to the date in the Date column and AddMonths(“Date”, -3) shows a date 3 months prior to the date in the Dates column.  By default, mode is 0 so by excluding it I am assuming the default value.  So you can see that AddMonths(“Date”, 3, 0) returns the same results as AddMonths(“Date”, 3).  If I set the mode to 1, AddMonths(“Date”, 3, 1), it will take into account the distance of the date from the end of the month when the day is the 28th or above.  You can see that for the Dates 1/1/2013 and 1/15/2013, AddMonths(“Date”, 3, 1) returns 4/1/2013 and 4/15/2013, respectively, as you would expect.  But for 1/30/2013, the results are a little different.  Since the 30th is past the 28th day of the month, the function checked to see how many days from the end of the month the day falls.  In this case, the 30th is 1 day from the last day of the month (which is the 31st for January).  So the results of AddMonths(“Date”, 3, 1) will return a date 3 months later and 1 day from the last day of the month, hence 4/29/2013 since there are 30 days in April.


The AddYears and AddMonths functions can also be used to create a new date in your data model.  For instance, if you need to create a new date field that is one month after a transaction date, you can do that in the script with an expression like this:


AddMonths(“Transaction Date”, 1) as “New Date Field”


There are many ways these functions can be used in your app.  The one thing to keep in mind is if you are going to increase or decrease the dates in your data model, you should do so consistently.  Make sure you are updating all dates in the data model by the same time frame.  This way, date relationships in the data model are maintained throughout the app.  You may also need to update other date related fields like day, week, month, year, etc. if you are using these fields in your app.




Hey Guys - if you have been following Qlik, then you know that once again Gartner has placed us as a leader in the Magic Quadrant for Analytics and Business Intelligence Platforms for the 8th year in a row ... AND.... you know that every year around this time we participate in a friendly, live, on-stage Business Intelligence competition know as the BI Bake Off. This informative and exciting session is held during Gartner's Data Analytics Summit and hosted by BI research VP Cindi Howson, previously of (@BIScorecard) fame. It's a time and place for Qlik and its competition (Tableau, Microsoft, MicroStrategy) to showcase their greatest strengths...and possibly expose a few weaknesses - in front of many organizations' data analytics leaders. Overall, despite our competitive spirit, it is an awesome experience and a fun time to be had by all. Our presenter Josh Good (@joshdotbad) - led an entertaining and interesting session, showcasing Qlik's solution.

DXeP-6nVAAAcTkg.jpg large.jpg

Prior to the event, the Qlik team prepares a solution following a provided script based off of a public data set given to them by Cindi. Data usually centers around a topic in which each vendor can show how they can "do good" with the data, which is consistent enough to facilitate a side-by-side comparison. In the past we have analyzed traffic fatalities, homelessness and college debt, but this year the data centered around the deeply emotional opioid epidemic plaguing this great nation.

During the session, each vendor takes turns using their software to present their analytics while showcasing the capabilities of their software within a few different categories.


Qlik on stage - on the big screen - BI Bake Off Gartner Data Analytics Summit

Take a brief look at Qlik's solution highlights reel presented for each topic and let us know what you think by leaving a comment, question below - the timecode links for the section categories are listed below:

Gartner BI Bake Off Qlik Highlights Reel

To see an actual Qlik Sense product demonstration analyzing the Opiod Crisis check out this webinar presented by the Qlik Healthcare team: Analyzing the Opioid Crisis with Qlik - Webinar - YouTube

Analyzing the Opioid Crisis with Qlik - Webinar

We'd like to thank the entire Qlik team for a job well done as well as Gartner and Cindi for hosting another great event. Stay tuned to learn more about our future capabilities and be on the look for Cindi's take on the Bake Off on her blog space at Gartner.


Michael Tarallo (@mtarallo) | Twitter



Can't see the video? Access to YouTube restricted? Download the .mp4 attached to this post.


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 ,


Hi guys, in this video edition of the Qlik Design Blog, I cover a well known but often misunderstood chart function known as Aggr(). Aggr() is used in advanced calculations when you need to make a second aggregation based on the result of the first. Such as which customer in which country had the most orders. Note that in combination with AGGR you can also use the FirstSortedValue() function with your aggregated measure as an argument, in order to display the dimension along with the aggregated measure. I provided examples below. Enjoy!




Let's Break It Down


Spotting the difference and piecing it all together so you can see how it works is a great way to internalize the function. This can be done with either Qlik Sense or QlikView. I put this together in a manner that allows you to see the breakdown of how aggr() works in conjunction with the video.


Which customers had the most orders?

  • Use a table object
  • Add Customer as dimension
  • Add Count(OrderID) as measure
  • In the table click the header column to sort - Descending - Customer on top had the most orders


Which countries had the most orders?

  • Use a table object
  • Add Country as dimension
  • Add Count(OrderID) as measure
  • In the table click the header column to sort - Descending - Country on top had the most orders

Which customers, in what countries has the most orders?

  • Create a table object
  • Add Country as dimension
  • Add Customer as dimension
  • Add Count(OrderID) as measure
  • Hmmmm.... that's not right - it shows me the number of orders within each customer for each country, not the most.
  • Ah - if I use Aggr() with my expression - I can use the Max() aggregation to get the most of the order count for each customer as in:
    • max(aggr(Count(OrderID),Country,CustomerName)

BONUS Feature: FirstSortedValue()

  • But how do I display the corresponding customer value in that country?
    If I just use Country in the table, the results are similar to my previous example and are not correct.
    • Ah - if I create a measure using the FirstSortedValue() function along with my aggr() expression I can display the Max customer in that country in my table.

      • FirstSortedValue(CustomerName,-Aggr(Count(DISTINCT OrderID),Country, CustomerName))


FirstSortedValue( value, sort_weight, rank ):

FirstSortedValue() returns the value from the expression specified in value that corresponds to the result of sorting the sort_weight argument. So CustomerName is the value I want to display or return in the table and -aggr(Count(Distinct OrderID),Country,CustomerName) is the sort_weight argument...where " - " is used to denote the highest (or most) - the number of orders. This returns the value of the customer corresponding to the most orders for that customer.


The result - a single consolidated table showing you the customers with the most orders in their corresponding countries.

2-26-2018 5-38-23 PM.png

Which Customer in what Country had the most orders


Michael Tarallo (@mtarallo) | Twitter





Custom Themes is one of the new features shipped with February release so make sure you are updated before trying to come up with your own.


To create a new theme, first we need to understand what exactly is a theme and what it can do for us. A custom theme is a collection of files stored in a folder, it must contain a definition (QEXT) file, a main JSON file, and optionally any other assets you might need to support the custom theme such as CSS files, custom font files, images, etc.


Custom themes let users to quickly apply different levels of customization to their apps, some of you might be interested in having your custom color palletes, while someone else might just need bigger font size, both can be achieved with Custom Themes. Theme authors can target individual visualization objects via JSON and/or use a custom CSS to modify the sheet styles.


From Qlik Help


The custom styles can be defined in two ways:

  • In the JSON file you define the style for the individual visualization types, for example bar charts and line charts.
  • CSS styling is more general and flexible. You can, for example, style sheets, visualizations and extensions.


Creating a simple custom theme


I'll be using Qlik Sense Desktop for this example, please check the help page for instructions on how to install a Custom Theme in Qlik Sense Server.


  • Go to your extensions folder: C:\Users\[username]\Documents\Qlik\Sense\Extensions
  • Create a new folder, I'll call mine theme-helloworld
  • Create a new file and rename it to theme-helloworld.qext. The QEXT file is a definition file that contains a few lines, where only name and type are the only mandatory lines.


  "name": "Hello World theme",
  "description": "My first custom theme",
  "type": "theme",
  "version": "1.0.0",
  "author": "Arturo Muñoz"


  • Now, it's time for the JSON file. Create a new file, name it theme.json
  • Edit the theme.json file with your favorite text/code editor
  • My advice is to start your theme with the sample code you can find in Qlik Help so you can familiarize with JSON and it's properties:


  "_inherit": true,
  "_variables" : {
    "@greenColor" : "#61a729",
    "@text": "#4c4c4c"
  "color": "@text",
  "fontSize": "12px",
  "object" : {
    "title": {
      "main": {
      "fontSize" : "16px"
  "dataColors": {
    "primaryColor": "@greenColor"


  • The JSON file will change the primary color of your charts from Qlik dark blue to the custom green as defined in the variable at line 4 and will also modify the charts title to a font size of 16 pixels.

    This is a simple example but there are much more you can do with the JSON file, you could for example, define new color schemes for measures, change the axis', labels, legends font size and color and much more.

    Actually you could even load your custom CSS through the JSON file so you can target and hack any predefined style within your app, so you could modify object paddings, change font family, and so forth.


If you've followed the steps above you should have something like:


How to activate a Custom Theme?


Check how to apply a Custom Theme to your app in the animation below






Tips from the expert... and theme sharing!


I've asked my colleague Nabeel Asif for some tips since he created the Custom Theme based on Color Brewer that we are sharing  today (check the attachements). This is what he said:


All of our standard themes just give one sequential and one diverging gradient for measures, and two color schemes for dimensions. But you can actually define as many options as you like through the “scale” and “palettes” properties in the theme’s JSON.


For sequential and diverging gradients, Qlik uses seven colors to define a scheme. But you don’t actually need to specify all seven colors. Just define the two colors at the extremes, and Qlik does a nice job of calculating the rest. Of course, if you want very specific colors you can define them yourself.


Often apps will be designed with red representing something bad or dark colors representing higher values. To maintain this look as the user switches themes, you should follow these conventions in the JSON:

  • Diverging scales should be ordered from reddish hues to bluish hues.
  • Sequential scales should be ordered from dark to light. 


Please don't forget to always check Qlik Help for the most recent specifications.



steve.pngToday's Guest Blogger is, Qlik's Steven Pressland. Steven joined Qlik in 2016 as a Solution Architect. Prior to Qlik he was responsible for BI transformation and delivery across a number of Financial Services organizations. This experience and extensive product knowledge enables some of our largest enterprise customers to succeed at unlocking business insight through Qlik. Steven leads the global Advanced Analytics team within Pre-Sales and through this role brings us this update.  In this blog, Steve recaps the last 8 months of Qlik's latest enhancement to Qlik Sense and QlikView: Advanced Analytics Integration (AAI). He also shares the details on what's new with AAI in the February 2018 release including a sample on how it works.

Take it away Steve!


8 Months of Advanced Analytics Integration

Last June when Qlik Sense was released, it contained one of the biggest changes to the engine since the second generation data indexing engine engine was released with the launch of Qlik Sense in 2015. The server-side extensions API, more commonly referred to as Advanced Analytics Integration (AAI) was made generally available, providing a way for calculations to be externalized from the engine on demand as part of the user’s session.


Advanced Analytics Integration - Qlik Sense in 60


The capability and flexibility enabled developers to explore new use cases for their Qlik applications, and most importantly business users have more access to insights than ever before.


When we launched AAI, two open source connector projects were created. One for python and one for R. Supporting these two popular languages first, provided a way for users to connect to two of the most popular advanced analytics tools of choice. Since then, the R&D team has broadened Qlik's AAI projects by adding examples for C#, C++, GO and JAVA.


Over the last 8 months we have seen customers and partners deliver solutions using the out of the box sample R connector as well as create custom calculation engines to solve other calculation problems such as decryption and live data augmentation.


UK Reported Crime Demo App.jpg

UK Reported Crime Demo App



The next big milestone for AAI was the November 2017 release of QlikView, which brought the same AAI capabilities launched with Qlik Sense to QlikView. This gave QlikView customers a whole new set of opportunities for both old and new applications. The underlying technology for QlikView is the same as Qlik Sense, meaning you can share all the services already built with only a simple configuration step on your desktop or server. If you have not yet looked at how you can bring new a new perspective to your QlikView applications with Advanced Analytics Integration I will be presenting a session dedicated to AAI for QlikView at Qonnections 2018 (<- Customers and Partners sign up here), I hope to see some of you there.


The Qlik Community

As with many aspects of the Qlik product line, AAI’s success is made possible by the strong community who collaborate and share. The Qlik community space for advanced analytics integration is widely used and moving forward. This year we are planning to give it a facelift to make it easier to navigate and find information so more customers can make use of the technology in their businesses. If you have not yet got started with AAI or are experienced in the technology, do drop by and explore the resources available.


What’s new

This blog was written to coincide with the Qlik Sense February 2018 release, which is now generally available and includes the latest feature release for AAI which now supports whole table processing in the load script. A commonly requested feature is to be able to batch process algorithms for tasks such as model training and scoring. This was possible in a limited row by row capacity at launch, however with the new version we now support sending whole tables to and from the external calculation engine as a standard part of the application load script - made possible through a simple extension to the LOAD syntax.


So, how does this work?

When writing your application script there is now an extended syntax to the load statement, like the FROM or RESIDENT statements that have their specific uses. Qlik can now use the reserved statement, EXTENSION, to specify that the source of the loaded data table will be the result of an AAI function.


The following example calls an R script to score some input data using a table already loaded into the Qlik data model and returns a result:


 num(p,'##0.##') AS Predict_Score 
 R.ScriptEval(' … R Script Here … ',
 Rentals{RowID,Year,Month,Day,RentalCount,WeekDay,Holiday,Snow });

As you can see, the returned results are accessible to be processed using all the standard Qlik script functions providing a useful addition to the script syntax.


AAI Script Process.jpg


Where to Next?

There are lots of resources available to help you succeed with Advanced Analytics Integration, here are a few of the key links to explore:



  • This repository provides a server-side extension (SSE) protocol based on gRPC that allows you to extend the Qlik built-in expression library with functionality from external calculation engines. You can use external calculation engines in both load scripts and charts. In Qlik Sense and QlikView, you connect to these server-side extensions (SSEs) by defining analytic connections.
  • This repository provides a server-side extension (SSE) that allows you to extend the Qlik built-in expression library with functionality from R. You can use this in both load scripts and charts. In Qlik Sense and QlikView, you connect to this SSE R-plugin by defining an analytic connection.
  • The AAI Advanced Analytics Expression Builder is a Qlik Sense extension used to create advanced analytics expressions as master items and wrap these in to a pre-built visualization. These visualizations use native chart types and can be edited either as a master item or un-linked and customized.

  • Qlik Sense extension which allows you to create charts to perform advanced analytics by simple drag and drop without complex scripting. This extension works on the top of the Advanced Analytics Integration (AAI) functionality with R.

Hope you find this information useful.


Steven Pressland
Senior Solution Architect


On the demo team we end up working with both the Viz API to create and embed native Qlik Sense charts in apps, as well as creating custom components powered by the Qlik Engine using enigma.js, and we do this in Angular, React, and plain html, as we try to demo all of the ways that Qlik can be used. So after my last blog post (Starter project for developing QAP-powered apps with React and enigma.js) we had an idea on the demo team: let's try to unify all of our different custom components and templates. So we've been hard at work accomplishing that.

You may have seen Yianni's last blog post, qdt-components - A Components Library that can be used in simple Html, Angular 5 and React, introducing this effort. The goal is to have the qdt-components library include custom components powered by Qlik Engine, as well as a way to create and embed native Qlik Sense charts. Right now, the qdt-components library contains a few components, but we're not totally ready to start talking about all of them yet, so we're just sticking to the component that allows you to create and embed native Qlik Sense charts by interfacing with the Viz API.

The big addition since Yianni's post is that we've added a React template, so now we have an Angular 5 template, a plain html template, and a React template, all which load the qdt-components, which is pretty cool. This means that the components only need to be built once, but can be used in a project with almost any frontend stack. I say "almost" because in order to use the component that interfaces with the Viz API there's no getting around loading Angular 1.5 and RequireJS into the global namespace, which means they still have the chance to create conflicts. But you can choose not to use the component that interfaces with the Viz API if you don't have a need for native Qlik charts, and it will avoid loading all of the Capability API stuff, but if you choose to use it, you don't have to worry about writing any of the boilerplate you usually do when connecting to the Capability API.

Documentation, examples, and custom components are coming (and oh yea, we plan on using https://picassojs.com/), but that's the update for now. You can check out the qdt-components library and the templates here - Qlik Demo Team · GitHub. And demos of each of the 3 templates below


Angular 5 with qdt-components

React with qdt-components

Simple html with qdt-components

And-the-winner-is-002.pngHey guys - it has been a little over a month since I introduced you to our first Qlik Community Twitter Contest within my 2017 year in review blog. I want to thank you for your contributions and was very pleased to see the number of awesome examples demonstrating Qlik in action. That being said, all contest submissions come to end and well, it's time to announce the winner...watch this brief video to learn who it is and what the winner's 2017 Qlik Highlight was!





Can't see the video? Access to YouTube blocked by your organization or region? Download the attached .mp4 file to view on your computer or mobile device.

Do you ever use inline tables in your Qlik Sense app?  I do, especially when I need to add a small amount of data to an app that does not already exist in an Excel file or some other data source.  With the November 2017 release of Qlik Sense, manual entry was added in the Data manager.  With manual entry, users have the option to either manually enter their data into the table editor or paste their data into the table editor to add it to the Data manager.  I like this new small feature because it makes it very easy to copy Excel data or a table from a web page and add it as a table in the Data manager.  Let’s look at how it works.


From the Navigation menu, click on Data manager to open it.


Once the Data manager is open, click on the plus sign to add data.  On the left, there is an option for Manual entry as seen below.  Select Manual entry to open the Manual entry editor window.  Once the Manual entry editor window is open, users can enter a name for the table they would like to add as well as the field names and table entries.  To enter data, double-click on the cell and start typing.  You will find that as you enter data into the cells, additional rows and columns are added automatically.  Once you are done entering the data for the table, click the Add data button at the bottom right to add the table to the Data manager.  Users can also paste in rows from an Excel table or a webpage which is how I like to use it.  Simply, copy the rows you would like to add, select the entire data entry table by clicking a column or row until they turn orange (as seen below) and then paste the table/rows (Ctrl-P).

manual entry paste.png

After the data is added to the Data manager, it can be loaded and added to the data model.  Refer to Qlik Sense Help for shortcuts that can be used when using the table editor.  Now, if you are accustomed to creating inline tables via the script editor, you can still do that in the script editor using the syntax below:






This script will add a Products table with 2 fields, Product and Sales.  Five rows of data will be added to the Products table.






Manual entry allows users to manually enter data into the Data manager in a few easy steps.  Users do not need to remember the inline load script and they can load just the rows of data they need.  Manual entry is ideal when you have a small amount of data to add to an app.  When you have a lot of data, loading directly from the source or an Excel file may be easier.




Hi guys - in this edition of the Qlik Design Blog, I have a short video that briefly introduces you to some of the new features available in Qlik Sense February 2018. Some of the related features are already available in Qlik Sense Cloud and can be used immediately. (note: themes is not available in Qlik Sense Cloud). The software download is currently available to customers and partners who have signed up for the Technical Preview and will be made available for download in our customer downloads area this month.

Qlik Sense February 2018


Available shortly on the Qlik Help Channel - see more of these new features in action with our how-to tutorials.


Please let us know what you think by posting comments below.



What's New - Qlik Sense February 2018




Michael Tarallo (@mtarallo) | Twitter



Can't see the video? YouTube blocked by your Region or Company? Download the .mp4 to watch on your computer or mobile device.


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
<script type="text/javascript" src="qdt-components.js"></script>
<div id="qdt1"></div>

  • 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: Angular5



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



Filter Blog

By date:
By tag: