Building mashups with Nebula.JS

4 min readJun 21, 2021

As a Qlik developer, you probably have heard about Nebula.js. It is Qlik’s open-source visualization solution on top of its engine. In another article, I briefly talked about how Enigma.js is a great replacement of Capability API for communication, data exchange, etc; But there is one job Enigma.js is not capable of, in fact, the most important job — visualization.

Enigma.js does not render charts. To replace Capability API, Enigma.js along is not enough. The visualization components of Capability API were moved to Nebula.js. Which is a collection of JavaScript libraries, visualizations, and CLIs. It is not easy to learn so hopefully this article will help you get started building mashups using Nebula.js.

I have created this sample code on Glitch.com. It is a pure static web app with only two files: index.html and index.js. You will get something like this:

This sample has the same setup as in this article.

The first thing you need is a Qlik Sense SaaS tenant. If you have not done so, you can follow the instructions from this tutorial to start:

· Start Qlik Sense SaaS.

· Configure deployment.

· Create a new web integration from the Management console.

· To allow Glitch.com to access the Qlik cloud, you need to add its address to the allowlist. You can find it on the share tab. For example, mine is https://capability-api.glitch.me and https://enigma-js.glitch.me.

So your web integration portal should have something like this.

· Once the web integration has been created, an ID is assigned to it. This is the qlik-web-integration-id you need later on.

· Upload an app. If you don’t have an app or data already prepared, you can download the movies dataset from the GitHub repository and upload it to the cloud. Each app on Qlik Sense SaaS has a global unique identifier (GUID), which you need later. The GUID can be extracted from the URL and is the part that follows /app. For example, if the URL is https://your-tenant.us.qlikcloud.com/sense/app/7fc4d85c-0e07-4160-90a9-c2ca4a45fd81 , then the GUID of the app is 7fc4d85c-0e07–4160–90a9-c2ca4a45fd81.

When your environment is ready, go to index.js.

Change the URL, webIntegrationId, and appId of your setting. You don’t have to change objectID but if you do, it is a parameter of the render function.

Now you have a working example of Nebula.JS, congratulations! I assume doubts arise when you try to understand the code? Let me answer some questions you may have.

Does it seem like Nebula is harder to use compare with Capability API?

Yes, you need to write significantly more code to do the same job, but it does offer better flexibility.

What is stardust?

Stardust is the core visualization component. Nebula.js is not really a visualization library. It is a collection of many useful resources. It has visualization libraries, CLI tools, and stardust. In this example, our Javascript libraries are loaded using script tags. @nebula.js/sn-bar-chart is the visualization component for bar chart(sn stand for supernova by the way), and @nebula.js/stardust the visualization library.

What are the CLI tools for?

You can use the CLI tools to do many things. For example, bootstrapping mashup or extension development environment; Talking to Sense server; publish an extension.

Must Nebula.js be used with Enigma.js?

Well, technically no. But if you need to connect to a Qlik instance, then yes. You have to use Enigma.js with Nebula.js.

Why Nebula.JS for mashup?

Nebula.JS is much faster and more flexible compare with capability API. If performance is your concern, try Nebula.JS instead of capability API.

How many charts does Nebula.js support?

Nebula.js supports the following components:

Where should I go to learn more about Nebula.js?

Qlik.dev is the best place for all Qlik sense developers. Find out more here.

I hope you find this article useful.

Happy coding, cheers.

-Wu

Building mashups with Nebula.JS

Written by Zhu Wuzhong