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
On a previous blog post, I shared a nifty tool that helps you introduce version control into your development workflow. I invite you to read about that and follow the gitoqlokand its latest updates.
In this post we are going to talk about a simpler, less cumbersome way to implement a simple version control system using Qlik Application Automation and the Github connector blocks. So, if you are someone who ends up with dozens of apps named v1, v2, v3, etc... then we're about to end that.
The setup is pretty simple, a Qlik Application Automation, a Github account, and we connect the two!
Let's start with with creating the Qlik Application Automation on your Qlik Cloud tenant. Head over to the Add New, then create a new Blank automation,
Once created, you'll be able to configure the Start block. Here, we are offered different ways to kick off the automation and in our case, we will use the WebHook run mode in order to hook into the Qlik Cloud Services.
We would like to run the automation once an App is published in our managed space. Take a look at the image below and change it to suit your needs.
Our next block is the Get Space block, you will find it under the Qlik Cloud Services section. This will allow us to find our "Git Demo Published" space and grab its ID. This is easy to do using the Do Lookup function.
Since Github doesn't allow space characters in Repository names, we will mitigate that by creating a variable which we will use to format the Space name into "git-demo-published". Notice on the image below that we use the Replace and Lowercase text functions.
Great, we now have our space information. Next, let's use the Get App Information block to grab the published app's id as shown below.
Our next step is to actually Export the App (think of this as right clicking on the app in the hub and exporting it).Alright, we now have a nicely formatted space name that will be used as our Repository name, and we have our "published" app exported and ready to go.
Our final step is to connect to Github. Qlik Application Automation makes this easy, just grab the Get Repository block under the Github section and drop it in. You will need to first authorize Qlik, so do this under the connection tab.In the Inputs tab, enter your username and drop in the Variable we previously created as the name of the Repo.Under Settings, make sure to change the On Error dropdown to "Ignore - Continue Automation and ignore errors". This will allow us to bypass a limitation set by Github for when a Repository is not yet created.
Next, using the convenient Condition Block, we will check to see if the returned value from the Get Repository block is empty (i.e, there is No repository under that name). If YES, we create it using the Add Repository block
After the condition is met (or if we already have the existing repo), we can now push our App to github.We will use the Create of Update File content Block to push the App qvf into the main branch. Take a look at the screenshot below to review the settings. Notice that we used the App name from the previous Get App Information block and appended it with the .qvf extension.
We're all done with the Automation. You can save it now and head over to your App to publish it and test.
Publishing the app will trigger the automation to run, and if we now head over to Github, we can see that a new Repository names "git-demo-published" (our formatted Space name) has been created, and a new commit was added with our first version of the App as a qvf.
After publishing a second time, we notice a new commit with the second version of the App.
By using this workflow, we can guarantee that our app versions are automatically stored for us to got back to if needed or to collaborate with other team members in a more efficient way.
I hope you found this blog post helpful, let me know if the comments below if you have any questions!
Ouadie
...View More
There have been new Qlik Sense features the past few months that I was excited to see. One of my favorites, which I am sure you are aware of, is the layout container. If you have not heard about it, check out Michael’s blog post here. Another favorite of mine is the copy and paste style feature which allows developers to copy and paste styles from one visualization to another. With all the styling options available in visualizations, being able to copy and paste styles saves time and eliminates the need to go into the styling properties of each visualization and set all the styling options you would like to use.
Some of the latest charts that have been upgraded to the new styling property panel are the Grid, Funnel and Sankey, giving users the ability to customize the title, subtitle, footnote, and background of a chart as well as the style the axes, labels, legends, and values in a visualization. Borders and shadows can be added to these visualizations as well.
The Filter Pane now has font styling for the title, subtitle, footnote, and header as well as font header and content styling. Like the charts above, borders and shadows can be added as well. Developers can change the background color or use an image in the background and control the color of the selected state. Here are a few examples.
With all these styling options, it is awesome that developers can now copy and paste the style from one visualization to another. If you remember the QlikView days, you know how valuable this feature is. Assume I have an app with a theme applied and have made some styling changes to the Margin KPI (see image below). If I want to apply the same styling changes to the Margin %, I have two options. One option is to open the styling properties of the Margin % KPI and make the same changes to the background color, border color and shadowing.
The second option and the easiest option is to right click on the Margin KPI while in Edit mode, click on the three dots (…) and select Copy style.
Then right click on the Margin % KPI, click on the three dots (…) and select Paste style.
That is a lot easier than styling the KPI manually, especially if there are multiple visualizations to update.
There are a few limitations to using the copy and paste style - you cannot copy and paste the style in a map or a master visualization. New styling properties for visualizations are being add all the time, giving users many options to style and make their app stand out. The copy and paste functionality is a great addition to Qlik Sense and makes designing and styling apps easier.
Thanks,
Jennell
...View More
Watch how I am serving our #QlikNation Community members, by not only analyzing their video suggestions BUT responding to them immediately from within this Qlik Cloud Analytics App. #mikedrop