Creating session apps from existing apps
qlik-embed: Where possible, use qlik-embed and qlik/api rather than this framework.
Learn how to create apps on the fly using the sessionAppFromApp
method.
If you are new to session apps, review apps and session apps before continuing.
Creating a session app from an app
This example creates a session app from an existing app using the
qlik.sessionAppFromApp
method. It also displays an existing visualization from
that app.
Note: You must at least have update rights on the app that you are creating the session app from.
Note: You must be able to reload data in the app that you are creating the session app from.
Create the container
Create a folder named sessionAppFromApp
to contain your assets:
Create the container files
Create an HTML file and name it index.html
if you want to make a new web page.
You can also open an existing HTML page where the chart should be.
Create a JavaScript file and call it sessionAppFromApp.js
.
Reference the JavaScript file in the HTML file:
<script src="sessionAppFromApp.js"></script>
Include Qlik Cloud in your web page
Reference the Qlik Cloud implementation of RequireJS and a CSS file to ensure
the visualizations are styled as expected. Include the CSS reference in the
head
section of your web page:
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css"/>
Include the RequireJS reference before the closing body tag:
<script src="../../resources/assets/external/requirejs/require.js"></script>
Add some internal styling inside the head
of the HTML file to format the
presentation of the chart.
<style>
div.qvobject {
flex: 1 1 auto;
height: 400px;
width: 800px;
margin: 45px 0 0 45px;
}
</style>
Place the Qlik Cloud objects that have been defined in the JavaScript file
inside div
tags inside the body
of the HTML file.
<div id="QV01" class="qvobject"></div>
Configure the host connection
In the JavaScript file, configure the connection to Qlik Cloud.
const config = {
host: '<TENANT_URL>', //for example, 'abc.us.qlikcloud.com'
prefix: '/',
port: 443,
isSecure: true,
webIntegrationId: '<WEB_INTEGRATION_ID>'
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host +
(config.port ? ":" + config.port : "") + config.prefix + "resources"});
Create the session app
The qlik
object is an instance of the Root
API. After you configure your
connection to the server, you can open an app or, like in this case, create a
new app on the fly using the sessionAppFromApp
method:
const sessionAppFromApp = qlik.sessionAppFromApp("<APP_ID>", config);
This returns an app JavaScript object with some app methods, so you can now work with your app that uses the App API.
Reload the data and display an existing visualization
Reload the data. If the data loads successfully, display a visualization with ID
HrZsPG
in a HTML element with ID QV01
.
sessionAppFromApp.doReload().then((result)=>{
if( result ){
sessionAppFromApp.getObject('QV01', 'HrZsPG');
}
else {
console.log('Reload failed');
}
});
Complete the code
A require()
function is needed to load the Qlik APIs so that they can be
accessed by the mashup. The complete JavaScript code for this example is shown
below. Notice that the creation and data loading of the session app, and display
of the chart are included within the scope of the require()
function.
const config = {
host: '<TENANT_URL>', //for example, 'abc.us.qlikcloud.com'
prefix: '/',
port: 443,
isSecure: true,
webIntegrationId: '<WEB_INTEGRATION_ID>'
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host +
(config.port ? ":" + config.port : "") + config.prefix + "resources"});
require( ["js/qlik"], ( qlik )=> {
const sessionAppFromApp = qlik.sessionAppFromApp("<APP_ID>", config);
sessionAppFromApp.doReload().then((result)=>{
if( result ){
sessionAppFromApp.getObject('QV01', 'HrZsPG');
}
else {
console.log('Reload failed');
}
});
});
Test your mashup
For example:
https://your_web_server_URL:port