Solved: Re: Create Mashup outside Qlik Server Repository f... - Qlik Community

Anonymous · ‎2017-04-24

Hi,

I want to creating mashups outside the extensions folder. Is there any way to create a mashup for Qlik Sense outside its Extensions folder?

Anonymous · ‎2017-04-26

Hi Sumit,

So if I got it right, you want to run a mashup given the following conditions:

You have your Qlik Sense Desktop up and running
You have an application in it, to which you want to connect using the Mashups API
The files for the mashup are not in the Extensions folder

What I've done is to create a separate folder in My Documents and I've written the simplest mashup there can be. It contains only 2 files, index.html and main.js:

This is index.html

<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sample Mashup</title>
  <meta 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">


  <link rel="stylesheet" href="http://localhost:4848/resources/autogenerated/qlik-styles.css">
  <script src="http://localhost:4848/resources/assets/external/requirejs/require.js"></script>
  <script src="./main.js"></script>
</head>
<body>
  <div class="flex-container">


  </div>
</body>
</html>

And as for main.js

var config = {
  "host": "localhost",
  "prefix": "/",
  "port": "4848",
  "isSecure": false
};


require.config( {
  baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
});


require( ["js/qlik", "jquery"], function ( qlik, $ ) {
  qlik.setOnError( function ( error ){
  alert( error.message );
  });


  var app = qlik.openApp('NameOfYourApp.qvf', config);
})

This is pretty much all you need to get started building something more complex.

View solution in original post

Anonymous · ‎2017-04-25

Yes there is,

Qlik Sense behaves like a normal web server listening on port 4848. You can see your mashups when you query http://localhost:4848/extensions/yourMashup/ because that is the 'public' folder of your Sense server.

Conversely, you could write your own web server on localhost listening to another port and serve the web applications from there. From there, you can open as well the Qlik applications you need to work with.

Anonymous · ‎2017-04-25

Hi David,

Thanks for your response.

But actually i need to create a mashup in my own directory let's say it on D:/MyMashup, As i assumes that while creating a mashup on Qlik Sense Server uses its own files (require.js, qlik.js, etc) and by using these javascripts it process our queries for render qlik objects to a mashup.

What if i provides these files from my own directory and queries for qlik objects and it return me response as it gives while creating on it's server.

Because when i tried to do same it responding me some error for Handshaking.

My concern is if i am creating mashup in my own directory then how these file will communicate with qlik server to render my object

Anonymous · ‎2017-04-26

Hi Sumit,

So if I got it right, you want to run a mashup given the following conditions:

You have your Qlik Sense Desktop up and running
You have an application in it, to which you want to connect using the Mashups API
The files for the mashup are not in the Extensions folder

What I've done is to create a separate folder in My Documents and I've written the simplest mashup there can be. It contains only 2 files, index.html and main.js:

This is index.html

<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sample Mashup</title>
  <meta 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">


  <link rel="stylesheet" href="http://localhost:4848/resources/autogenerated/qlik-styles.css">
  <script src="http://localhost:4848/resources/assets/external/requirejs/require.js"></script>
  <script src="./main.js"></script>
</head>
<body>
  <div class="flex-container">


  </div>
</body>
</html>

And as for main.js

var config = {
  "host": "localhost",
  "prefix": "/",
  "port": "4848",
  "isSecure": false
};


require.config( {
  baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
});


require( ["js/qlik", "jquery"], function ( qlik, $ ) {
  qlik.setOnError( function ( error ){
  alert( error.message );
  });


  var app = qlik.openApp('NameOfYourApp.qvf', config);
})

This is pretty much all you need to get started building something more complex.

Anonymous · ‎2017-04-26

Hi Devid,

Yes, this is what i need, Thanks for your solution. It was really helpful.

Anonymous · ‎2017-05-09

Hi,

As per above solution i can create my mashup externally, but can i apply qlik's export as excel to it as :

app.getObject("divid","objectid").then(function(model) {

var table = new qlik.table(model);

$("#exp").bind('click', function() {

table.exportData({

download: true

});

})

});

Anonymous · ‎2017-05-10

Hi Sumit,

Could you please share a screenshot of your console to see what errors are you getting?

In the meantime, I'd suggest you check out the following thread, in which it seems they discuss the same issue you're having:

How to include "Export data" feature in a mashup

Anonymous · ‎2017-05-10

Hi David,

As Qlik calls a API for export to sheet internally when we request with following code:

app.getObject("divid","objectid").then(function(model) {

var table = new qlik.table(model);

$("#exp").bind('click', function() {

table.exportData({

download: true

});

})

});

This API looks like :

https://qlik-sense-host:qlik-sense-port/tempcontent/f4eb3235-4f07-4e84-b2d4-d6846d9535ec/32e4ed5b-26...

But when i am calling same function this API hitting qlik with my host and port as following:

https://localhost:8442/tempcontent/f4eb3235-4f07-4e84-b2d4-d6846d9535ec/32e4ed5b-264f-447d-96e9-b21d...

So output what i am getting is '404 error' ,as this API is nowhere exist in Qlik Sense

If i can change its HOST and PORT with Qlik Sense HOST and PORT before calling this function then it could be done because when i am changing same API url's HOST & PORT with Qlik Sense host and port manually then it giving me exact output(excel sheet) that what it should give.

Anonymous · ‎2017-06-12

Hi David,

Above is working fine, but does it works on mobile also?

Actually i am creating this mashup on client side by passing Qlik's JS & CSS files to client's machine. As per this i am able to create mashup on Client's system but when i am trying same on Mobile Browser then it is not rendering same on mobile.

Anonymous · ‎2017-07-06

hi, Sumit!

I´m having the same problem as you... I have a mashup in angular running outside the main server and when I call the table, it is not getting the file from config.host, but it is looking in my localhost and I get this error:

How did you solved this?

I´m using this code in the controller:

$('#div').click(function(e){

app.getObject('XXX').then(function(model) {

var table = qlik.table(model);

table.exportData({download: true});

});

Create Mashup outside Qlik Server Repository folder