Nebula.js x Motor x Qlik Sense for Object Embedding in React Mashups
In this tutorial I will walk you through how to embed objects from Qlik Sense into your React mashup, using nebula.js and Motor.
Let’s start with some definitions. So what is Motor?
Motor is a React framework for Qlik Sense mashups including APIs and a code generation tool for the rapid creation of mashups.
You can find out more about the product here.
And what about Nebula.js?
Nebula.js is a collection of product and framework agnostic JavaScript libraries and APIs that helps developers integrate visualizations and mashups on top of the Qlik associative engine.
Motor comes with two libraries that we will be using in this tutorial:
- @motor-js/engine: A headless UI package of hooks and components that simplifies all interactions with the Qlik engine. Use it to build mashups with detailed knowledge of the Qlik API. See an example here.
- @motor-js/nebula: A React wrapper on nebula.js that simplifies using the library in React
With the introduction out of the way, let’s start coding!
To start, we need to create our react app and import both the above libraries. The engine package will handle connection to the Qlik engine, and nebula package to embed objects.
npx create-react-app motor-nebulacd motor-nebulanpm i @motor-js/engine @motor-js/nebula
Navigate to index.js, wrap your project in the Motor component and establish a connection to your Qlik app. See an example below, that connects to Motor’s cloud instance.
We also need to add the NebulaConnection component. This provides the nebula connection needed for the embed to work. Your code will now be looking something like the below.
We are now halfway there. Next, in App.js import the NebulaContainer component and configure the id to an object in your Qlik app.
Our app is now looking like the below. We have rendered a Bar Chart from our Qlik app in React. All in just two steps.
You can find a CodeSandbox with this code below (you will need to repoint it to your Qlik site):
