A common mistake when you start with Qlik Sense extensions is to forget about setting Initial data fetch in your extension. Typically you would include something like this in the initialProperties of your extension:
That would work, and make sure your extension gets the 500 first rows of data in the layout provided to your paint method. But sometimes you want the app developer to be able to set the number of rows fetched. In that case you can simply add the qHeight parameter to the property panel like this:
And the result is a new section in the property panel, where the app developer can set the number of rows initially fetched.
When you work a lot with something you develop opinions about how things should be done. Here is my list, after two years as an independent contractor, mainly with Qlik Sense extensions and mashup, and of course based on my experience from Qlik.
Git is the industry standard for version control, and it’s free.
1. Use version handling
There is no reason not to use version handling of your code. I use Git for everything, but if you are still using something else, that might be OK too. You probably should consider switching to Git, but as a developer that might be a decision taken over your head.
The benefits of using version control are enourmous. You can easily go back and find the reason behind a bug or the implementation behind that feature the customer now wants in another extension too. Invaluable!
You also should keep a version number in your qext file, and change it every time you deploy a new version. The main benefit of this is that you can see what version of your extension is in use in a Qlik Sense installation. I have described how to do this in a previous post.
2. Always test your extension in a browser
3. Stay in your sandbox
do not inject HTML elements outside of your own element
prefix your CSS rules so that it affects only the extension
avoid html id’s, since they must be unique within the page. If you must use one (really only when you use a library that needs an id) make sure they are unique for each extension instance (test with multiple instances of the same extension)
There are occasions when you need to break theses rules, but only do it when it’s need for your extension functions.
4. Use modern development tools
Pretty soon after you have started with extension development you will grow out of the Qlik Sense dev-hub extension editor. A modern, nodejs-based environment, with a good text editor gives you a lot of benefits, and works well with version handling software. I would recommend the following:
a good editor. I mostly use Visual Studio Code, but there are others that probably are just as good.
a CSS preprocessor like less helps you with prefixing css, add vendor prefixes etc
a lint tool, to find common errors an enforce good programming practices
5. Always keep your extension backwards compatible
After a while your users will most likely want more functionality in your extension. They might want more interactivity, more rendering options, perhaps support for more dimensions and measures. You will probably add new settings giving your extension more flexibility. You might also find that some of the stuff you originalyy programmed was not perfect (that happens to all of us..). But if you have deployed your extension to production, make sure that all your changes are backward compatible. If you don’t you will have huge problems when you deploy the new version, with breaking apps.
If you find it impossible to make your new extension backwards compatible you probably should not be making a new version, but a new extension, with a different name.
6. Base your rendering on only the layout
The model behind Qlik Sense extensions (and the built-in charts too, actually) is that the extension is based on a Generic Object, where you configure the Generic Object in the property panel and use the layout for rendering. Stick to that model, do not break it. If you need more data for your rendering, add it to the properties structure. Avoid:
creating HyperCubes and ListBox objects programatically, add them to initialProperties and the property panel instead
fetching variable values programatically, add expressions to the property structure instead (that also gives the app developers more options, like hard-coding values, or making them change automatically as selection state (or data) changes
It is however OK, even recommended, to call API methods for:
showing lists of available values in the property panel
making selections etc when the users clicks on buttons, menues or other parts of your UI
This is not a huge release – it has basically only one new feature.
You can now refresh your datasets when the Qlik Sense app is reloaded.
This will replace the existing dataset in the spreadsheet with new values but keep formatting. The same selections you used originally will be used, and the same calculations.
if the app has been updated after you insert a dataset in your Excel spreadsheet, you will see the text ‘Outdated’ in the list of inserted tables in the add-in
the menu that is now available in the table list contains a choice to refresh the data
if you select this alternative, the addin will apply the same selections originally used when extracting data, and then extract the same data, replacing the old dataset
the text ‘Outdated’ will no longer show
While this is a small change it is pretty important and could save you a lot of work. No longer will you need to make a new export of an Excel file and paste it into your spreadsheet. The add-in takes care of that for you.
Good to know
only datasets you explicitly select to refresh will change. You can keep the old state for some if you wish.
you can make a copy of your spreadsheet (copy ‘Sales Aug’ to ‘Sales Sept’ for example) and refresh the copy but keep the original unchanged
Excel will not overwrite cells for you, so if your dataset might be larger this time you should not have any content below it.
You’ll find more info, setup instructions etc here.
call the Engine API method doReload(). Use this in Qlik Sense desktop, since it’s the only method available.
use the repository call App reload optionally with the help of the callRepository method. This is of course only relevant in a server installation.
You’ll find code examples in my original post, and also how to know if you are running in server or desktop.
What happens when you use /app/reload ?
While this method works well in some scenarios, like when you just want to run one reload of an app ASAP, it has some limitations. Behind the scenes Qlik will create a very simple task for you, and try to start it immediately. The task will look like this:
Very basic, just an app, a name, an the default Task session timeout of a day (or 1440 minutes). No triggers, since the task is started by the REST call, no tags, no custom properties. And, perhaps most important, no retries. This means that if you create a series of reloads this way, most likely only the first few will succeed, the rest will fail since there is no engine instance available.
Another method to start a reload
This will create the reload task the way we want it and return the id for the task, whish we can use to start it. That’s just another call to the Repository like this:
And that’s it. A little more code than the second method, but much more control over what we get.
Many Qlik users also use Excel. Typically they want to build spreadsheets with Qlik Sense data, add som calculations, possibly some non-Qlik data or several datasets. Up until now the way to do so has been to export your dataset inexcel format, open it in Excel and continue working from there. If you need another dataset, you make a new export and copy-and-paste the cells into your spreadsheet. If the Qlik Sense app is reloaded with new data, you start all over again, or use copy-and-paste to bring the new data in.
The recently introduced Excel add-in Add Sense makes another way of working possible. Instead of exporting to a new Excel file for each dataset, you can work from within Excel, place the cursor where you want the data, select from a listbox and click Insert, and it is inserted for you. When you want another dataset, from the same or another app, repeat the process.
While it is not difficult to get started with Add Sense for Excel there are som possibilities that you might miss, so here comes a walk-through.
Qlik Sense security model means that you can contriol both which users are allowed to access the data and from what servers you are allowed access. Since Add Sense is loaded from its own server, you need to allow upper88.com access as described here.
Connect to server and app
The first thing you need to is to connect to a Qlik Sense server and an app. The server name is just about the only thing you actually have to type in in the add-in, everything else can be selected from dropdown. The server name would be the same server you use for working with Qlik Sense, possibly with a suffix (called virtual proxy in Qlik Sense terminology). you can use the link to Qlik Sense hub, but remove the hub part. Once connected you get the list of apps you have access to. You only have to connect a spreadsheet once to an app, since the add-in saves connection data in the spreadsheet. This also mean that if you copy the spreadsheet, you will copy connection data too, so the copy will have a configuration.
The core of the add-in is of course the import of Qlik Sense data sets. In the import tab you find the visualizations defined in the app. Only visualizations with tabular data (called hypercubes in Qlik Sense) will be displayed, and only those that have a title.
its good practice to define usable datasets for Excel as Master visualizations in the app. They won’t show in the app (if you don’t add them to a sheet) but will be easily accessible in Excel
number formatting is transfered to Excel, so make sure to have a good number format
the import tab is the best tab for new users, with limited Qlik Sense experience, so preparing good datasets can help them in using the data
Filtering the data
Next to the app dropdown you find a button with an icon like this:
When you click on it the app will open in Qlik Sense (in a new browser tab or window). This window will use the same Qlik Sense session as your Excel add-in. So selections ma
de in Qlik Sense will affect the datasets you import into Excel. In the add-in panel, current selections are displayed below a small comand bar with some buttons to handle selection state:
There is also a Filters tab, which gives you some possibilities to filter your data, enough for simple selections, but using Qlik Sense itself gives you far more possibilities. A good way of working is to use Qlik Sense for exploration of your data, and when you find something interesting import it into your spreadsheet. Note that when selections change, already imported datasets will not be affected. This allows you to easily compare different datasets, like sales by product for different regions, or different months.
Checking what your tables show
One of our goals when we started with the add-in was to make it easy to see what selections lies behind the datasets and when the data was from. We solved this by saving some metadata for
the dataset. You find that in the Tables tab:
As you can see the list of tables contains the title, selections made, where in the spreadsheet the table is and when the data was reloaded. If you move a table in your spreadsheet the metadata will follow (but the sheet location might temporarily be outdated). If you copy the table however the metadata will not follow, it’s better to import it again from Qlik Sense.
You have been running Qlik Sense for a while in production, with multiple apps, some extensions and mashups. Or, you are just starting to work on a Qlik Sense site, where you don’t really know what has happened before. And perhaps the extensions you are using in development are missing or they seem to be of an older version. How do you find out what is on the server?
Whenever you are running Qlik Sense, whether it’s the standard built-in client or a mashup, the client will call the server to find out what extensions (including mashups) are available. This call has the format:
https://[server]/[proxy]/qrs/extension/schema (+ xrfkey in server installation)
Dump of the extension list, taken from Chrome developer console
The reply you get is in JSON format, and contains all extensions available with their id (the qext filename) plus the contents of the qext file. It’s quite readable and when you look at it in the developer console you can expand the lines you are interested in.
This will give you the extension version number, provided you keep a version number in the qext file, which of course you do.
The property panel is a key part of your Qlik Sense extension. The aibility to set extension properties is what makes your extension both reusable and flexible. At the same time your options are much more limited than in the rendering part of the extension. And since this is Qlik Sense specific all of it, there is not so much information and examples available on the internet. So here are some patterns and techniques I find useful in extension development.
1. Use expressions always
Strings in the property panel can allow Qlik Sense expression by setting “expression: ‘optional’ “. Use that – always. This allows the app developer to use expressions for the property and thereby make the property dynamic. It also allows the app developer to reference a variable and use a variable extension to allow the end user to switch values for the property (horizontal/vertical for example).
It allows the app developer to use an expression, but doesn’t force her. Still a fixed string can be used, and probably will be used. And the good thing thing is you don’t have to bother about that in your extension code, you get this flexibility for free.
2. Dropdown with custom alternative
Sometimes you have just a few possible values for a property, or you want to help the app developer with a list of common values for a property. The dropdown component is a good choice for that. But you risk loosing the flexibility of the expression: the dropdown will only make it possible to select a value at design time, no possibility to make it dynamic or affected by a variable. Or the list is really not a complete list, there are alternatives for the more advanced app developer.
In those scenarios you can combine a dropdown with a separate field that allows expressions like this:
create a dropdown with your alternatives
add a ‘custom’ alternative to the dropdown
add a field with expression: ‘optional’ for the custom value
give the field a show function, that returns true if the selected value is ‘custom’
In your extension code you will need to check for custom values, something like this:
var width = layout.width === ‘custom’ ? layout.customwidth : layout.width;
3. Add properties to dimensions and measures
Sometimes you need a property for every dimension or measure. In that case you can extend the built-in dimensions and measures objects by adding new properties. You do this simply by setting the items property to the properties you want to add, and Qlik Sense will merge the default properties with the ones you hav defined. An example:
Note that the ref should begin with ‘qDef.’. That will mean it will be part of the measures property. To the app developer your roperty will look just like the built-in ones. You can do the same thing with dimensions.
One of the more advanced feature in QlikView is alternate state. It alllows you to have several different selections active at the same time. With set analysis expressions you can then combine your selection sets to gain valuable insights.
While alternate states are not exposed in the built-in Qlik Sense client, you can easily add them to your custom extension with just a few lines of code. Let’s see how.
Step 1: add a property panel field
The qStateName property already exists (check the Qix Engine API), so a first step is to map it to the property panel. Lets create a new section under “Addons”:
This assumes a HyperCube, $ is the default state which is always there. This is already enough for alternate state to work in your extension. If you enter a valid alternate state name in the property panel your extension will be connected to it. Problem is there has to be an alternate state in the app, and you need to know it’s name. Lets do something about that.
Step 2: add a listbox with existing alternate states.
Lets convert our property panel to a dropdown list, where the app developer can choose what state the object should be connected to. We do this by setting the component to ‘dropdown’ and adding a function to return the options:
Alternate states ar listed in the app layout structure, so we need to get the app layout and format the states in the format the property panel dropdown wants. The default state ‘$’ is not in the list, so we need to add that ourselves. For this to work you need to have the qlik module available in your extension.
Now you will have a dropdown list in your extension property panel, something like this:
Still doesn’t look much, does it… But it does it’s job. Now we just need a way to create those alternate states.
Step 3:Creating the alternate states
Well, actually you need to do this first. But there are different ways to achieve this:
there are extensions for this
you could do it in Engine API explorer, since its really a one-time thing
or, you could add it to the property panel.
The property panel is not really meant for this, since we are not updating the object properties, but the app properties, but still it’s pretty easy to do. You can add something like this to the property panel:
It’s really not more complicated than that. You will get an inputfield in the propertypanel. If the user writes anything in that field, an alternate state will be created. It will then show up in the listbox, so you can use it in your extension.
It’s really not at all difficult to add alternate state support to your extension. Probably you should do something to show the user that this chart belongs to an alternate state: you can use the header for that, or add some styling or an icon for charts that are in another state. I’ll leave that for you.
A few weeks ago I wrote a post about a pattern I have used to make Qlik Sense apps more flexible and allow the user to choose what visualizations to show. Feedback I got on this(from Rob Wunderlich) is that there is a performance problem with pick(), that Qlik Sense does not optimize pick calls quite as well as you might think, that it might evaluate function calls where the values are not actually used.
I vaguely remember this from Master Summit for Qlik where I believe it was mentioned. At the same time I do know that Qlik from time to time makes improvements in the optimization, so it might not be true anymore. Anyhow, this is something you could easily verfify. And I’ve got a tool to make at least a first assessment of this, the Developer Tools extension. I originally made this to help finding id’s for visualizations, but later has added some timing features to it, that can give us a rough idea about performance in your visualizations.
To do this I made a copy of the example used in my previous post. You find it here. In it I made a new sheet and copied one of the visualizations using pick() into it. I chose the pie chart (not because I like pie charts, but because I wanted one with some data in it). I then made a copy of it, and in the copy removed all pick() calls, together with alternatives 2 and 3 in that call, leaving only the first one, which is the expression that will actually be used of the three in pick(). And I add the DevTool extension to the same sheet.
Run the test
When all is ready, I switch into analyze mode and click on the DevTool button, which creates popups for the two charts. I then make some selections, use back and forward, and I get the following result:
The left chart is with pick(), the right one without. The most interesting figure is the one at the bottom right, the maximum calculation time. As you can see there is a significant difference: 147 ms compared to 57 ms. Seems like Rob is wright: there is (still) a performance problem with pick(), even though in my test case calculation time is so small that users will probably not notice.
This is a very rough test. It’s main advantage is that you can do it quickly. Since there is such a clear difference between the two alternative the result that pick() is considerably slower can be trusted. And the fact that the no-pick alternative actually takes some time (57 and not 5 msek) means that there is some calculation going on, just taking the result from the cache would be faster.