If you’ve came across the initial Qlik Cloud Wordpress plugin on the Qlik Community Design blog and gave it a try, you probably have run into some issues with it. Today, I’m going to share a new updated version of the Qlik Cloud WordPress plugin that brings a more efficient way to embed Qlik Cloud analytics into your WordPress websites. In this post, I'll walk you through the steps to install, configure, and use the new version of the plugin to bring your Qlik Cloud visualizations directly into your WP pages and posts. Why the Update? The previous version of our plugin relied on JWT tokens for auth, iframes (single integration API) and nebula.js for embedding, which worked but had limitations such as third-party cookies. Qlik Embed is the new embedding library and adopts better auth flows. In this version, I'm using OAuth impersonation to generate access token on the backend without need for users to interact with a login page. Installation Steps 1. Install the Plugin Log in to your WordPress Admin Dashboard. Navigate to Plugins on the left sidebar. Click on "Add New" at the top of the page. Upload the zipped file (download it from GitHub here) Locate the plugin and click "Install Now". After installation, click "Activate". Note: If you have the previous version installed, deactivate and delete it before installing the new one to avoid conflicts. Configuring Qlik Cloud Wordpress Plugin Before using the plugin, you'll need to set up OAuth impersonation in your Qlik Cloud tenant. Create an OAuth Client Log in to your Qlik Cloud tenant as an administrator. Navigate to Management Console > Integrations > OAuth. Click on "Create new" and fill in the required details: Name: Give a recognizable name like "WordPress Integration". Allowed Origins: Add your WordPress site's URL. Select the right scopes to grant to the client from the Scopes list. Check “Allow Machine-to-Machine (M2M)” and “Allow M2M user impersonation” Change the consent method to Trusted Save the client credentials (Client ID and Client Secret) to be used in WordPress Config. Docs here: https://qlik.dev/authenticate/oauth/create/create-oauth-client-m2m-impersonation/ Make sure to read through the Guiding Principles of OAuth Impersonation:https://qlik.dev/authenticate/oauth/guiding-principles-oauth-impersonation P.S: this method will create a number of anonymous users on your tenant and you need to implement a way to remove these users periodically (using a Qlik Application Automation / users API) Configuring the Plugin In your WordPress dashboard, go to Settings > Qlik Cloud Embed. Fill in the required fields: Host: e.g., https://your-tenant.region.qlikcloud.com. Client ID: From the OAuth client you created. Client Secret: From the OAuth client. Click "Save Changes". Using the Plugin Embedding Sheets and Visualizations With the plugin configured, you can now embed Qlik Cloud content using Shortcodes. 1. Embed an Entire Sheet/App Use the [qlik-embed-app] shortcode: [qlik-embed-app appid="1234-c56a-4062-ac50-377bba443e85" sheetid="12345-698f-449f-9a17-dca17eeadb71"] Parameters: appid: App ID sheetid: Sheet ID 2. Embed Individual Visualizations/Objects Use the [qlik-embed-object] shortcode: [qlik-embed-object appid="1234-64317-8432" objectid="1234-5553-326432"] Parameters: appid: App ID objectid: Object ID 3. Embed Selections bar Use the [qlik-embed-selections] shortcode: [qlik-embed-selections appid="1234-c56a-4062-ac50-377bba443e85"] Parameters: appid: App ID Tip: Finding IDs in Qlik Cloud Open your app in Qlik Cloud. Navigate to the sheet or object you want to embed. In the URL, find the sheet ID Sheet ID comes after /sheet/ For object, right click on the chart, click on Embed, and look for objectid under the chart preview. You can download the plugin here:https://github.com/qlik-demo-team/wp-qlik-saas-plugin P.S: this plugin is maintained by myself. If you find any bugs or issues, please report them to me or create an issue on Github and I'll do my best to resolve them quickly. Thank you! ...View More

A look into some of the new features of Qlik Cloud's new UI.

...View More

Let’s take a look at how Qlik’s new generative-AI powered knowledge assistant, Qlik Answers, is helping our own salesforce better serve customers. 

...View More

