Creating session apps from existing apps

Note: 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: For the app you are creating the session app from, you must:

• have at least update rights.
• be able to reload data.

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