Motor
Published in

Motor

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.

Nebula.js bar chart

You can find a CodeSandbox with this code below (you will need to repoint it to your Qlik site):

Hope you enjoyed this quick read. See the Docs to learn what else you can do with Motor & Nebula. ✌️

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Motor

Motor

The React Framework for Qlik Sense Mashups