How To Create Variable Toggle Buttons in Qlik Sense

One of the techniques that I often use in QlikView is having dynamic dimensions and expressions working off of toggle buttons. This gives more flexibility than cycle expressions and cycle groups alone – particularly when you want to affect a number of charts at the same time. In QlikView this is straight forward, but in Qlik Sense it is less obvious, but this quick recipe shows how to do it.

Overview

If you are not aware of how you can use buttons and variables in QlikView to have a more dynamic interface then you may want to read my previous post; QlikView Buttons, Where, When and How. Once you have the ability to set a variable on a click then with Calculated Dimensions and the ability to pick an expression a lot of information can be conveyed through just a few objects.

When I was with a client, who was aware of this approach in QlikView, and they asked me to do the same thing but in Qlik Sense, it struck me that this was not so straight forward. The stock answer with Sense is that you can do absolutely anything – provided you write your own extension to do it. This is not something I had time to do (they had seen how quick I had done the same in QlikView) and it was not something I was looking to maintain. It simply is not possible with Qlik Sense out of the box, so what I needed was some kind of compromise.

The Extension Minefield

The open source ecosystem that has been opened up around Qlik Sense is fantastic in some respects, but is problematic in others. You can get some really cutting edge visualisations that you can plug in for free, created by talented and driven individuals. However, can you give the IT team at your organisation a cast iron guarantee that the extension you have chosen to plug in will continue to work against all new versions of Sense and any data set you throw at it? The truth is; perhaps not yet. This is something that I believe Qlik will take steps to address at some point, but for now…

The best way ahead, as I saw it, was to use an extension that could take a click and set a variable, and was as close to approved by Qlik as I could get. Fortunately there is a control for sheet navigation by Qlik staffer Stefan Walther which does some of what I wanted. This control (which you can get from this Branch Link) allows the setting of variables, but does not allow the colour of the button to be set based on a variable value. It does however allow an expression to be used for the button label – this gives us something to work with.

How To Build The Toggle Buttons

Once we have this extension installed in Sense we can use it to build a set of toggle buttons that look like this:

Whilst the colour can’t be used to denote the active button, the dot either side of the label makes it clear which the active option is. This can be achieved in quite an elegant way using techniques that are already well known.

In order to have a variable that can be set by a button we can initialise it is in the load script (it can also be done in the UI if you prefer) using this code:

let vDim = 'Product';

Now, to change the variable we need a number of buttons, one for each option, then set the values on the button click. First of all we need to drag the extension component onto our sheet:

This then needs to be configured to look right and set our variable.

On the General accordion element we want to turn off the Titles and Details:

On the Layout options we will ignore the Label for now, and just set the other options:

The Style option dictates the colour of the button, you will probably want to choose one of the more neutral ones – like the Primary colour. You will want to set your button to full width (so it will align with other buttons) and ensure you have turned off the icons (as this will clash with our dots).

Although the main purpose of the extension is to provide navigation, we don’t want to use this functionality – so this can be set to None:

The functionality that we do want to use can be found on the Actions tab. Turn on the Apply Action Before Navigation flag, and then select Set Variable. We can now specify the variable name we want to amend and the value we want to put in to that variable. Note, for future reference, that there are quite a few different actions, and that the extension allows the chaining of two actions:

Now we have a button that can set a variable, but we can’t see whether that variable has been set. This requires a bit of coding on the button label, but as this code is going to be similar on each button in each toggle group we want to put this code into a variable. As each button is different we want to have a variable that can receive parameters, like I have covered previously in this blog post on Qlik Variables With Parameters.

The variable can again be created in the load script, with the following code:

set vBtnLegend = if($2 = '$3', '● ', '') & '$1' & if($2 = '$3', ' ●', '');

This code will use the first parameter as the text on the button, the second parameter is the name of the variable being set (in our case vDim) and the third parameter is the value which the button sets. The label is always returned by the parameter, optionally surrounded by a ● symbol ( =chr(9679) ) if the variable passed contains the value passed.

This variable is applied in the Label property, underneath the Layout accordion.

The full code to insert reads:

='$(=$(vBtnLegend(Product, vDim, Product)))'

The nested dollar sign expansion is required by the way that variables with parameters work. The inner DSE returns the code that builds the label, whilst the outer DSE executes that code.

By having different variables, the same extension and button legend variable can be used to give multiple banks of toggles in a single app – perhaps for Dimensions and Expressions in charts. Different colours can be used to denote different buttons affecting different variables:

Once you have the variables being set you should be able to apply these as Calculated Dimensions, or Dynamic Expressions in your Sense charts.

Future Enhancements

In an ideal world there would be an extension that behaves exactly how we want, that we feel confident will work well and work with all future versions of Qlik Sense. It may be that a future version of the Sheet Navigation and Actions extension has the extra functionality we need (the ability to have a colour expression would pretty much do it). For now though there is the solution above, finding a different extension or building your own.

Hope you find this example useful. Please feel free to add a comment below to let me know your thoughts.