The new straight table, found in the Qlik Visualization bundle, has two new enhancements in Qlik Cloud. The first is expression-based text styling and the second is measure modifiers. Let’s look at how these new enhancements can be used. With the first enhancement, columns in a straight table can be styled based on an expression. This is done in the properties of a column in the Text styleexpression. There are four styles that can be applied in the expression. They are: Bold: <b> or <B> Italics: <i> or <I> Underlined: <u> or <U> Strikethrough: <s> or <S> In the expression, the style can be in written in uppercase or lowercase letters and it should be enclosed in single quotes. Here is an example of an expression that can be used to bold the text in the Customer column if the Customer is Boombastic. The results in the table look like this: To bold all the text in the Customer column, '<b>' can be used in text style expression without the if statement. In the example below, the text in the Discount column and the Product Name column is strikethrough if the discount is equal to 0. The same expression below is used in both columns to format the text. Text styles can also be combined in an expression. In the example below, the text is bold, italicized and underlined if the Sales value is greater than $1,000. Notice that all the style codes are included in the single quotes. Multiple styles can be used in the same expression based on different criteria as well. For example, Sales values can be bold if over $1,000 and strikethrough if under $100. While text styles can be combined, use with care and use the text styles to highlight something in the data, not clutter it. The second enhancement of the new straight table are measure modifiers. Modifiers are not new to Qlik Sense, but they are new to the straight table. In the properties of a measure, there is an option to add a modifier. The four modifier options are: accumulation, moving average, difference and relative numbers (see image below). When a modifier is selected, other modifier settings will be made available for developers to edit as needed. Let’s look at each modifier briefly. The accumulation modifier will accumulate the measure value over dimension(s). In the table below, the Sales – Accumulation value will accumulate over the Year Month dimension. The moving average modifier will average the measure value over a specified period. In the properties below, the moving average modifier is set to full. Also notice the output expression which shows the expression used for the modified measure – this is available for all modifier options. With these settings, the results off the modifier will look like the table below. With every row, the Sales value is included to calculate the new moving average. The difference modifier will display the difference between the measure value as seen in the table below. In this case, the difference between the previous row and current row values. The relative numbers modifier will display relative percentages that can change based on the properties selected. In the example below, the year 2023 is selected. If the selection scope is set to current selections, then the resulting table will show the percentages for 2023 only. If the selection is disregarded, then the percentages ignore the 2023 selection and show percentages across all the month year timeframes. Below in the resulting table, the percentages are a lot lower since they are across a larger dataset. To learn more about these enhancements, check out Qlik help using the links below. Straight table Modifiers Thanks, Jennell ...View More

