Building your first mashup with Qlik Cloud

qlik-embed: Where possible, use qlik-embed rather than this framework. Review the tutorial embedding Qlik Analytics using qlik-embed web components.

Third-party cookies: This tutorial leverages cookies for auth, which are blocked by some browser vendors. Please use an OAuth solution where possible, which doesn’t leverage cookies.

This topic assumes that you are using an external web server to host your mashup. To keep things simple, any code related to authentication has been omitted.

Creating the container

Create a folder named helpdesk to contain your assets.

Creating the main script file

Create the main JavaScript file helpdesk.js. This file is placed in the helpdesk folder.

Configuring your Qlik Sense host

The Qlik Sense host being used must be configured in your mashup. This is needed for the following reasons:

To define the actual Qlik associative engine connection, which is used when you open an app or get a list of apps. This is covered by the config JavaScript object, used as a parameter in the openApp call.
To define where the Qlik Sense client side software and files should be loaded from. This is achieved by configuring RequireJS with the require.config call and setting the baseUrl.
To define the web integration ID, which is necessary to enable cross-domain resource sharing. For details on how to find the web integration ID, refer to Managing web integrations.

var config = {
    host: '<TENANT_URL>', //for example, 'abc.us.example.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",
    webIntegrationId: config.webIntegrationId
} );

Setting the global require and alert

The JavaScript file is loaded in the browser when your mashup is used. RequireJS is used as a module loader.

require( ["js/qlik"], ( qlik ) => {
  qlik.on( "error", ( error ) => {
    $( '#popupText' ).append( error.message + "<br>" );
    $( '#popup' ).fadeIn( 1000 );
  } );
  $( "#closePopup" ).click( () => {
    $( '#popup' ).hide();
  } );
  //open apps -- inserted here --
  //get objects -- inserted here --
} );

Note: Do not use different versions of RequireJS on the same web page. You can find out which version of RequireJS is being used by typing require.version in the browser console while viewing the mashup in the browser.

Connecting to the Qlik Sense app

You need to connect to the Qlik Sense app containing the objects you want to display on your web page.

//open apps -- inserted here --
var app = qlik.openApp( '<APP_ID>', config ); //Replace 'AppId' with the actual
                                           // helpdesk app ID

Note: Add this code within the scope of the require() method.

Retrieving the Qlik Sense objects to use

You then need to fetch the objects you want to display.

//get objects -- inserted here --
app.visualization.get('uETyGUP').then((vis)=>{
    vis.show("QV01");
} );
app.visualization.get('xfvKMP').then((vis)=>{
    vis.show("QV02");
} );
app.visualization.get('rJFbvG').then((vis)=>{
    vis.show("QV03");
} );
app.visualization.get('PAppmU').then((vis)=>{
    vis.show("QV04");
} );
app.visualization.get('ca4463f1-31fc-4eed-98a7-5e770b8387f3').then((vis)=>{
    vis.show("QV05");
} );
app.visualization.get('ff551649-420e-428d-bede-38accf80dce8').then((vis)=>{
    vis.show("QV06");
} );

Note: Add this code within the scope of the require() method.

Pre-selecting fields in the app

Making pre-selections in the app before rendering visualizations is a best practice. It allows the engine to do calculations once, which is quicker and puts less burden on the engine than making selections after the visualizations are rendered.

//function to pre-select fields
function getCaseOwner(callback) {
    // call some backend functionality and call the “callback” function when ready
    callback("Thomas R. Allman");
}

//call getCaseOwner with callback function
getCaseOwner(function(caseOwner) {
    app.field("Case Owner").selectMatch(caseOwner)
    .then(function() {
        //get objects -- inserted here --
        app.visualization.get('uETyGUP').then((vis)=>{
            vis.show("QV01");
        } );
        app.visualization.get('xfvKMP').then((vis)=>{
            vis.show("QV02");
        } );
        app.visualization.get('rJFbvG').then((vis)=>{
            vis.show("QV03");
        } );
        app.visualization.get('PAppmU').then((vis)=>{
            vis.show("QV04");
        } );
        app.visualization.get('ca4463f1-31fc-4eed-98a7-5e770b8387f3').then((vis)=>{
            vis.show("QV05");
        } );
        app.visualization.get('ff551649-420e-428d-bede-38accf80dce8').then(=>(vis){
            vis.show("QV06");
        } );
    })
})

Creating the main HTML file

Create an HTML file, name it index.html, and save it in the helpdesk folder.

Defining the relationships

The relationship between the current document and the linked Qlik Sense defined style sheet is specified in a link rel tag inside the head of the HTML file.

Note: Add host to the link rel tags if the web server hosting the mashup is different from the web server hosting the static Qlik Sense content.

<link rel="stylesheet" href="https://<TENANT_URL>/resources/autogenerated/qlik-styles.css">
<script src="https://<TENANT_URL>/resources/assets/external/requirejs/require.js"></script>
<script src="helpdesk.js"></script>

Adding an internal style sheet

Add some internal styling inside the head of the HTML file to organize the presentation of the charts.

<style>
div.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 45px 45px 0;
}
div.qvobject {
    flex: 1 1 auto;
    height: 300px;
    min-width: 400px;
    margin: 45px 0 0 45px;
}
</style>

Placing the Qlik Sense objects

The Qlik Sense objects that have been defined in the JavaScript file are placed inside div tags inside the body of the HTML file.

<div class="flex-container">
  <div id="QV01" class="qvobject"></div>
  <div id="QV02" class="qvobject"></div>
  <div id="QV03" class="qvobject"></div>
  <div id="QV04" class="qvobject"></div>
  <div id="QV05" class="qvobject"></div>
  <div id="QV06" class="qvobject"></div>
</div>

Testing the mashup

Now is a good time to test your mashup.

Log into Qlik Cloud.
Access the mashup:

For example:

https://your_web_server_URL:port

Creating the container
Creating the main script file
Creating the main HTML file
Testing the mashup