1 2 3 Previous Next

391 posts

# How to add minicharts to Qlik Sense tables

Posted by Arturo Muñoz Apr 21, 2017

A few days ago I stumbled upon one of those little tricks that we all love. Roland Vecera came up with a nice solution to bring minicharts to Qlik Sense. It can help us to increase app data density and make our Qlik Sense tables sexy and informative again. Don't forget to add this to your bookmarks!

In Roland's blog post you will find instructions about how to build a linear gauge, a traffic light gauge, and even whiskers minicharts (right table in the image above),

I particularly like the linear gauge, with this technique we can now simulate small bars that goes along with each one of the table dimension items. The expression used to create the linear gauge 'bar chart' is actually reusable and very simple, looks like this:

repeat('█', rangemax(rangemin( ceil(((column(1)/column(2))-1)*10),10),1) )

The expression will paint a variable number of solid blocks █ based on a given calculation that is evaluated by row. By now you should have a nice grey bar from 1 to 10 blocks.

Next (optional) step is to apply color to it. You could add color based on any criteria you want, in the chosen example Roland is using color in the same way as he use size, both display Growth.

The text color expression looks like this in the example:

if(expression>2, argb(255,0,150,0),

if(expression>1, argb(255,0,200,0),

if(expression>0.5, yellow(),lightred())))

Where expression will be the same expression as in Growth column (Steigerung).

You can read more about minichars in tables trick at QlikView + Qlik Sense Blog von Heldendaten: Qlik Sense Calendar Measures & "Minicharts" in Tabellen

Hope you like it.

AMZ

PS: For those of you who can't read German and/or use Google translator, please check out this community doc Creating Mini Chart in Qlik Sense tables (it also contains some hacks to make this trick even more complete)

# Push the Boundaries of Analytics - Qlik Sense Bot (video)

Posted by Michael Tarallo Apr 18, 2017

Good Tuesday Qlik Community! Today I have a fun and entertaining way to showcase the power of the Qlik Sense platform, its APIs and the art of the possible. But first, let me give you some background. In March, Qlik participated in the Gartner BI Bake Off (direct highlights here) - and for the 'innovation' portion of the presentation, my colleague Josh Good demonstrated a neat concept, showing what is possible with the Qlik platform and it's robust set of APIs - a Qlik Sense Bot - developed by my colleague Juan Gerado Cabeza. Since then we are getting numerous requests to see and learn more about what was shown on that day, so I have create this brief video to share some of its insights.

What is a Bot you may ask?

You already know some popular bots – Siri, Cortana, Alexa and of course Google. These guys are programs designed to perform tasks, such as setting an alarm, telling you the weather, searching online or even ordering a pizza. So why not have a bot tell you who your top sales people are, alert you when profit margin reaches 20%  – or - even have it send you charts and reports directly to your device?  The possibilities are endless. Juan as done just that, creating an analytical assistant - that in actuality turns Qlik data visualization into conversational analytics.

Have a great day!

Regards,

Pushing the Boundaries of Analytics  - Qlik Sense Bot

NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.

# Registering extensions on the fly

Posted by Francis Kabinoff Apr 14, 2017

Did you know that you can register extensions on the fly in mashups? That's right, you can register an extension in a mashup to use in that mashup, regardless of whether the extension is already loaded into your Qlik Sense environment. That means you can distribute your mashup with any extensions it uses as one package, and you have total control of the extension version your mashup is using.

Doing it is pretty straightforward. You just need to load the extension code into your mashup, then register it. It'll look something like this.

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

require(["path-to-my-extension/my-extension.js"], function(myExtension) { //load extension entry point
qlik.registerExtension( 'my-extension', myExtension ); //register extension
//do stuff with extension
});

});