In previous blog posts (1, 2, 3), we explored different topics around Qlik's embedding library, qlik-embed, and how to integrate it seamlessly with OAuth for authentication. Today, we'll delve into the latest updates and new features, including embedding Qlik Answers, go over UI capabilities, and advanced configuration options. Recap: What is qlik-embed? qlik-embed is a versatile library designed to facilitate the embedding of Qlik Sense analytics into web applications. By using web components, it allows developers to easily integrate Qlik's powerful analytics capabilities without dealing with the complexities of traditional embedding methods. The library supports various authentication methods, including Qlik Cloud API keys, OAuth2 clients, and Qlik Sense Enterprise interactive login. In our previous discussions, we highlighted the ease of use and the flexibility qlik-embed offers, supporting components such as chart, field, selections, and entire app. New Feature: Embedding Qlik Answers One of the most exciting additions to qlik-embed is the ability to embed Qlik Answers. Qlik Answers leverages AI to provide natural language querying capabilities, allowing users to interact with their data using conversational language (If you haven’t already checked that out, visit this Community post or watch this demo video). The new UI component ai/assistant enables this functionality directly right within your web app. Here's an example of how you can integrate Qlik Answers into your application: <qlik-embed ui="ai/assistant" assistant-id="<assistant-id>" appearance="qlik-light"> // or "qlik-dark" </qlik-embed> This simple integration can greatly enhance user interaction by allowing them to ask questions and receive insights in real-time, making data exploration more intuitive and user-friendly. More on UIs and Parameters As I mentioned before, the qlik-embed framework supports a variety of UIs, each designed for specific purposes. Let’s take a quick overview on each one: analytics/sheet: For embedding entire Qlik Sense sheets with full selectivity but without additional features like alerts or notes. (Supports sheets that contain only nebula.js visualizations, for a full list: see here: https://qlik.dev/embed/foundational-knowledge/visualizations/)<qlik-embed id="visualization" ui="analytics/sheet" app-id="13b05004-2752-4f39-a077-7a71c5816997" object-id="bdGHw"></qlik-embed>​ analytics/chart: For embedding single chart objects or creating charts on the fly with better performance. (Supports nebula.js objects only, see full list above)<qlik-embed id="visualization" ui="analytics/chart" app-id="13b05004-2752-4f39-a077-7a71c5816997" object-id="hshG"></qlik-embed>​ analytics/field: A lightweight listbox for a specific field (dimension or measure)(To find the library-id, you can add /options/developer to the URL when editing a sheet, right click on a object containing your master dimension or measure then click on Developer and look for the qLibraryId value)<qlik-embed id="visualization" ui="analytics/field" app-id="13b05004-2752-4f39-a077-7a71c5816997" library-id="BfXheUu" type="dimension"></qlik-embed>​ analytics/selections: Displays a selection bar with controls for managing selections.<qlik-embed id="visualization" ui="analytics/selections" app-id="13b05004-2752-4f39-a077-7a71c5816997"></qlik-embed>​ classic/app: Provides a full-featured Qlik Sense sheet analysis and authoring experience.<qlik-embed id="visualization" ui="classic/app" app-id="13b05004-2752-4f39-a077-7a71c5816997"></qlik-embed>​ classic/chart: Backwards-compatible for single chart objects (legacy), including support for extensions.<qlik-embed id="visualization" ui="classic/chart" app-id="13b05004-2752-4f39-a077-7a71c5816997" object-id="hshG" iframe="true"></qlik-embed>​ Each UI type can be configured with various parameters to customize the appearance and functionality. For example, you can set the theme, dimensions, measures, and even complex properties for charts. Here’s an example of embedding a dynamic chart (See here for more info about Charts on the Fly) <qlik-embed ui="analytics/chart" app-id="YOUR_APP_ID" type="barchart" dimensions='["Category"]' measures='["Sum(Sales)"]' properties='{"orientation": "horizontal"}'> </qlik-embed> This flexibility allows you to create highly dynamic and interactive dashboards that can adapt to users' needs in real-time. Advanced Configuration: Context Parameters and Themes A cool feature of qlik-embedis the ability to pass context parameters using the context__json attribute. This allows for more granular control over the embedded visualizations, enabling customization of themes, interactions, and other properties directly within the web component. Reference my previous post about this here. Accessing the App Model through qlik-embed With qlik-embed, you can access the metadata of a Qlik Sense application, including, but not limited to, obtaining a list of sheets and adding them to a dropdown list element for instance. Keep in mind that this won't work with the classic/app UI <!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> body, html { margin: 0; padding: 0; font-family: sans-serif; font-size: 14px; background-color: #f5f5f5; color: #333; height: 100%; width: 100%; } .container { padding: 8px; gap: 8px; position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; } .classic-app { height: 800px; width: 1200px; border: 1px solid #bbb; flex-grow: 1; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); position: relative; box-sizing: border-box; overflow: auto; position: relative; } .viz { width: 1200px; height: 900px; 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" data-host="https://YOUR_TENANT.us.qlikcloud.com" data-client-id="CLIENT_ID" data-redirect-uri="https://localhost:3000/index_oauth_object.html" data-access-token-storage="session"></script> <script type="module"> const embeddedObject = document.getElementById("visualization"); const refApi = await embeddedObject.getRefApi(); console.log('refApi -> ', refApi); const doc = await refApi.getDoc(); const appSheetList = await doc.getSheetList(); //add the sheet references to a dropdown list let dd = document.getElementById('sheetdrop'); dd.length = 0; let defaultOption = document.createElement('option'); defaultOption.text = "Select a sheet to navigate to"; dd.add(defaultOption); dd.selectedIndex = 0; let option; for (let i = 0; i < appSheetList.length; i++) { option = document.createElement('option'); option.text = appSheetList[i].qMeta.title; option.value = appSheetList[i].qMeta.id; dd.add(option); } //add a listener to change the object-id property in the qlik-embed element dd.addEventListener("change", function () { if (dd.selectedIndex > 0) { let selOption = dd.options[dd.selectedIndex]; console.log(selOption.value); embeddedObject.setAttribute('object-id', selOption.value); } }); </script> </head> <body> <div id="main-app"> <div class="container"> <h1>@qlik/embed-web-components Example</h1> </div> <div> <select id="sheetdrop" name="SheetList"> </select> </div> <div id="analytics-chart" class="container"> <div class="viz"> <qlik-embed id="visualization" ui="analytics/sheet" app-id="27018b4a-eaa7-4658-a8c2-ecf48d321371" object-id="d568340d-1264-473e-bbdf-68d2555f007e"></qlik-embed> </div> </div> </body> </html> The continuous evolution of qlik-embed brings exciting new features that enhance the integration of Qlik analytics into web applications. Stay tuned for more updates and explore the full potential of qlik-embedon qlik.dev. ...View More

