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
async 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;
throw new Error('not logged in');
}
});
}
login().then(() => {
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( '8120d03d-3902-4f4e-b0f1-3fee539227ad', config );
//get objects -- inserted here --
app.visualization.get('DKnjQAk').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