```

Notice that I loaded the extension entry point after loading the `qlik` module. That's because many extensions use the `qlik` module, and if your extension loads the `qlik` module but you try to load your extension code before loading the `qlik` module in your mashup, you'll end up with errors. So better just to load the extension after the `qlik` module has been loaded in your mashup.

Once the extension has been registered you can do stuff with it, like use it with the Visualization API. An interesting use case is if you are loading objects that use an extension from an app into your mashup. The version of the extension you register with the mashup will override the extension loaded into your Qlik Sense environment, which can be really useful.

You can read more about it and see a few examples here Creating extensions on the fly.

# Qlik Sense Cloud Business - REST Connector

Posted by Michael Tarallo Apr 11, 2017

Happy Tuesday everyone! Thanks for joining me in this week’s Qlik Community Design Blog. Today I have the pleasure of introducing our newest guest blogger, Denise LaForgia. Denise is a colleague of mine in the Product Marketing group and is a Senior Product Marketing Manager focused on our cloud solutions. In this week's edition she will be covering our new REST connectivity recently made available to Qlik Sense Cloud Business subscribers. On an occasional basis, Denise will share updates on our Qlik Sense Cloud solutions. Take it away Denise.

Hi Everyone,

Welcome to this first installment of what I would like to refer as our Qlik Sense Cloud Update blog. I plan on bringing you all the news about the latest updates in Qlik Sense Cloud as well as some tips and tricks to help you get the most out of your Qlik Sense Cloud subscription. Occasionally, I might even ask Mike to embed a supplemental video to go along with the topic as we have done in this article. Please note that I will also provide continuous updates in the Qlik Sense Cloud Community Section along with the occasional appearance here. We have a lot of exciting features rolling-out, so stay tuned!

This week we’re excited to announce the launch of REST Connectivity in Qlik Sense Cloud Business. We know Qlik Sense Cloud Business users are eager for additional data connectivity options in order to automatically import and associate data sets from multiple sources. REST connectivity provides flexibility to a wide range of connectivity options with many of the applications you may be using in your business or project group or team.

So what is REST?

REST stands for Representational State Transfer, a modern and lightweight, secure communications protocol used to transfer data over the web. The Qlik Sense Cloud Business REST connector is designed to load data into a Qlik Sense app from a service that supports REST. It can return data in many formats such as JSON, XML, or CSV. Most web-based applications, social media channels, cloud-based CRM systems and even Google Analytics are REST-enabled, which means you can now build a connection between Qlik Sense Cloud Business and those data sources.

How does it work?

The Qlik Sense Cloud Business REST Connector can be considered a 'generic' connector, meaning it gives you the flexibility to configure a connection with any REST-enabled source you’d like to pull data from. Depending on which application you want to connect to, you can navigate to its developer area and configure that application’s settings to open up a REST connection. Visit this area in our help section to read examples on how to do that for LinkedIn, Twitter, Facebook, and Google Analytics. (included in video) Once you have the query parameters, head to the data manager or data load editor in Qlik Sense Cloud Business to complete the connection.

You can also use the REST Connector to load data files directly from public web files, such as DropBox, by simply entering the file’s URL in the REST Connector configurator.  The Qlik Sense Cloud Business REST Connector loads the data into your app and automatically parses the information into appropriate table and field structures so that it’s easily used with your application’s data model. And, you can use the scheduled refresh feature in Qlik Sense Cloud Business to ensure your data files from the REST Connector are always up to date.

Watch Mike's video below or go to the Set Up Select Sources for REST Connectivity page for more information about how to connect to different data sources – including Facebook, Twitter, and Google Analytics - using REST. Mike will also be presenting a Tips and Trick's webinar on REST Connectivity with a LIVE Q&A on May 10th at 1PMEST - you can learn more about it and register HERE.

Regards,

Denise LaForgia

Senior Product Marketing Manager

Qlik

Introduction to the Qlik Sense Cloud Business REST Connector and JSON Schemas

Additional Qlik Sense Cloud Connectivity Resources

How-To Guides:

How-To Videos:

Posted by Jennell McIntire Apr 7, 2017

The ability to make selections and see what data is associated is one of the powerful capabilities of Qlik Sense and QlikView.  Selections allow users to explore the data in an app and to answer their specific questions at any given time.  In this blog, I will discuss the following selection options you may find in a selection pop-up window (shown below): Clear selection, Select all, Select possible, Select alternative and Select excluded.

Clear selection

Let’s start with the Clear selection option.  As you may expect, this will clear all selections that have been made in an app excluding locked selections.  Locked selections are selections that cannot be cleared or changed.  They are used when the user wants to protect a selection.

Select all

Select all will select all values in a field making them green.  If there are excluded values in the field when you select all, then they will become selected excluded – these items will remain gray but they will get a check mark next to them indicating that they are also selected.  In the image below, Dairy was selected in the Product Group field and Cheese was selected in the Product Sub Group field.  All the other values in the Product Group field are excluded and therefore gray.  Once all values are selected in the Product Group field, the excluded items stay gray but now have a check mark to indicate they are selected excluded.

If the selection that excludes some of the values (which is Cheese in this example) is removed then they will all become selected and turn green.

Select possible

To explain the select possible selection, let’s first define possible values.  Possible values are values that are not selected and not excluded by a selection.  They appear with a white background.  For example, all values in a filter pane will be possible if no selections have been made.  In the image below, Dairy is selected in the Product Group field and the Product Sub Group has 5 possible values (the first 5 values in the list).  The possible values are product sub group items that are associated with the Dairy selection.

If select possible is applied to the Product Sub Group, you will get the following results:

Select alternative

What are alternative values?  Alternative values (light gray) are values that would have been possible (white) if a selection was not made in the field.  We have already seen an example of that in the image below.  In this example, Dairy was selected first and then Cheese was selected.  Before Cheese was selected, the first five values in the Product Sub Group field were white (possible values).  After Cheese was selected, Cheese became selected (green) and the other four values became alternative (light gray).

Select excluded

Select excluded will select all the non-selected values in a field.  If Dairy is selected in the Product Group field, then select excluded will select all values that were excluded (gray) and will make them green and the Dairy selection will become an alternative value (light gray).  If Dairy (Product Group) and Cheese (Product Sub Group) were selected and select excluded was selected in the Product Sub Group field (see image below), then the selected value Cheese becomes an alternative value (light gray), the possible values become green and selected and the excluded values become selected excluded (gray with a check mark).

The selection options reviewed in this blog can be used not only in filter panes and the selections tool but they can also be used in charts.  This gives the user the ability to drill down in the data and see what data is associated and excluded by selections.  Selections are very powerful so it is important to know all your options and how you can make selections to analyze your data.  The example images used in this blog are based on the data in the Consumer Goods Sales demo.  Feel free to use the selection tool in the app to test out selections or log in to qlik.com so you can add your own filter panes to the demo app.

Thanks,

Jennell

# Introducing Qlik Sense 3.2

Posted by Michael Tarallo Apr 4, 2017

Well guys - it is release time again and today I am please to announce the arrival of Qlik Sense 3.2. Now if you have been using Qlik Sense Cloud since February 2017, some of these features may seem familiar to you already. Going forward we may not always roll out everything in one big bang for a dot/feature release. In fact, as we continue to build on our strength in the cloud, we are beginning to make features available in Qlik Sense Cloud on a continuous basis so there is really no need to wait for the ‘big day’ to get the latest features. So if you are eager to try out new features and capabilities in Qlik Sense, there is always a chance they could already be in Qlik Sense Cloud ahead of the Desktop and Enterprise software. So stay tuned and connected to us for the latest news.

In this blog I wanted to demonstrate and present what's new in Qlik Sense 3.2. As one of our community members puts it, it is "a pretty beefy dot release". To keep it plain and simple here are the highlights:

Ability to more easily choose user defined colors for visualizations, measures, and KPI objects

• Calendar measures (my favorite)
Automatically generated fields for comparing date ranges for measures without writing Set Analysis expressions. (BTW, if you don't know what Set Analysis is, I suggest you check out this primer video:A Beginners' Introduction to Set Analysis (video) as the concepts learned can still apply to other analysis.)

• GeoAnalytics
This is technically not "in" 3.2 - but is ready to be used with it. I make mention of this in the video and you can learn more here: Introducing Qlik GeoAnalytics

• Shared persistence
A new installation option for Qlik Sense Enterprise when deploying multi-node sites that allows nodes access to centralized storage, improving performance and stability with larger deployments.

• Supported desktop client
Allows Qlik Sense Desktop to authenticate against a Qlik Sense Enterprise server NOW with full support by Qlik in production environments. (No Qlik Sense server? - then you must register for a QlikID and use those credentials)

So, sit back and enjoy this short video that describes and demonstrates these aforementioned features in more detail. Leave your comments and feedback to below, we'd love to hear from you.

If you want to get Qlik Sense Desktop 3.2 today - you can get it from this temporary link Qlik Sense Desktop here - we are currently updating our Qlik Sense Desktop products page on our website. You can also experience 3.2 without downloading any software by using the Qlik Sense Cloud.

For additional help on these features and more check out our Qlik Help Channel on YouTube. (I don't manage this, so videos are not always available as .mp4)

Regards,

Qlik

What's New in Qlik Sense 3.2

NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.

# BiPartite Extension

Posted by Yianni Ververis Mar 31, 2017

One interesting Qlik Sense extension that we have successfully used, is the BiPartite one. We have used it in couple of mashups like the UK Migration http://webapps.qlik.com/telegraph/uk-migration/index.html.

I like this one since you have a visual representation of all the values, selected and not and there is a nice animation moving from one dimension value to the next.

This is a responsive extension with minimum view of 320px. You add One dimension for the left column and one for the right and then one measure for the values in each column.

That's it! Give it a try

# ColorStyler: extension and mashup

Posted by Arturo Muñoz Mar 24, 2017

It’s been a while since the last time we covered an extension in this blog, this time I would like to introduce ColorStyler by Johannes Sunden jsn .

The reason I found ColorStyler very special, besides its obvious value, is due the way this extension was built. It’s half an extension half a mashup or should I rephrase it as a “mashup that extends your Qlik Sense app”.

ColorStyler as you might have figured out by now is a coloring extension, it will let you preview and apply different color schemes to your charts, no coding is required, it will take care of the not-so-easy task of creating a ColorMix expression for you.

Once installed in your computer, ColorStyler sets up a mashup that will let you interact with the available apps and apply some color options to your charts.

To start working with ColorStyler you must pick an app from a list of your available Qlik Sense apps, then you will be presented with a list of available visualizations (as of today it only loads Master Items), and finally ColorStyler will offer you four main color categories to pick from.

I find very useful the gradient options, and especially gradient themes, it’s a good selection of nice and safe colors palettes. If you are not happy with the proposed themes you can always create your own by defining the gradient colors.

It’s quite interesting to see the chart update on real-time and compare how different color alternatives affect to our ability to read the visualization. Once you’re happy with your color selection you just need to “Save Changes” to make it persistent not only in the mashup but in the actual Qlik Sense app.

As I mentioned before,ColorStyler will only let you interact with Master Visualizations from your Qlik Master Items library so you must have at least one master object in your app to be able to use this tool. After applying color to your master item, you can edit it as normal in your Qlik Sense client and copy the generated expression (ColorMix1 or ColorMix2) and then apply it to any other visualization.

Note: I would recommend to be extra careful when applying colors to charts by dimension, it’s very important to use color with care, just remember color in data visualization should be used to convey information, and not as decoration. Also, is very important to make sure that a dimension chosen color will be applied consistently across your app, avoiding situations where the same dimension value has two different colors in two charts.

If you prefer to watch a video instead:

# Creating charts with enigma.js and Vega

Posted by Francis Kabinoff Mar 17, 2017

If you don't already know, enigma.js is an open source library for communicating with Qlik Sense backend services. The QIX Service of enigma.js provides an API to communicate with a QIX Engine, giving you the ability to build applications powered by Qlik.

Vega calls itself a visualization grammar. It is a declarative language for creating visualizations. You just describe the appearance and behavior of the visualization you want to create, and Vega does the rest. And it can render with canvas, avoiding costly dom manipulations.

I'm going to demonstrate using enigma.js and Vega to create a simple bar chart. I'll be reusing the qApp.js module and qSessionObject class I introduced in Getting started with enigma.js, so check that out first if you haven't already.

### Getting Setup

You can review Getting started with enigma.js, and follow the "Setup", "Connecting to an app", and "Creating Session Objects" sections. You'll also want to load jQuery and Vega (https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.25/vega.min.js).

Alternatively, you can download the getting-started.zip file below. The getting-started.zip file includes package.json and webpack.config.js files, the qApp.js and qSessionObject.js files, as well as an index.html file, and a main.js file. There's also a .qext file, in case you want to use Qlik Sense as your server for your static files.

For this demonstration, I'm using fields from the Helpdesk Management app, so make sure your qApp.js file is connecting to a copy of the Helpdesk Management app.

### The Project

Now that you're setup, we can start the project. We'll do everything in main.js for this demonstration. So open up main.js. We'll need to import qSessionObject.js and create our session object.

```import qSessionObject from "./qSessionObject";

