Qlik Community

Ask a Question

Knowledge Base

Search or browse our knowledge base to find answers to your questions ranging from account questions to troubleshooting error messages. The content is curated and updated by our global Support team

Announcements
QlikWorld Online 2021, May 10-12: Our Free, Virtual, Global Event REGISTER TODAY

How to create a mashup in Qlik Sense Enterprise on SaaS

Sonja_Bauernfeind
Digital Support
Digital Support

How to create a mashup in Qlik Sense Enterprise on SaaS

In Qlik Sense Cloud Services, it is possible to embed charts in a mashup.
However, if the user is not logged in yet when accessing the mashup, it is necessary to write some code to handle the authentication part.

This example is based on the step-by-step provided on the help site: Using Sense APIs > Mashup > Getting started building mashups > Building your first mashup with SaaS editions of Qlik Sense


Environments:

  • Qlik Sense Cloud Services June 2020 and later

 

In this example, it's assumed that helpdesk.html and helpdesk.js are placed in a folder called helpdesk on a webserver. 

You will need to update "yourtenant.eu" to your tenant name and region. 

The WebIntegrationId will also need to be updated, to set up the Web Integration, please follow steps on the help site: Getting set up > Owners and administrators of SaaS deployments > Managing integrations

helpdesk.html

<html>
<head>    
<link rel="stylesheet" href="https://yourtenant.eu.qlikcloud.com/resources/autogenerated/qlik-styles.css">
<script src="https://yourtenant.eu.qlikcloud.com/resources/assets/external/requirejs/require.js"></script>
<script src="helpdesk.js"></script>
<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>
</head>
<body>
<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>
</body>



helpdesk.js

var config = {
    host: 'yourtenant.eu.qlikcloud.com',
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '0pEp-l03lPxDawQxhOSWjKqO_Ckw1WYn'
};

//Redirect to login if user is not logged in
function login() {
      function isLoggedIn() {
        return fetch("https://"+config.host+"/api/v1/users/me", {
          method: 'GET',
          mode: 'cors',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
            'qlik-web-integration-id': config.webIntegrationId,
          },
        }).then(response => {
          return response.status === 200;
        });
      }
      return isLoggedIn().then(loggedIn => {
        if (!loggedIn) {	  
            window.location.href = "https://"+config.host+"/login?qlik-web-integration-id=" + config.webIntegrationId + "&returnto=" + location.href;
        }
      });
    }
login();


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

require( ["js/qlik"], function ( qlik ) {
	qlik.on( "error", function ( error ) {
		$( '#popupText' ).append( error.message + "<br>" );
		$( '#popup' ).fadeIn( 1000 );
	} );
	$( "#closePopup" ).click( function () {
		$( '#popup' ).hide();
	} );
    //open apps -- inserted here --
	var app = qlik.openApp( 'adf40cb9-ecbf-41c0-bfd5-cdcfe89e0ae9', config );
	
    //get objects -- inserted here --
	app.visualization.get('dvWgppB').then(function(vis){
    vis.show("QV01");	
	} );
} );


Lastly, do not forget to update the App ID and object ID (highlighted in blue in the above code)

Now you can access the mashup at: https://yourwebserver/helpdesk/helpdesk.html

Labels (1)
Version history
Revision #:
2 of 2
Last update:
‎2021-02-23 04:04 AM
Updated by:
 
Contributors