Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Jul 8, 2024 6:23:30 AM
Sep 26, 2019 9:56:23 AM
Please note that due to changes in how browsers handle third-party cookies, you may wish to instead leverage the new qlik-embed framework with OAuth2 for your embedding needs, rather than the guidance in this tutorial.
In Qlik Cloud Services (Qlik Sense Enterprise SaaS), it is possible to get the iFrame HTML code to embed a chart in a webpage by right-clicking that chart and choosing "embed chart".
However, just placing this code on a web page is not sufficient to handle the authentication part.
The information provided in this article provides an example of how this can be achieved. Further customization is likely necessary. For assistance, join our active community in the Integrations and Extensions forum or contact our Consulting Services for an engagement.
Environments:
The information in this article is provided as-is and to be used at own discretion. Depending on tool(s) used, customization(s), and/or other factors ongoing support on the solution below may not be provided by Qlik Support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
const webIntegrationId = "g-yrbnOz9wV5-YnIqYLZMgfAxf_iKg30";
function login() {
function isLoggedIn() {
return fetch("https://yourtenant.eu.qlikcloud.com/api/v1/users/me", {
method: 'GET',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'qlik-web-integration-id': webIntegrationId,
},
}).then(response => {
return response.status === 200;
});
}
return isLoggedIn().then(loggedIn => {
if (!loggedIn) {
// check login
window.top.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + top.location.href;
throw new Error('not logged in');
}
});
}
login()
</script>
</head>
<body style="height:600px;">
<iframe
src="https://yourtenant.eu.qlikcloud.com/single/?appid=9539b869-1c84-4e6d-9129-4c5b031ca88a&obj=WJhPv&opt=ctxmenu,currsel"
style="border:none;width:100%;height:100%;"></iframe>
</body>
</html>
const webIntegrationID = "IDGOESHERE";
<iframe>src="linktotheobjecthere"></iframe>
Hi @Damien_V , Hi @Sonja_Bauernfeind
I followed the instructions to load an iframe into a online SharePoint page. And this worked, the iframe was shown and all is fine I thought… Only when I disconnect from Qlik SaaS the iframe disappeared and the error “login.qlik.com refused to connect.” appears.
Now I would like to know if it’s possible to embed the iframe with authentication in a online SharePoint environment?
Thanks in advance!
Niels
Hello @NielsvanWingerden
In order to handle the authentication and be able to see the chart on an external web page, the parent site needs to do a redirection and let the user authenticate. The code example shows how this could potentially work.
In order to get you the assistance that you need, I would recommend posting about your requirements and what challenges you are facing in our Integration forum.
If you, however, require direct assistance on this, our professional services are available to assist you.
All the best,
Sonja
In theory it should just be a matter of replacing
window.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + location.href;
by
window.top.location.href = "https://yourtenant.eu.qlikcloud.com/login?qlik-web-integration-id=" + webIntegrationId + "&returnto=" + top.location.href;
It took me a while to find the new Syntax for handing over parameters to the iframe. Please refer to:
This is different from Qlik Sense Enterprise on Windows. The parameter looks like
https://yourtenant.eu.qlikcloud.com/single/?appid=55628380-6eac-4a86-a63b-2396021b48d2&sheet=8462272...select=Country,Germany,Austria&select=CategoryName,Beverages
could you do another version of this --- but use a SharePoint page as the example?
We are losing the some context menu and object resizing features when using this feature. Any tip on how to keep them while using i-frames ?
Hello @mickael_b2boost
I recommend posting about your specific requirement and challenge in our Integration forum, where other active users and our support agents can review it for you.
All the best,
Sonja
Can we add custom images, custom objects like radio buttons in iframes