let chartCube = new qSessionObject({
qInfo: {
qType: "visualization"
},
qHyperCubeDef: {
qDimensions: [{
qDef: {
qFieldDefs: ["[Case Owner Group]"]
},
qNullSuppression: true
}],
qMeasures: [{
qDef: {
qDef: "Avg([Case Duration Time])"
}
}],
qInitialDataFetch: [{
qWidth: 2,
qHeight: 1000
}]
}
});

```

Now that our qSessionObject has been created, let's define the Vega spec for our bar chart. The spec is roughly based on the spec from Vega's tutorial Vega: Let's Make A Bar Chart Tutorial, so feel free to check that out if you like. I simplified it a bit, and removed the data values so that we can stream the values in using data returned from enigma.js. It looks like this:

```let barchartSpec = {
"\$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 400,
"height": 200,
"data": [
{
"name": "table"
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width"
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"encode": {
"labels": {
"update": {
"angle": {"value": -50},
"align": {"value": "right"},
"baseline": {"value": "middle"},
}
}
}
},
{
"orient": "left",
"scale": "yscale"
}
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category", "offset": 1},
"width": {"scale": "xscale", "band": 1, "offset": -1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
}
]
}

```

With our qSessionObject and our bar chart spec created, we can create the bar chart. After the dom is ready, we'll initialize the Vega view (Vega: View API), open the qSessionObject, get the layout of the qSessionObject, reformat the matrix to work with Vega, insert the values into our Vega view, setup updating the Vega view when the qSessionObject changes, and add an event listener to the Vega view to enable selections. It all looks like this:

```\$(() => {

//initialize vega view
let view = new vega.View(vega.parse(barchartSpec))
.renderer('canvas')
.initialize('#view')
.hover();

//open cube
chartCube.open().then(() => {

//get object layout and insert data into vega view
chartCube.object.getLayout().then((layout) => {
let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {
return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}
});
view.insert('table', values).run();
});

//when object data changes, update data in vega view
chartCube.object.on("changed", function() {
chartCube.object.getLayout().then((layout) => {
let values = layout.qHyperCube.qDataPages[0].qMatrix.map((row) => {
return {"category": row[0].qText, "qElemNumber": row[0].qElemNumber, "amount": row[1].qNum}
});
view.remove('table', (d) => { return true; }).run();
view.insert('table', values).run();
});
});

//add event listener to make selections on hypercube when a bar is clicked
if(item){
chartCube.object.selectHyperCubeValues("/qHyperCubeDef", 0, [item.datum.qElemNumber], true);
}
});

});
});

