In the last couple of posts, we explored qlik-embed, Qlik’s new library for embedding Qlik Sense analytics into web applications, and went over how to do silent authentication with OAuth. Since then, the library has seen some updates, and today, we’ll delve into a new feature that allows to embed charts that are created on the fly as well as look into how to handle anonymous access using OAuth impersonation.
What’s New in qlik-embed?
Charts on the Fly
One of the features thatstandout in the newest qlik-embed release is "charts on the fly." This allows you to create charts dynamically from data within a Qlik Sense app without needing the chart to pre-exist in the app itself.
Instead, you pass a chart definition including dimensions, measures, and chart properties, and qlik-embed generates it on the fly in your web app.
Here’s a quick example using qlik-embed web components:
<!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" />
<style>
.container {
padding: 8px;
gap: 8px;
position: relative;
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
}
.viz {
width: 600px;
height: 600px;
padding: 16px;
border: 1px solid #bbb;
border-radius: 3px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
position: relative;
}
</style>
<title>@qlik/embed-web-components example - using OAuth</title>
<script crossorigin="anonymous" type="application/javascript"
src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
data-host="<YOUR TENANT>" data-client-id="<CLIENT ID>"
data-redirect-uri="https://localhost:3000/index_oauth_object.html" data-access-token-storage="session"></script>
</head>
<body>
<div id="main-app">
<div class="container">
<h1>@qlik/embed-web-components Example</h1>
</div>
<div id="analytics-chart" class="container">
<h2>"qlik-embed" <em>analytics-chart</em> embedding chart on the fly.</h2>
<div class="viz">
<qlik-embed id="visualization" ui="analytics/chart" app-id="<THE APP ID>"
type="barchart" dimensions='["Type", "Experience"]' measures='["Count([Demo ID])"]'
properties='{ orientation: "horizontal", barGrouping: { grouping: "stacked" } }'
context___json='{ theme: "Breeze", interactions: { select: false } }'></qlik-embed>
</div>
</div>
</body>
</html>
This feature is particularly powerful for creating highly dynamic and responsive dashboards where the visualizations can adapt to the user's needs in real time. However, keep in mind that "charts on the fly" is currently limited to the chart types available in the analytics/chart UI within qlik-embed. You can refer to the chart compatibility table for the most up-to-date information.
Notice that you can now pass context using the context___json (triple underscores (___)) to apply a specific theme etc..
For instance:
<qlik-embed context___json='{ theme: "Breeze" }' ... />
Understanding OAuth Impersonation
OAuth impersonation tokens in Qlik Cloud are a game-changer for web applications needing to access resources on behalf of users, especially when dealing with different identity providers. This method replaces the need for third-party cookies with OAuth tokens to maintain state, significantly improving security and user experience.
Things to keep in mind when using OAuth Impersonation:
Do Not Expose Machine-to-Machine Clients on the Frontend: keep your client secrets in the backend.
Use a Backend Web Application for Token Issuance: Create an endpoint in your backend application to issue tokens.
Explicitly Set Scopes on Impersonation Tokens: Ensure your tokens have the minimal required scopes to enhance security.
Here’s an example snippet for issuing impersonation tokens using the@qlik/apilibrary:
import { auth as qlikAuth, users as qlikUsers } from "@qlik/api";
const qlikConfig = {
authType: "oauth2",
host: "https://tenantName.region.qlikcloud.com",
clientId: "OAuth impersonation client Id",
clientSecret: "OAuth impersonation client secret",
};
//set the host configuration to talk to Qlik tenant
qlikAuth.setDefaultHostConfig(qlikConfig);
//access token method the frontend will call
app.post("/access-token", requiresAuth(), async (req, res) => {
const userId = req.session?.user?.id;
try {
//call to Qlik Cloud tenant to obtain an access token
const accessToken = await qlikAuth.getAccessToken({
hostConfig: {
...qlikConfig,
userId,
noCache: true,
},
});
console.log("I got an access token!");
//access token returned to front end
res.send(accessToken);
} catch (err) {
console.log(err);
res.status(401).send("No access");
}
});
Or using the fetch API:
const hostConfig = {
host: "https://tenantName.region.qlikcloud.com",
};
const payload = {
client_id: "OAuth impersonation client Id",
client_secret: "OAuth impersonation client secret",
grant_type: "urn:qlik:oauth:user-impersonation",
user_lookup: {
field: "subject",
value: "SUBJECT_VALUE",
},
scope: "user_default",
};
async function getAccessToken(hostConfig, payload) {
const getToken = await fetch(`${hostConfig.host}/oauth/token`, {
method: "POST",
mode: "cors",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
const response = await getToken.json();
//console.log(response);
return response;
}
(async () => {
await getAccessToken(hostConfig, payload);
})();
Once you have the backend that generates the access token built, you can access it on the frontend in the qlik-embed library by using the "data-get-access-token" attribute and passing it the name of the function that calls your access token backend API endpoint, like this:
<script crossorigin="anonymous" type="application/javascript"
src="https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js"
data-host="<YOUR TENANT>" data-client-id="<YOUR CLIENT ID>"
data-get-access-token="getAccessToken" data-auth-type="Oauth2"></script>
<script>
async function getAccessToken() {
const response = await fetch("<BACKEND API URL>/access-token", {
method: "POST",
credentials: "include",
redirect: "follow",
mode: "cors"
});
if (response.status === 200) {
const tokenResp = await response.json();
const accessToken = tokenResp.access_token;
return accessToken;
}
const err = new Error("Unexpected serverside authentication error");
err.status = response.status;
err.detail;
throw err;
}
</script>
You can visit qlik.dev for more information about authentication concepts.
The qlik-embed library continues to evolve, bringing powerful new features and enhanced security capabilities to the table. Whether you're creating dynamic visualizations on the fly or implementing different auth methods, qlik-embed provides the tools needed for bring Qlik analytics into your web applications.
...View More
Our Leigh Kennedy, Distinguished Principal Enterprise Architect, is back with an updated look on applying software development life cycle (SDLC) concepts to your Qlik Cloud Analytics tenants. Take it away Leigh!
This past week, with all the focus in Orlando for Qlik Connect, I decided to spend some time giving a dashboard in one of our existing demos a makeover. Given all the new capabilities that have been introduced recently, I was excited to see what I could create. Let me walk you through how I completed this dashboard makeover.
Today I am going to blog about cyclic dimensions. A cyclic dimension is a group of dimensions that can be cycled through in a visualization. The dimensions do not have to be related or have a hierarchical relationship. The dimensions only have to make sense with the measures used in the visualizations. Cyclic dimensions can be very useful when it is valuable to view a visualization across many dimensions. It becomes even more valuable if there are multiple visualizations on a sheet, or in an app, that use the same cyclic dimension. When a cyclic dimension is switched to the next field, all visualizations that use the cyclic dimension will be changed to the same field. This is a time saver. You may wonder if alternate dimensions can do the same thing. Alternate dimensions allow a user to change the dimension in a chart, but it only changes it for the specified chart whereas a cyclic dimension can change the dimension for multiple charts.Alternate dimensions can also be used in a visualization with a cyclic dimension.
Building a cyclic dimension is very easy and there are few ways to use them. You create a cyclic dimension the same as you do a single or drill-down dimension. From the Master items, create a new dimension. At the top select Cyclic dimension type, then add the fields to include. Give the cyclic dimension a name and save. Labels can be added to give the fields a different name and description. At least two fields need to be added to a cyclic dimension.
A cyclic dimension can be added to a visualization the same way a single dimension is added. Once they are added to a visualization a cycle icon will appear next to the field name as well as an arrow. By default, the first field in the cyclic dimension will be displayed. To change the dimension in the visualization, a user can click on the cycle icon or click on the label or down arrow and select another dimension.
Another way a user can cycle through the dimensions is to use a button. In the What’s New app, buttons have been created to cycle through the cyclic dimensions.
In all three buttons, the action is set to Step cyclic dimension and the Step is set to backward for the left arrow and forward for the right arrow and the cycle button in the middle.
Left arrow buttonRight arrow & cycle buttons
In the What’s New app, you can also see how changing the cyclic dimension in one visualization, updates all the visualizations using the cyclic dimension. In the screenshot below, Category Name is the current cyclic dimension.
If I switch the dimension, using any of the ways I have described above, Country Code is the dimension. Notice that the dimension in all the visualizations have been updated to Country Code in the screenshot below.
Check out Qlik Help to learn more about cyclic dimensions and to be aware of the limitations. Also watch Michael Tarallo’s SaaS in 60 video on Cyclic Group Dimensions. Try them out in your next app.
Thanks,
Jennell
...View More
On a previous blog post, we took a look at qlik-embed, Qlik’s newest embedding framework and saw how easy it is to get started using it to integrate content from Qlik directly in your web applications.
Today, we will see how to integrate qlik-embed UIs in your web applications that are connected to an OIDC-compliant IDP silently, without prompting users for authorization.
Before we get started, consider the following pre-requisites:
1- IDP:
We need an IDP, in this blog post, I will use Auth0 which offers a Free starter plan that you can use to test out this functionality.
2- Qlik Cloud Tenant:
We will configure the Qlik Cloud tenant with both the IDP provider and an OAuth Client.
3- Web App
Our Web App will be served using Node.js, so make sure to have the latest node.js version installed
Step 1- Auth0 IDP Configuration
After creating an account on Auth0, create an Application and select “Single Page Web Application” as the application type.
Next,, navigate to Settings and take node of the following:
Domain
Client ID
Client Secret
OpenID Configuration URL (you will find this after you expand Advanced Settings under Endpoints)
We will need these values later on in the post.
In the allowed Callback URLs field, add the following URL:
https://{YOUR TENANT DOMAIN}.us.qlikcloud.com/login/callback
In Allowed Web Origins, add the following URL:
https://localhost:3000
Step 2- Qlik Cloud Tenant Configuration
In this step, we will do 2 things, first, we will create and configure an identity provider. Second, we will configure an OAuth client.
2.1- Identity Provider:
Navigate to your Management Console > Identity Provider > Create New
Choose OIDC as the type
Choose Auth0 as the Provider
Enter the OpenID Configuration URL from Step 1
Enter the Client ID and Client Secret from Step 1
Expand Advanced Options and turn ON Email Verified Override
You can now Save and then Validate the IDP configuration, this will prompt you to authenticate to Auth0 (make sure you have an active user).
2.1- Configure the OAuth Client:
Navigate to the Management Console > OAuth > Click on Create new
Select Single-page app as the Client type
Select user_default for scope
Add the following as your Redirect URL
https://localhost:3000/oauth-callback.html
Add the following in the allowed origins:
https://localhost:3000
Once your Save, Copy the Client IDWe will need it in the next step.
Step 3- Creating the Web Application
3.1- Server: We will use Express to spin up a small server and use the “express-openid-connect” as a middleware to configure Auth0 and require authentication when a user tried to access resources without being authenticated.
It will redirect the user to log in and then back to the site once successfully authenticated.
the .env file should contain your Environment variables with the following:
HOST → localhost:3000
clientId → the client ID from Auth0 from step1
clientSecret → the client secret from Auth0 from step1
idpUri → the Domain from Auth0 from step1
sessionSecret → A random string
tenantUri → Qlik Cloud tenant
redirectPage → oauth-callback.html
3.2- Frontend
index.html: In the public folder, the index.html contains the setup for qlik-embed. In the script tag, the following values need to be entered:
data-host: Qlik Cloud tenant
data-client-id: The OAuth client Id from Step 2.2
data-auto-redirect: set to True, this will remove the Authorize button that appears on qlik-embed UIs. It will silently redirect to Qlik Cloud if the user is authenticated.
oauth-callback.htmlThis file contains a script tag with a qlik-embed callback. Make sure to set up data-host to your Qlik Cloud tenant url.
The entire source code can be found in the following Github Repo:https://github.com/ouadie-limouni/silent-auth-qlik-embed
Run the project:
First, you will need to generate a self signed certificate to put in the certs folder so we can be able to open localhost as https.
You can do this using openssl by following the directions below:
1- run the following command: openssl genrsa -out cert.key 2048
2- then run and hit enter on all the prompts: openssl req -new -key cert.key -out cert.csr
3- then run: openssl x509 -req -days 3650 -in cert.csr -signkey cert.key -out cert.crt
you will generate a cert.crt and cert.key files that you should put in the certs folder.
To compile and run the project:
run: npm install
then run: node index.js
Once you open https://localhost:3000, you will be automatically redirected to the Auth0 page.
After successfully authenticating in Auth0, you will be redirected to the web app and the qlik-embed UI will render the Qlik Sense app.
I hope you found this post helpful, for a more in depth tutorial and more, visithttps://qlik.dev/embed/qlik-embed/
...View More
Ever wonder how those Qlik experts make those awesome interactive dashboards? It is easier than you think. Check out this video that quickly shows you how to create custom beautiful buttons to apply selections and visually represent an active or non-active selection state. Allowing users just another way to analyze data in a way that is easy and familiar.
In this blog post, I will cover four Qlik Cloud features that you may not be aware of, but I find to be useful. They are:
New navigation option for buttons.
The ability to change the opacity of a background color.
The ability to add links to straight and pivot tables.
Placement of sheet navigation buttons with hidden sheet header.
The first feature is the option to navigate to a specific chart using button actions and navigation. We have always had the ability to navigate to a specified sheet but now, we can select a chart to highlight. In the Sales Analysis sheet below, there is a View Sales Details button on the bottom left that is used to navigate the user to the Details sheet and highlight the Sales Details table.
To implement this, the actions and navigation properties of the button need to be set to the Details sheet and the chart ID for the Details table, as seen below.
The Chart ID drop down will show all the IDs for charts on the selected sheet. (In this case, the Details sheet). To ensure you are selecting the correct chart, you can check or copy the chart ID by right clicking on the chart, clicking on …, selecting Share from the menu, then selecting Embed from the menu. These steps are illustrated below.
The Embed dialog window below will open and beneath the chart is its object ID. You can copy the object ID and paste it in the properties window for the button or note it and select it from the chart ID drop down list.
In this example, I used the “go to chart” to navigate between sheets but it can also be used on a single sheet. Now, when the user clicks on the View Sales Details button, they are navigated to the Details sheet and the Sales Details table, at the top of the sheet, is highlighted. Notice the blue colored box around it.
The second new feature is the ability to change the opacity of the background color. In the chart below, I have added a background color in the styling properties of the chart. After I select a color for the background, I can use the slider to adjust the opacity, if I choose. In this example, I set it to 60%. By default, it will set to 100% opacity.
The third new feature is the ability to add links to straight tables and pivot tables. Both tables are found in the Visualization bundle.
To add the link is easy. In the properties of the column (see image below), the Field should be the URL you would like for the link. In this example, the link is hard-coded, but you can also use a field value or expression to generate the link. The key to this working is setting Representation to Link (versus Text, which is the default).
The fourth, and last, new feature that I am going to cover in this blog is the new placement of the sheet navigation arrows when the sheet header is hidden. In a previous blog, I discussed how to toggle the sheet header and sheet toolbar. The sheet navigation arrows are in the sheet header as seen below and in the past when the sheet header was hidden, the navigation arrows were not available.
Now, when the sheet header is hidden, the sheet navigation arrows are moved up to the sheet toolbar. A small change, but quite helpful.
Now if you opt to hide the sheet toolbar as well, you may want to consider adding navigation to your sheet.
To wrap it up, this blog covers some small new features that you may find helpful. Users can now navigate to a visualization via button actions, the styling properties have been improved with the ability to set the opacity for a background color, URL links are available in straight and pivot tables and sheet navigation has become a little more flexible. Check out these new features next time you are developing an app.
Thanks,
Jennell
...View More