Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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-embed is 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-embed on qlik.dev.