```

And that's it. Don't forget `npm run webpack`, and check out the results. Here's what it should look like - Vega bar chart.

I've attached the full project in case you'd prefer to just download that and play around too.

# Counter Aggregation Functions

Posted by Jennell McIntire Mar 10, 2017

Today I am going to blog about five Counter Aggregation Functions that can be used in Qlik Sense and QlikView in both charts expressions and the script.

1. Count()
2. MissingCount()
3. NullCount()
4. NumericCount()
5. TextCount()

Before taking a closer look at how we can use each of these functions, let’s first look at the data set I will use for the examples.  Below is the Excel data I will load.  It is a simple list of fruits, their color and quantity.

1. Count()

The Count function is probably one of the most common functions that can be used.  In a chart, Count() aggregates the number of values in each chart dimension.  In the script, Count() returns the number of values aggregated in the expression as defined by a group by clause.

Expression for a chart: Count(Distinct Fruit)

In the script below, Count() will return color and the number of fruits that have that color.

2. MissingCount()

In a chart, the MissingCount() function will aggregate the number of missing values in each chart dimension.  In the script, it will return the number of missing values aggregated in the expression, as defined by the group by clause.

Expression for a chart: MissingCount(Quantity)

In the script below, MissingCount() will return 1 if the Quantity field is missing a value.

3. NullCount()

NullCount() will return the number of null values in each chart dimension in a chart.  In the script, NullCount() returns the number of null values aggregated in the expression, as defined by a group by clause.

Expression for a chart:  NullCount(Color)

In the script below, NullCount() returns 1 if the Color field is null.

4. NumericCount()

In a chart, NumericCount() aggregates the number of numeric values by each chart dimension and in the script, NumericCount() returns the number of numeric values found in the expression, as defined by a group by clause.

Expression for a chart: NumericCount(Quantity)

In the script below, the total Quantity fields that have numeric data is returned.

5. TextCount()

In a chart, TextCount() aggregates the number of non-numeric values by each chart dimension and in the script, TexCount() returns the number of non-numeric values found in the expression, as defined by a group by clause.

Expression for a chart:  TextCount(Color)

In the script below, TextCount() will return the total number of text values in the Fruit field.

Here is a table with all these functions used in a chart:

While I have not used all of the counter aggregation functions in my work with QlikView and Qlik Sense, I think they can be valuable when auditing and checking the health of your data.  They can highlight gaps in the data that should not be there and point out data type issues in the data.  I would be interested in hearing how you use these functions in your apps.

Thanks,

Jennell

# Case study: Salesforce mashup

Posted by Yianni Ververis Mar 3, 2017

Another great mashup from the Demo Team!

After my favorite CIO where we introduced KPIs into the navigation, salesforce is beautiful, elegant and made mostly of custom extensions!

I started with the custom Selection toolbar (Angular Directive) that I introduced in the CIO dashboard. This changes based on the number of selections, if it's only one item of that dimension selected, or more than 6, it displays "Dimension: item selected". If there are more than one, but less than 6 items selected, it changes to a dropdown menu with the x button to deselect it. This is listening to selections, which means that whatever selections are made in the webpage, they will be displayed here as well.

Then, we needed Sense like filters but as drop down menus (Angular Directive). I have done this with the UN Gender Statistics site but this one is more advanced and stays open until you finish making all selections and sorts them by state. It scrolls if many items.

Another issue we were faced with, was that we created a combo chart in Sense but we needed to customize the colors to match our webpage. This lead me to create the Combo Chart extension. This not only gives you the option of changing colors but, hover states, borders, set bar widths, dot widths, has a better display of the labels etc.

In the same page, we had to display and compare two vertical bar charts. The problem is that when we placed the out-of-the-box ones, the y-axis max were different thus visually misleading.  So I used the combo chart with only one measure and set the max to achieve the desired results

Moving on to the next page, we had two more issues to solve.

We needed to have a Stacked bar Chart based on the value of the measure and not the number of measures. For this, I created the SenseUI-ValueStackedbarChart. I used the same tooltips, coloring, hover states etc as I used in my other extension like my most popular one, SenseUI-BarChart.

The other issue was that we needed a horizontal menu for quarters and years. For this I used an older extension, the SenseUI-Filter.

Lastly, I used my SenseUI-BarChart extension for all of the horizontal bars. I used the same bar color, border and hover color to match the rest of the website's objects.

The mashup is found at http://webapps.qlik.com/salesforce/index.html

Please note that this is a work in progress. I still have to work on the mobile version and some other UI issues

Extensions mentioned here:

Senseui-ComboChart

SenseUI-ValueStackedbarChart

SenseUI-BarChart

SenseUI-Filter

For more of our work, you can go to webapps.qlik.com

Yianni

# Introducing DAR mashup template

Posted by Arturo Muñoz Feb 24, 2017

NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.

### What

Just that, a mashup template for dev-hub (aka dead simple drag and drop mashup creator) that ships with a bunch of cool features such as:

• Multi Page
• KPI row built in
• Prebuilt CSS color library
• Cards with full screen toggle
• Offcanvas filters pane
• Help modal popup
• Responsive design
• Bootstrap built in

### Why

Because we’ve heard you asking for a more powerful and good-looking template that can constitute a solid framework to create your customized mashups.

### Who

Anyone looking for a feature rich mashup template designed for use in the dev-hub.

Available today!

### Where

You can grab the latest* version here GitHub - fkabinoff/qs-dev-hub-dashboard-template: Dashboard template for Qlik Sense dev hub

*Please notice this is a live project, we will keep updating it frequently. Right now the project documentation (readme.md) is far from what we would like it to be.

# Controlling Fields Shown in Smart Search

Posted by Michael Tarallo Feb 21, 2017

In this week's edition of the Qlik Design Blog, I'd like to introduce Mitul Vadgama. Mitul is a member of our Qlik Consulting Services team in the UK. He has worked on a variety of consulting projects using both Qlik Sense and QlikView with many enterprise customers. His passion is transforming data into valuable business insights, knowledge sharing, and enabling customers to get the most value out of Qlik products. Mitul is going to show you how to optimize a powerful and unique capability in Qlik Sense, Smart Search. Thanks for your valuable contribution Mitul!

Smart Search

Smart Search provides powerful functionality allowing users to search dimensions and values found within an application’s data model. When working with customers on consulting projects I have found that sometimes the business users, data architects, and app designers want to control which fields are included or excluded in the search. Did you know that you can control which fields are included or excluded from Smart Search?

Here is an example using Smart Search in action where I search for “Rob” in my sales application:

You can see Qlik Sense finds the value “Rob” in the following fields:

•    First Name

•    SalesPerson

•    CompanyName

•    ContactName

Consider a scenario where you want Smart Search to exclude searching in the “ContactName” field when the users search. You can achieve this by inserting the exclude clause in the Search statement in your script.

The Search statement

The Search statement is a script function used for including or excluding fields in smart search.

It can contain two clauses:

Syntax:

• Search Include *fieldlist
• Search Exclude *fieldlist

In our case I want to exclude ContactName from my results. I do this by opening my data load editor and typing in the following right after the SET statements:

Search exclude ContactName;

When I search again for “Rob” you can now see ContactName excluded from the results:

Tip: If you want to exclude multiple fields, simply list the fields you want to exclude using comma separators while ensuring your field name syntax is correct.

Search exclude field1,field2,field3;

Another common scenario may be you want to hide most of the ID fields from your Smart Search (maybe because they are only needed for the data model building process).

A possible way you can achieve this is through the following syntax:

The above contains two lines of code:

• Search Exclude '*ID';
• This excludes all fields ending with ID from searches in Smart Search.

• Search Include CustomerID;
• This includes the field CustomerID in searches in Smart Search.

This way I am ensuring all but one ID field is included in my Smart Search.

We hope through this post you can see how the Search syntax along with Exclude and Include keyword clauses is a simple yet powerful way to control which fields a user can search on your Qlik Sense application. It also speeds up the search index creation when the data model is first loaded.

For a full list of services offered by Qlik Consulting check out: http://www.qlik.com/us/services/qlik-consulting.

Regards,

Consulting Services, UK

For more information on the Smart Search feature check out these videos:

# Getting started with enigma.js

Posted by Francis Kabinoff Feb 17, 2017

enigma.js is Qlik’s open source library for communicating with Qlik Sense backend services. I’m going to show you how to get started using enigma.js, as well as a couple general patterns I’ve been using.

I’m going to use ES2015, Babel, and webpack. These are not necessarily requirements for building an app with enigma.js, but I recommend them.

### Setup

Create a new folder for your project. Run `npm init` or just create your own package.json file, however you prefer. Now run `npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev`. This will install our development dependencies and save them to our package.json file. Next, run `npm install enigma.js --save`. This will install enigma.js, and save it to our package.json file.

For convenience, we’ll add webpack to the scripts property of our package.json file. This will let us run `npm run webpack` instead of having to supply the entire path to webpack. Open up the package.json file and add `”webpack”: “webpack”` to the scripts property. Your package.json file should now look something like this:

```{
"name": "enigmapatterns",
"version": "1.0.0",
"description": "",
"dependencies": {
"enigma.js": "^1.0.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-preset-es2015": "^6.22.0",
"webpack": "^2.2.1"
},
"scripts": {
"webpack": "webpack"
}
}