A step by step guide on how to activate the new Qlik Cloud UI.

...View More

In august 2020 we introduced the App Analyzer for Qlik Cloud tenants, a powerful monitoring tool which tracks metrics such as an app’s memory usage, ensuring you stay within your quotas. It also aids in app optimization by revealing field and table sizes, and highlighting potential data modeling issues like synthetic keys and data islands.

...View More

There have been some data load editor improvements that I think are worth mentioning so in this blog post I will cover some of the new features in the data load editor that I have found useful. The first, and my favorite new feature, is the table preview. The second is the ability to do a limited load and load a specified number of rows in each table. The third feature I will cover is the ability to view the script history, as well as the option to save, download and restore previous versions. Let’s look at each of these in more detail. When building an app, my preference is to use the load data editor to load my data. With table preview, I can view loaded data tables at the bottom of the data load editor after data has been loaded or previewed in an app. This is my favorite new feature because nine times out of ten, I want to view the data I loaded to ensure it loaded as expected and to check that my logic is correct. Having the preview table right there in the data load editor, saves me from having to go somewhere else, like the data model viewer or a sheet, to view the loaded data. I can use the preview table to check that they have the desired results. The ability to do this quick check saves me time. As a developer, I can select the table to preview, and the data can be viewed as a table, as seen above, or as a list or grid as seen in the images below. When previewing the data as a table, the preview table can be expanded to show more rows, columns in the table can be widened and there is pagination that allows me to move around in the table. There is also an option to view the output of the load. This will show the same info you see in the load data window when the app is reloading. List View Grid View The second feature in the data load editor I find useful is the preview data option. This provides an easy way for me to load some, but not all, of the data when reloading. In the screenshot below, the default of 100 rows is entered. This will load a max of 100 rows in each table. This value can be edited if desired. By default, the use store command is toggled off. When this is off, store commands in the script are ignored preventing potentially incomplete data from being exported. This feature is helpful when I want to just profile the data and see what the data looks like. It can also be helpful when there is a lot of data to be loaded and I do not need to load it all to check that the script is working as expected. Again, this is another time saver because I can limit the load thus the time it takes for the app to reload in a single step. I find this helpful when I want to quickly test a change in the script but do not want to wait for the entire app to reload. The last data load feature I am going to cover is history for scripts. This new capability allows me to create versions of the script, name and rename scripts, restore the script from a previous version, download the load script or delete a version of the script. I have not used the history feature much, but I can see it being helpful when I want to name various versions of the script. Every time the script is edited, it is saved to the current version. At any time, I can save that current version giving it a meaningful name. Maybe I want to make some changes to the script but want to have a backup in case it does not work. This can be done now right in the data load editor. I also have an easy way to restore a previous version, if necessary. Once a version is named, it can be renamed, restored, or deleted. All script versions can be downloaded as a QVS file. One thing to note is that the history only saves scripts created in the data loaded editor. Hopefully, you find these new data load editor features helpful. They are available now in your tenant. Just check out the data load editor in your app. Thanks, Jennell ...View More

Join Principal Technical Marketing Manager Mike Tarallo and Senior Web Developer Ouadie Limouni as the team up once again to show you what is possible and what you may have missed in the Qlik Cloud platform. Witness the art of the possible, sophisticated and simple embedding, and a recent recap of the capabilities that make Qlik a leader for 14 years in the Gartner Magic Quadrant in Analytics and Business Intelligence Platforms.

...View More

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