Skip to main content
Francis_Kabinoff
Former Employee
Former Employee

You're probably familiar with building mashups using Qlik Sense Capability APIs. The Capability APIs enable you to render visualizations from your Qlik Sense apps into a web page, and even create them on the fly. It's awesome functionality, but you may also have come across some challenges. The Capability APIs load AngularJS, require.js, and jquery, amongst other things, globally, and this can sometimes cause conflicts with your existing application. But now there's a more modern way to render visualizations from your Qlik Sense apps into a web page - nebula.js.

You can check out the open source nebula.js at it's github page at https://github.com/qlik-oss/nebula.js. And there's some great tutorials on the new qlik.dev, including how to build a simple mashup using nebula.js. You should definitely go through this tutorial, it's really quick and simple and will give you an idea of just what nebula.js is about.

The tutorial goes through setting up a Qlik Sense SaaS account, which I definitely recommend, but you can also use your Qlik Sense Enterprise environment as well. Then there's a cli tool to get you setup quickly. After creating a new project with the cli, it'll walk you through connecting to an app and rendering an existing visualization. Then there's a section on rendering visualizations on the fly, as well as how to add more types of visualizations. And if you want to create custom visualizations, you can go through the build a helloworld extension using nebula.js tutorial.

Give it a try and let me know what you think in the comments!

4 Comments
Digvijay_Singh

Hi @Francis_Kabinoff 

Could you help to fetch the app from the local desktop, We got QSEW and the desktop so wanted to connect my local app or Enterprise Server app to learn Nebula but I am not able to modify the code available in the tutorial 'build a simple mashup using nebula.js'

Thanks in advance!

 

0 Likes
941 Views
rarpecalibrate
Contributor III
Contributor III

Hi  @Digvijay_Singh,

To use desktop use the following :

ws://localhost:4848

 

To connect to enterprise :

wss://<your host name>

In the config port is 443 and prefix /

 

Ryan Arpe 

903 Views
Digvijay_Singh

Thanks so much @rarpecalibrate for the URL. Looks like I need to modify more code to ignore the connect part, below is my modified code and the new error I get now.

index.js -

/* eslint-disable */
import embed from './configure';
import connect from './connect';

async function run() {
//const app = 'Client Portal - Visits and Clinical.qvf'
const app = await connect({
url: 'ws://localhost:4848/',
//webIntegrationId: '<Qlik web integration id>',
appId: 'Client Portal - Visits and Clinical',
});

const n = embed(app);

(await n.selections()).mount(document.querySelector('.toolbar'));

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

run();

Digvijay_Singh_0-1622384903075.png

 

0 Likes
858 Views
rarpecalibrate
Contributor III
Contributor III

Hi,

Take the forward slash out after the 4848. Then install a chrome extension called CORS unblock and activate.

Ryan Arpe 

0 Likes
828 Views