```

We’ll also need to create a webpack.config.js file, which should look like this:

```module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
{
exclude: /(node_modules)/,
query: {
presets: ['es2015']
}
}
]
}
}

```

Finally, we’ll want to create a main.js file which will be our entry point, and an index.html file which loads the bundle.js file that our build will output.

### Connecting to an app

The pattern I’ve been using to connect to the app is to create a qApp.js file, and export the promise to connect to the app. This way, anywhere I need to use the app I can simply import this file and do something like `getApp.then((app) => { //code here })`.

So create a file named qApp.js, which looks like this:

```import enigma from 'enigma.js';
const qixSchema = require('./node_modules/enigma.js/schemas/qix/3.1/schema.json');

const config = {
schema: qixSchema,
session: {
host: 'localhost',
prefix: '',
port: 4848,
unsecure: true
}
};

export default enigma.getService('qix', config).then((qix) => {
return qix.global.openApp('Helpdesk Management.qvf').then((app) => {
return app;
});
});

```

### Creating session objects

I like to have a class for creating session objects. That way I can have an `open()` and `close()` method for each session object. The `open()` method calls `createSessionObject` on the app and returns the promise if the object does not exist in the app, and simply returns otherwise, so that I can always check to see if an object is available, without inadvertently creating a duplicate object in the app. The `close()` method calls `destroySessionObject` on the app, passing along the object’s id.

So create a file named qSessionObject.js, which looks like this:

```import getApp from "./qApp";

class qSessionObject {

constructor(properties) {
this.properties = properties;
this.object = null;
}

open() {
if (!this.object) {
return getApp.then((app) => {
return app.createSessionObject(this.properties).then((object) => {
this.object = object;
});
});
}
}

close() {
if (this.object) {
return getApp.then((app) => {
return app.destroySessionObject(this.object.id).then(() => {
this.object = null;
});
});
}
}

}

export default qSessionObject;

```

You can also put other methods in this class which may be helpful. For example, I recently built an app that had 2 alternate states, and when the states changed I needed to call `applyPatch` on each object and change the state of the object. Having a class for the session objects made this really easy.

### Usage example

So now we have our project setup, a qApp.js file for connecting to the app, a qSessionObject.js file for creating session objects, let’s cover a simple use.

We’ll create 3 lists objects, and 3 filters in our UI with those list objects. For this, we’ll use the Filter class which you can find at the end of this post, along with the rest of the source code. You'll need the filter.js file from the zip below.

You’ll also find a .qext file in the source code. That’s so we can put this project in the Extensions folder of Qlik Sense Desktop to use it as a server, but you can serve this any way you’d like, just make sure that your config in qApp.js is pointing to your Qlik Sense server.

So first, let’s get our html ready. The Filter class relies on jQuery and Bootstrap 4 alpha v6, so we’ll load those. Also, we'll need to load our bundle.js and main.css files. Then we can add the html we’ll need to the body. Your index.html should look like this:

```<!doctype html>
<html>
<title>Enigma patterns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Project code -->
<script src="bundle.js"></script>
<body>
<div class="filters row">
<div class="col-auto">
<div class="filter" id="case-number-filter"></div>
</div>
<div class="col-auto">
<div class="filter" id="subject-filter"></div>
</div>
<div class="col-auto">
<div class="filter" id="case-owner-filter"></div>
</div>
</div>
</div>
</body>
</html>

```

Grab the main.css file from the attached source code and save it in your project folder.

Now open main.js. We’ll import the qSessionObject class and the Filter class, create 3 list objects, create 3 filters, open the 3 list objects, and then initialize the filters. This is what that should look like:

```import qSessionObject from "./qSessionObject";
import Filter from "./filter";

let caseNumberList = new qSessionObject({
qInfo: {
qType: "visualization"
},
qListObjectDef: {
qDef: {
qFieldDefs: ["[CaseNumber]"],
qFieldLabels: ["Case Number"]
},
qAutoSortByState: {
qDisplayNumberOfRows: 1
},
qShowAlternatives: true,
qInitialDataFetch: [{
qWidth: 1,
qHeight: 1000
}]
}
});
let subjectList = new qSessionObject({
qInfo: {
qType: "visualization"
},
qListObjectDef: {
qDef: {
qFieldDefs: ["[Subject]"],
qFieldLabels: ["Subject"]
},
qAutoSortByState: {
qDisplayNumberOfRows: 1
},
qShowAlternatives: true,
qInitialDataFetch: [{
qWidth: 1,
qHeight: 1000
}]
}
});
let caseOwnerList = new qSessionObject({
qInfo: {
qType: "visualization"
},
qListObjectDef: {
qDef: {
qFieldDefs: ["[Case Owner]"],
qFieldLabels: ["Case Owner"]
},
qAutoSortByState: {
qDisplayNumberOfRows: 1
},
qShowAlternatives: true,
qInitialDataFetch: [{
qWidth: 1,
qHeight: 1000
}]
}
});

\$(() => {
let caseNumberFilter = new Filter(caseNumberList, "#case-number-filter");
let subjectFilter = new Filter(subjectList, "#subject-filter");
let caseOwnerFilter = new Filter(caseOwnerList, "#case-owner-filter");

Promise.all([caseNumberList.open(), subjectList.open(), caseOwnerList.open()]).then(() => {
caseNumberFilter.init();
subjectFilter.init();
caseOwnerFilter.init();
});
});

```

Don’t forget to run `npm run webpack` to build your bundle.js file.

If you’ve followed along, you should have 3 dropdowns on your page now that look like this - Enigma patterns. You can also just download the source code below, put it in the Extensions folder of your Qlik Sense Desktop installation, run `npm install` and then `npm run webpack`, and check out the project that way.

# Using Qlik Sense to Analyze Insurance Claims Data

Posted by Michael Tarallo Feb 14, 2017

In this week's design blog I have the pleasure of introducing our newest guest blogger, Simon Kirby. Simon is a Director of SI Industry Solutions with our Financial Services group out of the UK and has prepared an introduction and video that shows you how Qlik Sense can be used to analyze car insurance claims data.

Insurance Whiplash Fraud

It was recently announced in the UK that car insurance premiums are at their highest ever levels (The Actuary Magazine) and one of the key factors for this is an increase in whiplash injury claims. In addition to legitimate whiplash injury claims, insurance companies are struggling to cope with an increasing trend in fraudulent whiplash claims. These claims occur when a third party deliberately creates an accident by causing another car to crash into the back of them. They then feign a whiplash injury and receive thousands in compensation. It’s been discovered that these people repeat these accidents regularly and effectively earn a living from scamming the insurance industry.

How Qlik Sense can help

A key weapon for insurers in identifying these fraud perpetrators is the analysis of data. Insurers need to be able to search for associations in data between similar types of claims, in similar locations, including something unique like a mobile phone number. These associations between the data can lead to a significant increase in identifying the groups of people that commit these types of fraud. This is exactly where Qlik Sense can play an important role in this activity.  The QIX Associative engine, at the heart of Qlik Sense, is designed to make the discovery of these associations easy and intuitive. Together with the ability to quickly create drag and drop visualizations, Qlik Sense can help Insurance Fraud Analysts identify trends, patterns and examples of fraudulent Whiplash claims. (view more about Qlik's Associative Model: Qlik Snippets - The Qlik Associative Model - YouTube and Qlik's Associative Model - Part I - YouTube)

See and try it for yourself

The next step for insurers would be to combine the power of Qlik Sense with their fraud detection models.  The result would be a Qlik Sense visualization embedded into the claims system that showed the claims handler the real-time results of the fraud model at the time of the Notification of Loss.  This would allow the insurer to push suspicious claims to a dedicated fraud management team for further investigation which could potentially save the company millions.

If you would like to see how Qlik Sense can be used to identify claims fraud, take a look at our video on YouTube and the attached Qlik Sense app. For more details on this app, please visit this link available on the Qlik Financial Services Community site: Insurance Claims App

Regards,

Simon Kirby

Director, SI Industry Solutions - Financial Services

Qlik

NOTE: To increase resolution or size of the video, select the YouTube logo at the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.