Hi,
business case: you would like to show qlik sense charts inside meteor.
I would like to integrate Qlik Sense by using the Extenstions API into meteor. The key issue I encounter is the use of package handling. Normally you would just copy the Qlik Sense template HTML file and update the .JS file for the URL Qlik Sense. See code below. Now the question is, how can you use such code in Meteor? I tried some Require packages for meteor without succes. Because I think under the hood more packages are loaded. E,g, so change the statement require to npm.require would only solve a little bit.
So how can I use meteor if my code from a third party uses require?
Example code which fetches a list of values from Qlik sense which we could show in meteor
thank you
<!doctype html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense: Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<!--Add host to these 3 links if the mashup is on another webserver than qlik sense static content-->
<link rel="stylesheet" href="/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="/resources/assets/client/client.css" media="all">
<script src="/resources/assets/external/requirejs/require.js"></script>
<script src="MAN.js"></script>
<style>
article.qvobject
{
position:absolute;
overflow: hidden;
padding: 10px;
}
</style>
</head>
<body style="overflow:auto">
<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
<div id="QV02" style="position: absolute; top: 50px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
<div id="QV03" style="position: absolute; top: 300px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
<div id="QV04" style="position: absolute; top: 300px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
<div id="QV05" style="position: absolute; top: 550px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
<div id="QV06" style="position: absolute; top: 550px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
</body></html>
The javascript looks like
/*global require, alert*/
/*
*
* @owner Enter you name here (xxx)
*/
/*
* Fill in host and port for Qlik engine
*/
var config = {
host: window.location.hostname,
prefix: "/",
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources"
} );
require( ["js/qlik"], function ( qlik ) {
qlik.setOnError( function ( error ) {
alert( error.message );
} );
//callbacks -- inserted here --
//open apps -- inserted here --
var app = qlik.openApp('Runkeeper Dashboard.qvf', config);
var app1 = qlik.openApp('Recruitment.qvf', config);
//get objects -- inserted here --
app1.getObject('QV06','HSMR');
app1.getObject('QV04','8d0dec95-3e3b-4f21-925d-8435c6bab461');
} );