Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

An Introduction to the Theme API

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 ) {


qlik.theme.apply('high-contrast-theme');

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

app.getObject('QV03','rJFbvG');

app.getObject('QV02','xfvKMP');

app.getObject('QV01','a5e0f12c-38f5-4da9-8f3f-0e4566b28398');

} );

mashupthemed.png

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.

14 Comments
chrislofthouse
Contributor

For anyone wanting to leverage the Theme API, but don't know where to begin with actually creating a custom theme, then https://ometistoolkit.com/themebuilder is a great place to start. Simply specify the colours you want and it'll create the files for you. All that is left is to apply the theme in your extensions, widgets, and mashups.

102 Views
Employee
Employee

nice!

102 Views
barryharmsen
Contributor II

We've just launched our online theme editor at Sensetheme, which also includes ready-made templates. Go have a look, I'm very curious to hear your feedback.

102 Views
Employee
Employee

Looks cool. You used lui, nice! I'll have to dig into a little more next week

0 Likes
102 Views
pablolabbe
Valued Contributor II

Cool !

0 Likes
102 Views
katsafone
New Contributor III

Awesome and very useful.  Thanks!

102 Views
kkkumar82
Valued Contributor III

Thanks Chris and Barry, one sad thing is that I am unable to install Feb 2018 version, by any chance can I try this in my Sep 2017 version ?

Not the last thanks Francis for the wonderful posts..

102 Views
roblange
New Contributor II

Thanks Francis, Chris and Barry...we were concerned we could never realise the power of Themes, but you have all made it easy for our business users!

102 Views
ajaykakkar93
Contributor

Can we use it in Qlik Sense 3.2

0 Likes
102 Views
Employee
Employee

Themes officially shipped with Qlik Sense February 2018.

102 Views
ajaykakkar93
Contributor

thanks for update fka

0 Likes
102 Views
ajaykakkar93
Contributor

Hi fka,

     i am having trouble giving style to labels on datapoint for any chartdatapoints color.PNG

102 Views
Employee
Employee

Here's an example for a line chart


"lineChart": {

  "label": {

    "value": {

      "color": "@dark"

    }

  }

}

You can check out which properties can be set on objects here https://help.qlik.com/en-US/sense-developer/April2018/Subsystems/Extensions/Content/CustomThemes/cus...

102 Views
paulosoares
New Contributor II

fka‌, apparently the qlik.theme.apply method doesn't work if Mashup is in an external server. Is there any workaround?

Thanks

0 Likes
102 Views