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
Several years ago, I blogged about how creating a synthetic dimension using ValueList allowed us to color dimensions in a chart. ValueList is commonly used where there is not a dimension in the data model to use, thus creating a synthetic one with ValueList. You can read more about ValueList in mypreviousblog post. In this blog post, I am going to share how I used ValueList to handle omitted dimension values in a chart.
I recently ran into a scenario when creating visualizations based on survey data. In the survey, the participant was asked for their age as well as their age group. The ages were grouped into the following buckets:
Under 18
18-24
25-34
35-44
45-54
55-69
70+
Once I loaded the data, I realized that there were not participants for all the age groups, so my chart looked like the bar chart below. There was a bar and value for only the age groups that the participants fit in.
While I could leave the chart like this, I wanted to show all the age group buckets in the chart so that it was evident that there were no participants (0%) in the other age group buckets. In this example, the four age groups were consecutive, so it did not look odd to leave the chart as is but imagine if there were no participants in the 45-54 age bucket. The chart may look odd with the gap between 44 and 55.
I explored various ways to handle this. One way was to add rows to the respective table for the missing age group. This worked fine but I was not a fan of adding rows to the survey table that were not related to a specific participant. The option that I settled on was using ValueList to add the omitted age groups. While this option works well, it can lead to lengthy expressions for the measures. In this example, there were only seven age group buckets so it was manageable but if you had many dimensions values then it may not be the best option.
To update the bar chart using ValueList, I changed the dimension from
To
Then I changed the measure from
To
Using ValueList in the dimension created a synthetic dimension with each age group option that was included in the survey. Now I will see all the age buckets in the chart even if there were no participants that fell in the age group bucket. Since I am using ValueList for the dimension, I need to update the measure to use it as well. This is where a single line measure can become a lengthier measure because I need to create a measure for every value in the synthetic dimension, thus the nested if statement above. The result looks like this:
There are no gaps in the age buckets, and we can see all the age bucket options that were presented in the survey. I prefer this chart over the first bar chart I shared because I have a better understanding of the survey responses presented to the participants as well as the response they provided. I would be interested in hearing how others have handled similar scenarios.
Thanks,
Jennell
...View More
If you have been learning about Qlik AutoML or looking for examples to get started, you might have only came across Binary Classification problems (such as Customer churn, Employee retention etc…). In this post, we will be solving a different type of problem with Qlik AutoML using a Regression model.
What is Regression, and Why Does It Matter?
Regression is a type of supervised learning used to predict continuous outcomes like housing prices, sales revenue, or stock prices. In industries such as real estate, understanding the factors driving prices can guide better decision-making. For example, predicting house values based on income levels, population, and proximity to the ocean helps realtors and developers target key markets and optimize pricing strategies.
In the upcoming sections, we go through how to build and deploy a regression model using Qlik AutoML to predict house prices using the common California Housing Dataset.
Step 1: Defining the Problem
Before creating the AutoML experiment, let’s define the core elements of our use case:
Trigger: New houses or listing entries are added to the dataset.
Target: Predict the house's value.
Features: Latitude, longitude, median age, total rooms, total bedrooms, population, households, median income, and proximity to the ocean.
Step 2: AutoML
The California Housing dataset is split into Training (historical) housing_train.csv and Apply (new) housing_test.csv data files.
Start by uploading these files to your Qlik Cloud tenant.
(The files are attached at the end of the blog post)
Creating the AutoML Experiment
Start a New Experiment:
In your Qlik Cloud tenant, click onCreate → ML Experiment
Select Your Dataset:
Choosehousing_train.csvas your dataset. AutoML will automatically identify columns as features and recommend their types.
Set the Target Variable:
Choosemedian_house_valueas the target for prediction.
Ensure all relevant features are selected, and adjust any feature types if needed.
Run the Experiment:
Click Run Experiment and let AutoML analyze the data. After a few minutes, you'll see the initial results, including SHAP values and model performance metrics.
You can also take a look at the Compare and Analyze tabs for more advanced details.
Deploying the AutoML Model
Choose the top-performing model from the experiment results.
Click on Deploy
Creating Predictions
Once in the Deployment screen, add the Apply dataset, create a Prediction, and make sure to select SHAP and Coordinate SHAP as files to be generated. We will use these later on in our Qlik Sense Analytics app to gain explainabilityinsights.
Step 3: Creating the Qlik Sense Analytics App
Now it’s time to visualize the predictions:
Load the Predictions:
Navigate to the Catalog and locate the newly created Housing_test_Prediction.parquetfile. Click Create Analytics App.
Add additional data, including SHAP and Coordinate SHAP files as well as the apply dataset.
Build the Dashboard:
Create visualizations such as:
A SHAP ranking to highlight the most influential features.
A histogram showing the distribution of predicted house values.
A map with gradient colors to visualize house prices by location.
You can experiment with different visualization types to explore the data from multiple perspectives.
Understanding the results:
Based on the Qlik AutoML model, we can clearly see how features like income levels and ocean proximity can influence housing prices.
For more inspiration on how you can use your predictions within your Qlik Sense Apps or in your embedded use cases, check out my previous blog posts:
Building What-If Scenarios using SSE and the Qlik AutoML Prediction API
Exploring Qlik AutoML Real-time Predictions API
...View More
The tab container, formerly the container object, has many new features that allow developers to style the container tabs. In this blog, I will review some of these new features but first let’s do a quick review of what the tab container is and how you can use it. The tab container can be used to show many visualizations, one at a time, thus using less space on a sheet. It is ideal when there is the need to have many visualizations on a single sheet but not quite enough space to display them all. When using a tab container, tabs or menu items are selected to navigate through the visualizations. Tabs and visualizations can also be displayed based on a variable or the user’s access. Below is an example from the What’s New app.
There are many ways a visualization can be added to a container object. A visualization on the sheet or a master visualization can be dragged and dropped onto the tab container object, or a chart can be added from the content section of the tab container. When tabs are toggled on, a tab will exist for each visualization in the tab container.
Some of the new features of the tab container are around the tabs. For example, the font, font size, width, alignment and color for each tab can now be set by the developer. Here are the style settings for the KPI chart tab (Tab container > Content > KPI object > Styling > Tab).
Notice that the width of the tab can be set based on a percentage or pixels. This allows the developer to make accommodations for larger tab labels that may need more width to be fully visible. The background color can be set to a single color, or an expression can be used. This can be done for each tab in the tab container object. Each tab can also have a different font type and/or font size, if desired, although a consistent look and feel (font type and font size) among all tabs is ideal. Note that when the orientation of the tabs is vertical, the width of the tab cannot be set. These styles can also be applied from the styling section of the tab container (Tab container > Appearance > Presentation > Styling > Tabs). Applying a background color here, will apply it to the entire object and all tabs. From here you can also set the table label alignment to left, center or right.
Another new feature is the orientation of the tab container tabs can now be vertical. Notice in the image below how the top chart shows just the icons of the tab, and the bottom chart shows just the labels. Both are neat and clean.
When there are many tabs in a tab container, you may consider showing the menu. This is helpful when all tabs are not visible without scrolling. It provides another way to navigate the tab container.
The added tab container features allow developers to easily style the object so that it fits in better with the theme/style of the sheet it is on. This is a welcomed new feature.
Thanks,
Jennell
...View More
