Qlik Sense Client Managed: How to create a Nebula.js mashup

[Damien_V]

This article is a step-by-step on how to create a nebula.js mashup for Qlik Sense Client managed and is based on the tutorial to create a nebula.js mashup for Qlik Sense SaaS, which can be found here.

Please also make sure all requirements have been fulfilled based on article: https://community.qlik.com/t5/Knowledge/Qlik-Sense-for-Windows-All-you-need-to-know-to-start-using/t...

Requirements:

- Qlik Sense Enterprise on Windows April 2020 or higher

- Node.js 10.0.0 or higher

Create a simple web project

npx @nebula.js/cli create mashup hello-cm

Edit the index.js file in the src folder and input your Qlik Sense server url and the app ID you want to connect to, the result should look as below:

const app = await connect({
  url: 'qlikserver1.example.local',
  appId: '7fc4d85c-0e07-4160-90a9-c2ca4a45fd81',
});

Edit the connect.js in the src folder and replace the whole content by the following:

import enigma from 'enigma.js';

export default function connectLocal({ url , appId }) {
  const loadSchema = () =>
    fetch('https://unpkg.com/enigma.js/schemas/12.612.0.json').then((response) => response.json());

  const createConnection = () =>
    loadSchema().then((schema) =>
      enigma
        .create({
          schema,
          url: `wss://${url}/app/${appId}`,
        })
        .open()
        .then((qix) => qix.openDoc(`${appId}`))
    );

  return createConnection().then(
    (app) => app
  );
}

Back to index.js, add the following lines to render the object you want:

n.render({
  element: document.querySelector('.object'),
  id: 'EAjjuyE',
});

See tutorial here in the "Visualize data" section on how to fetch the ID for the wanted object.

Configure package.json to use https

In order to follow best practices on embedded contents, we are now going to modify package.json in order to enable https. Please note that you need to bring your own certificates in pem format.

On line 12 in package.json, add the following argument to the "parcel" command line:

  "scripts": {
    "start": "parcel src/index.html --open --no-hmr --port 444 --https --cert server.pem --key server_key.pem --host dc1.example.local",
    "build": "parcel build src/index.html --dist-dir ./dist"
  },

Run the project

Go to the project folder root and run this command:

npm run start

The server runs on https://dc1.example.local:444/

Note that this sample doesn't handle authentication and you might need to first log in to Qlik Sense in your browser before opening the page to see the charts.