An example of embedding Qlik Sense (mashup and APIs)

April 06, 2019

I'm often asked how to create mashups with Qlik Sense, and I strongly believe that it's both easy and intuitive to leverage Qlik Sense APIs to build mashups...when you understand the options available to you.

To help new developers, I've put together a basic mashup using the Material Design Lite template. This example connects to a provided app and demonstrates several different ways of embedding Qlik Sense into a HTML site using just a little Javascript.

qsem template 1024x501

The mashup has four pages, one based on the default template and the other three focused on content

App Integration API

The first sheet demonstrates the simple App Integration API (which primarily leverages IFrames), and the demo contains examples of how to:

  1. Embed the Qlik Sense hub
  2. Embed a specific application
  3. Embed a specific object (chart) from a Qlik Sense application

qsem app integration api 1024x500

he App Integration API is primarily used with IFrames

Capability API

The Capability APIs are a family of APIs which offer greater flexibility at the cost of greater complexity, and the demo contains examples of how to:

  1. Embed a specific object (chart) from a Qlik Sense application
  2. Embed an object (chart) created on the fly by a provided definition, based on the data model from a Qlik Sense application
  3. Return a specific value from a Qlik Sense application by creating a hypercube and displaying the result

qsem capability api 1024x569

The Capability APIs require custom development, but offer much greater flexibility than the App Integration API

Where's the demo?

The mashup is available on GitHub as a free-to-use demo. See the qlik-sense-embed-material GitHub site for installation instructions.

Profile picture

From Dave, who writes to learn things. Thoughts and views are his own.

© 2023, withdave.