Tired of boring, static KPIs? Learn how to layer charts and metrics using Qlik’s layout container to create dynamic, composite KPIs. Bring your dashboards to life with trends, context, and impact—all in one view on the next episode of Do More with Qlik - Tips and Tricks.
In this episode of Do More with Qlik: Tips and Tricks Edition, I walk you through how to createdependent task chains in Qlik Cloud. Whether you're managing scripts, data flows, or apps, building a task chain ensures that each process runs in sequence—only when the previous one succeeds.
We’ll be working in a demo space called “Tasks Demo,” using three core objects:
A script that pulls pricing data and stores it in cloud storage.
A data flow that combines that data with inventory details to create a QVD.
An app that visualizes the results in a clear and simple dashboard.
In this video, you’ll learn how to:
Set up a scheduled time-based task.
Configure tasks to trigger only when a prior task succeeds.
Monitor task progress and view refresh statuses in real time.
This approach not only improves the reliability of your data updates but also helps you build a foundation for more complex automation across your Qlik environment.
👇 Watch the video below to see the full walkthrough and learn how to build your own dependent task chain in just a few clicks.
Have questions? Drop them in the comments where the video is posted—I'm here to help!
Resources:
More Do More with Qlik Videos
Qlik Help - Scheduling Data Refreshes
...View More
Custom CSS has been a popular workaround in Qlik Sense for years, helping developers tweak layouts, hide buttons, and get around styling limitations. But things are shifting. With the Multi-KPI object being deprecated and native styling options getting stronger with every release, it’s a good time to rethink how we approach custom styling in Qlik Sense moving forward.
In this post, we’ll break down:
Why custom CSS is used in Qlik Sense
What’s changing (and why Multi-KPI is being deprecated)
Best practices for styling moving forward
Alternatives for injecting CSS when needed
What you can (and should) do now to future-proof your apps
Let’s dive in!
Why is custom CSS used in Qlik Sense?
In the past, Qlik’s built-in styling options were limited. That led to many developers using CSS to:
Hide toolbars, buttons, and headers
Apply custom fonts or background gradients
Create grouped layouts or dashboards with unique branding
Most of this was made possible by either creating custom themes, building extensions, or using the Multi-KPI object as a helper to inject CSS code. But as powerful as these techniques were, they also came with downsides, like breakage after updates or difficulty governing app behavior at scale.
So, What’s Changing?
The biggest shift is the deprecation of the Multi-KPI object, which has served as a popular CSS injection tool. Here's what you need to know:
EOL of the Multi-KPI object is May 2026:
Existing dashboards will still work for now, but migration is highly encouraged.
The object is deprecated due to governance challenges and unintended side effects from injected CSS.
If you’ve been using the Multi-KPI as a styling workaround, it’s time to plan for alternatives.
Native Styling Has Come a Long Way
Before reaching for CSS, it's worth exploring what Qlik now offers natively. Many of the styling tweaks that once required CSS are now fully supported in the product UI.
Here’s a quick look at recent additions:
Native styling available now or coming in the next update
Straight Table
Background images, word wrap, mini charts, zebra striping, null styling, header toggle
Pivot Table
Indentation mode, expand/collapse, RTL support, cyclic dimensions
Text Object
Bullet lists, hover toggle, border control, support for up to 100 measures
Line Chart
Point and line annotations
Scatter Plot
Reference lines with slope, customizable outline color and width
Layout Container
Object resizing and custom tooltips
Navigation Menu
Sheet title expressions, left/right panel toggle, divider control
And this list keeps growing. If you're building new apps or redesigning old ones, these built-in features will cover a huge percentage of use cases.
Many deprecated CSS tricks are now native. Check out the full Obsolete CSS Modifications post for examples and native replacements.
What About Themes?
Themes are not going anywhere. In fact, they remain the most robust and supported way to apply consistent styling across your app portfolio.
With custom themes, you can:
Define global font families, sizes, and colors
Style specific object types like bar charts, pie charts, list boxes, and even treemaps
Customize titles, footers, legends, and more via the JSON schema
Apply branding at scale without touching each sheet manually
You can still include CSS files in themes, but remember:
Inline styles used by Qlik objects may require the use of "!important" to override.
Themes are not ideal for object-ID-specific or user-interactive CSS injection.
If you're new to themes, Qlik.dev has a great guideto get started, or checkout my previous blog post for some tips and tricks.
Still Need Custom CSS? Here’s What You Can Do
If your use case goes beyond what native styling or themes can handle—like hiding a specific button, or styling based on object IDs—you still have a few options:
Extensions (with scoped CSS)Prefix styles with .qv-object-[extension-name] to isolate your rules.Load styles using RequireJS or inject via <style> in JS.?
MashupsFull control over styling via your own HTML + CSS + JavaScript.Ideal for web apps embedding Qlik charts via qlik-embed
What's Missing
A lot of Qlik users have voiced the same thing: "we still need an officially supported way to inject CSS at the sheet or app level"
Some have suggested:
A new “Advanced Styling” section in sheet properties.
A standalone helper object just for advanced styling (like Multi-KPI but cleaner).
Ability to define per-object-type styling rules in themes (e.g. “all straight tables”).
Qlik has acknowledged this feedback and hinted that future solutions are being considered.
What You Should Do Today
Use native styling wherever possible—it's safer, easier to maintain, and now way more powerful
Migrate away from Multi-KPI if you’ve been using it to inject CSS
Explore themes for app-wide branding and consistent object styling
Use extensions or mashups for truly custom experiences
Follow community updates for new announcements around styling capabilities
That’s a wrap on this post. With more native styling features on the way, I’ll be keeping an eye out and will be likely sharing a follow-up as things evolve. If you're in the middle of refactoring or exploring new approaches, stay tuned, there’s more to come.
...View More
Qlik's Mike Tarallo details his personal experience with HVAC issues and how he utilized Qlik Answers to resolve a costly and complicated situation involving mismatched air conditioning units.
Last week a new presentation option for the bar chart was introduced in Qlik Cloud. The Butterfly presentation format displays two measures that mirror one another along the axis based on a single dimension. In the past, there have been methods used to generate the butterfly chart but now, it is a property option in the bar chart. Below are examples of butterfly charts. In the first example,the butterfly chart is comparing the average salary for men and women by country. In the second example, game stats are being compared for two selected college basketball teams.
Human Capital Management
Bracket Mania
Let’s look at how easy it is to create a butterfly chart. In the Human Capital Management example, the butterfly chart is comparing the average salary for men and women by country. The butterfly chart requires one dimension and two measures. In this example, Country is the dimension, and the two measures are as follows:
One measure for women and one measure for men. Both measures in a butterfly chart must return positive values to be displayed. If you are like me and used the old trick of creating butterfly charts by making one of the measures negative, you can simply remove that part of the expression to update your chart. In the app, both measures are master items, and a master color is applied to the measures so that males and females are different colors consistent with the rest of the app. Now, the only thing left to do is change the presentation to butterfly. This can be done from the properties of the bar chart in the Presentation > Styling section.
In both examples, the bar charts are horizontal, with mirroring measures on the y-axis. You also have the option to display the bar chart vertically. In this case, the mirroring measures will be on the x-axis.
Simple, right? As long as there are two items to be compared like male/female or team 1/team 2, a butterfly chart makes a nice alternative to the standard grouped or stacked bar chart. Try it for yourself and learn more at Qlik Help.
Jennell
...View More
I recently had an interesting use case for bookmarks that I thought I would share. I have a Qlik Sense app that will be accessed from more than one external source and the view of the app will differ depending on the referral link. In one scenario, the user is directed to the app overview of the app. In this scenario, no charts are highlighted. In the second scenario, the user is directed to a specific sheet in the app and a specific chart is highlighted. A message should also be displayed above the chart in this scenario. In this blog post, I will share an example of how this can be accomplished.
Here is a look at the original sheet:
And below is an example of the sheet with the top left chart highlighted. Notice that the chart is outlined and there is text above the chart. This is how the sheet should look in the second scenario when the user accesses the app via the bookmark URL.
To create the highlight for the chart, I added a layout container to the sheet. In the layout container, I added a text box for the highlight, a text box for the message and the chart I want to highlight. I made the background color of the first text object the color I wanted the highlight to be and positioned it behind the chart and a little larger than the chart (so that it appears like a border). I did not simply add a border to the chart because I want to control the show and hide of the highlight via a field value. The second text box has the message text and the same background color as the sheet.
I decided to use a field, _Message1, to control the show and hide of the highlight and the message. I added a table like the one below for this field.
I also use HidePrefix in the script before loading the table so that selections in this field do not appear in the selection bar.
I used the _Message1 field in the Show condition for the two text boxes (highlight and message) so that they were only visible when _Message1 = 1.
I also used the _Message1 field to change the bubble for the sales rep that I mentioned in the message. This can be done by using an expression to color the scatterplot bubbles.
Now, the only thing left to do is to create a bookmark that can be used to direct users to the Sales Analysis sheet and highlight the scatterplot. Before creating the bookmark, I went to the Sales Analysis sheet and selected 1 in the _Message1 field. Since I am hiding the _Message1 field, I made the selection in the browser URL by adding /select/_Message1/1 to the end URL while in analysis mode.
Now create a new bookmark and be sure to check ‘Save sheet location’ and ‘Save layout.’ To test the bookmark, clear selections in the selection bar and then select the bookmark. Don’t forget to make the bookmark public before publishing the app. Once the app is published, you can copy the link to the bookmark by going to bookmarks and clicking on the three dots next to the bookmark name and selecting Copy link. This bookmark link is what I used in an external source to direct users to the Sales Analysis sheet with the scatterplot highlighted. When I want to direct users to the app overview, I provided the URL to the app. The bookmark can also be used within the app, if necessary. If you do not want users to be able to clear the _Message1 field/remove the highlight and message, lock the field before creating the bookmark. This will prevent the _Message1 field from being cleared when the user clears all selections. To do this, you may need to temporarily remove the hideprefix in the script to lock the field.
If you would like to highlight a chart from within an app (and not an external source), consider using a button and the Go to chart action as seen in the May 2024 – Button Go to Chart sheet in the What’s New app. This allows you to add an action on a button that will not only direct you to a specific sheet but also to a chart that is temporarily highlighted.
This example illustrates how an app can have various views based on the referral URL. When accessing the URL to the app, the app is displayed without any chart highlights. Be sure to set the _Message1 field to 0 prior to publishing the app to ensure this. By using a bookmark URL, a message and highlighted chart is visible in the same app providing a different view for the user. This is just one of the many ways this can be accomplished in Qlik Sense.
Thanks,
Jennell
...View More
Qlik Answers transforms unstructured data into clear, AI-powered insights. Today, I'll show you how to integrate Qlik Answers directly into your web app using the newly releasedKnowledgebases API and Assistants API.
In this blog, we'll build a custom Football chat assistant from scratch powered by Qlik Answers.
We’ll leverage the Assistants API to power real-time Q&A while the knowledge base is already set up in Qlik Sense.
For those of you who prefer a ready-made solution, you can quickly embed the native Qlik Answers UI using qlik-embed:
<qlik-embed
ui="ai/assistant"
assistant-id="<assistant-id>"
></qlik-embed>
You can explore the ai/assistant parameters (and other UIs available in qlik-embed) on qlik.dev, or take a look at some of my previous blog posts here and here.
For full documentation on the Knowledgebases API and Assistants API, visitqlik.dev/apis/rest/assistants/ and qlik.dev/apis/rest/knowledgebases/.
Let’s dive in and see how you can take control of your Qlik Answers UI experience!
What Are Qlik Answers Assistants and Knowledgebases?
Before we start building our DIY solution, here’s a quick refresher:
Knowledgebases:Collections of individual data sources (like HTML, DOCX, TXT, PDFs) that power your Qlik Answers. (In our case, we built the KB in Qlik Sense!)
Assistants:The chat interface that interacts with users using retrieval-augmented generation (RAG). With generative AI in the mix, Qlik Answers delivers reliable, linked answers that help drive decision-making.
DIY the Qlik Answers Experience
Step 1: Get your data ready
Since we already created our knowledge base directly in Qlik Sense, we skip the Knowledgebases API. If you’d like to build one from scratch, check out the knowledgebases API documentation.
Step 2: Configure your assistant
With your knowledge base set, you create your assistant using the Assistants API. This is where the magic happens: you can manage conversation starters, customize follow-ups, and more. Visit the assistants API docs on qlik.dev. to learn more
Step 3: Build Your Custom UI
Now, let’s look at our custom chat UI code. We'll built a simple football-themed chat interface that lets users ask questions related to the NFL. The assistant’s answers stream in seamlessly to the interface.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Football Assistant</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h4>Let's talk Football</h4>
<span class="header-span">You ask, Qlik answers.</span>
</div>
<div class="chat-body" id="chat-body">
<div class="message assistant">
<div class="bubble">
<p>Hey there, champ! Ask me anything.</p>
</div>
</div>
</div>
<div class="chat-footer">
<input
type="text"
id="chat-input"
placeholder="Type your Football related question..."
/>
<button id="send-btn">Send</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
Frontend JS:
document.addEventListener("DOMContentLoaded", () => {
const chatBody = document.getElementById("chat-body");
const chatInput = document.getElementById("chat-input");
const sendButton = document.getElementById("send-btn");
// Append a user message immediately
function appendUserMessage(message) {
const messageDiv = document.createElement("div");
messageDiv.classList.add("message", "user");
const bubbleDiv = document.createElement("div");
bubbleDiv.classList.add("bubble");
bubbleDiv.innerHTML = `<p>${message}</p>`;
messageDiv.appendChild(bubbleDiv);
chatBody.appendChild(messageDiv);
chatBody.scrollTop = chatBody.scrollHeight;
}
// Create an assistant bubble that we update with streaming text
function createAssistantBubble() {
const messageDiv = document.createElement("div");
messageDiv.classList.add("message", "assistant");
const bubbleDiv = document.createElement("div");
bubbleDiv.classList.add("bubble");
bubbleDiv.innerHTML = "<p></p>";
messageDiv.appendChild(bubbleDiv);
chatBody.appendChild(messageDiv);
chatBody.scrollTop = chatBody.scrollHeight;
return bubbleDiv.querySelector("p");
}
// Send the question to the backend and stream the answer
function sendQuestion() {
const question = chatInput.value.trim();
if (!question) return;
// Append the user's message
appendUserMessage(question);
chatInput.value = "";
// Create an assistant bubble for the answer
const assistantTextElement = createAssistantBubble();
// Open a connection to stream the answer
const eventSource = new EventSource(
`/stream-answers?question=${encodeURIComponent(question)}`
);
eventSource.onmessage = function (event) {
if (event.data === "[DONE]") {
eventSource.close();
} else {
assistantTextElement.innerHTML += event.data;
chatBody.scrollTop = chatBody.scrollHeight;
}
};
eventSource.onerror = function (event) {
console.error("EventSource error:", event);
eventSource.close();
assistantTextElement.innerHTML += " [Error receiving stream]";
};
}
sendButton.addEventListener("click", sendQuestion);
chatInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
event.preventDefault();
sendQuestion();
}
});
});
Backend node.js script:
import express from "express";
import fetch from "node-fetch";
import path from "path";
import { fileURLToPath } from "url";
// Setup __dirname for ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Define port and initialize Express app
const PORT = process.env.PORT || 3000;
const app = express();
app.use(express.static("public"));
app.use(express.json());
// Serve the frontend
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "public", "index.html"));
});
// Endpoint to stream Qlik Answers output
app.get("/stream-answers", async (req, res) => {
const question = req.query.question;
if (!question) {
res.status(400).send("No question provided");
return;
}
// Set headers for streaming response
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive",
});
const assistantId = "b82ae7a9-9911-4830-a4f3-f433e88496d2";
const baseUrl = "https://sense-demo.us.qlikcloud.com/api/v1/assistants/";
const bearerToken = process.env["apiKey"];
try {
// Create a new conversation thread
const createThreadUrl = `${baseUrl}${assistantId}/threads`;
const threadResponse = await fetch(createThreadUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${bearerToken}`,
},
body: JSON.stringify({
name: `Conversation for question: ${question}`,
}),
});
if (!threadResponse.ok) {
const errorData = await threadResponse.text();
res.write(`data: ${JSON.stringify({ error: errorData })}\n\n`);
res.end();
return;
}
const threadData = await threadResponse.json();
const threadId = threadData.id;
// Invoke the Qlik Answers streaming endpoint
const streamUrl = `${baseUrl}${assistantId}/threads/${threadId}/actions/stream`;
const invokeResponse = await fetch(streamUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${bearerToken}`,
},
body: JSON.stringify({
input: {
prompt: question,
promptType: "thread",
includeText: true,
},
}),
});
if (!invokeResponse.ok) {
const errorData = await invokeResponse.text();
res.write(`data: ${JSON.stringify({ error: errorData })}\n\n`);
res.end();
return;
}
// Process and stream the response text
const decoder = new TextDecoder();
for await (const chunk of invokeResponse.body) {
let textChunk = decoder.decode(chunk);
let parts = textChunk.split(/(?<=\})(?=\{)/);
for (const part of parts) {
let trimmedPart = part.trim();
if (!trimmedPart) continue;
try {
const parsed = JSON.parse(trimmedPart);
if (parsed.output && parsed.output.trim() !== "") {
res.write(`data: ${parsed.output}\n\n`);
}
} catch (e) {
if (trimmedPart && !trimmedPart.startsWith('{"sources"')) {
res.write(`data: ${trimmedPart}\n\n`);
}
}
}
}
res.write("data: [DONE]\n\n");
res.end();
} catch (error) {
res.write(`data: ${JSON.stringify({ error: error.message })}\n\n`);
res.end();
}
});
// Start the backend server
app.listen(PORT, () => {
console.log(`Backend running on port ${PORT}`);
});
Breaking It Down
Okay, that was a lot of code! Let’s break it down into bite-sized pieces so you can see exactly how our custom Qlik Answers chat interface works.
1. The HTML
Our index.html creates a custom chat UI. It sets up:
A chat body where messages appear (initially with a friendly greeting from the assistant).
A chat footer with an input field and a send button for users to type their questions.
2. The Frontend JavaScript (scripts.js)
This script handles the user interaction:
Appending messages: When you type a question and hit send (or press Enter), your message is added to the chat window.
Creating chat bubbles: It creates separate message bubbles for you (the user) and the assistant.
Streaming the answer: It opens a connection to our backend so that as soon as the assistant’s response is ready, it streams into the assistant’s bubble. This gives you a live, real-time feel without any manual “typing” effect.
3. The Node.js Backend (index.js)
Our backend does the heavy lifting:
Creating a conversation thread: It uses the Assistants API to start a new thread for each question.
Invoking the streaming endpoint: It then sends your question to Qlik Answers and streams the response back.
Processing the stream: As chunks of text come in, the backend cleans them up—splitting any concatenated JSON and only sending the useful text to the frontend.
Closing the stream: Once the complete answer is sent, it signals the end so your chat bubble doesn’t wait indefinitely.
4. How It All Connects
When you send a question:
Your message is displayed immediately in your custom chat bubble.
The backend creates a thread and requests an answer from Qlik Answers.
The response is streamed back to your UI in real time, making it look like the assistant is typing out the answer as it arrives.
P.S: this is just a simple example to introduce you to the new Answers APIs and show you how to get started using them, you'll need to double check limitations and adhere to best practices when using the APIs in a production environment.
You can find the full code here:https://replit.com/@ouadielimouni/QA-Test-APIs#public/index.html
Happy coding - and, Go Birds 🦅!
...View More
