Qlik Design Blog

March 2018 Previous month Next month

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 ,


Filter Blog

By date:
By tag: