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
🎁🎄🎅 At Qlik, listening to our customers and users is at the heart of everything we do. For those of you who missed the ability to click on the Qlik logo or found it a bit quirky having all app assets, especially Sheets and Bookmarks, under a single button, we have great news! 🎉 Here’s an early Christmas gift from the dedicated teams atQlik– just for you. 🙇 Enjoy!
The new Navigation Menu object in Qlik allows for a flexible and easy way to add a menu to your Qlik Sense apps. Whether you're designing an app in Qlik Sense or embedding Qlik capabilities into a web platform, you should make this new object your go-to solution for organized and stylish navigation.
In this blog post, we'll explore into the new Navigation Menu object, its features, customization options, embedding capabilities, and key considerations for getting the most out of it. For a quick overview, check out the SaaS in 60 video below:
Navigation Menu in Qlik Sense Apps
Up until now, navigation in your apps has been limited to the following options:
Navigating through the built in Sheets tab in the assets panel
Custom built extensions
Or, in-app, using existing objects:
Using buttons:
Using the layout container in addition to buttons to create custom sidebars:
The new Navigation Menu object enhances your Qlik Sense app usability and makes it easier to achieve similar results faster tailored to your needs
Key Features:
Sheet Organization: Automatically arranges sheets and groups into a hierarchy for intuitive navigation.
Flexible Layouts: Choose from vertical, horizontal, or drawer-style menus, adapting to your app’s design needs.
Custom Styling: Personalize fonts (family, size, weight, and color), background images, align items, and hover and highlight effects. You can also toggle icons or resize the buttons.
Mobile-Optimized: Enable a list view for seamless navigation on mobile devices.
Integration-Friendly: Pair with "sheet title off" and selection bar for a minimalistic yet functional design.
You can toggle the "App Navigation bar > Navigation" or "Sheet Header" option to OFF in the UI settings and have the Navigation Menu object replace your traditional Sheets for a more minimalistic look.
👀 You can see the Navigation Menu object in action on the What’s New App:https://explore.qlik.com/app/4911b1af-2f3c-4d8a-9fd5-1de5b04d195c
Navigation Menu embedded in your Web Apps
For developers looking to incorporate Qlik analytics into their web applications, the Navigation Menu object can save time when developing a custom sheet navigation. You can easily embed the navigation menu object and customize it to meet your needs. (Learn more here)
How to Embed the Navigation Menu
Here’s a simple example of embedding a horizontal navigation menu in your web app using Nebula.js.
You can read more about Embedding and access the full documentation on qlik.dev:
const nuked = window.stardust.embed(app, {
context: { theme: "light" },
types: [
{
name: "sn-nav-menu",
load: () => Promise.resolve(window["sn-nav-menu"]),
},
],
});
nuked.render({
type: "sn-nav-menu",
element: document.querySelector(".menu"),
properties: {
layoutOptions: {
orientation: "horizontal",
alignment: "top-center",
},
},
});
Advanced Customization
Using JSON properties, you can customize the navigation menu extensively:
Adjust the orientation, alignment, and layout.
Add drawer functionality for compact navigation.
Style hover and highlight effects, font colors, and background images.
Align menu items to the left, center, or right for a consistent look.
These capabilities make the Navigation Menu a versatile tool for developers working on embedded analytics projects.
nuked.render({
type: "sn-nav-menu",
element: document.querySelector(".menu"),
properties: {
"layoutOptions": {
"drawerMode": false,
"hideDrawerIcon": false,
"orientation": "horizontal",
"layout": "fill",
"alignment": "top-center",
"separateItems": false,
"dividerColor": {
"color": "rgba(0,0,0,0.12)",
"index": -1
},
"largeItems": false,
"showItemIcons": false
},
"components": [
{
"key": "general"
},
{
"key": "theme",
"content": {
"fontSize": "18px",
"fontStyle": {
"bold": true,
"italic": false,
"underline": false,
"normal": true
},
"defaultColor": {
"index": 15,
"color": "#000000",
"alpha": 1
},
"defaultFontColor": {
"color": "#ffffff",
"alpha": 1
},
"highlightColor": {
"index": -1,
"color": "#3ba63b",
"alpha": 1
},
"highlightFontColor": {
"color": "#ffffff",
"alpha": 1
},
"hoverColor": {
"index": -1,
"color": "#ffa82e",
"alpha": 1
},
"borderRadius": "20px"
}
}
]
},
navigation: sheetObject.navigation,
});
Things to watch out for
While the Navigation Menu object is a fantastic addition, there are some key points to consider:
Content Security Policy (CSP): If you use background images from external URLs, ensure their origins are added to your tenant’s CSP allowlist. This step is essential for compliance and functionality.
Hierarchy Management: Group sheets effectively in your Qlik app to create a logical navigation structure.
Mobile Responsiveness: Test the menu thoroughly on various devices to ensure an optimal user experience, especially when using the list view.
Design Consistency: Align the menu’s styling with the rest of your app for a unified look and feel.
...View More
We’re excited to announce the launch of our enhanced Demo Site - explore.qlik.com, designed to showcase the full potential of Qlik’s product portfolio in an interactive and engaging way!
DBeaver is a popular and powerful SQL editor available built as an Eclipse Rich Client Platform (RCP) just like Qlik Talend Studio. The DBeaver Plugin is also available in the Eclipse Marketplace so it can be incorporated directly into your Studio environment. This document provides a step-by-step guide to extend Talend Studio with DBeaver.
Customizing your Qlik Sense apps not only enhances their visual appeal but also ensures consistency with your organization's branding guidelines. With custom themes you can modify colors, fonts, and layouts on both global and granular levels, giving you complete control over the look and feel of your analytics.
In this blog post, we'll dive into the essentials of building a custom theme, dissect the anatomy of the theme's JSON file, and share some tips and tricks to help you create themes easily.Bonus: along the way, we will be creating a Netflix inspired theme. We'll go from this:to this:Getting Started:The Essentials of Building a Theme
A custom theme in Qlik Sense is a collection of files stored in a folder.
It typically includes:
Definition File (.qext): This file defines the theme's metadata, such as its name, description, type, and version.{
"name": "Netflix Theme",
"description": "A custom theme inspired by Netflix's branding.",
"type": "theme",
"version": "1.0.0",
"author": "Ouadie Limouni"
}
Main JSON File (.json):The core of your theme where you define styles, colors, fonts, and other visual properties.
Optional Assets:
CSS Files: For additional styling that can't be achieved through the JSON file alone.
Font Files:Custom fonts to enhance typography.
Images: Logos or background images to incorporate into your theme.
Folder structure example:
netflix-theme/
├── netflix-theme.qext
├── theme.json
├── netflix.css (optional)
├── BebasNeue-Regular.ttf (optional)
└── images/ (optional)
└── background.jpg
Anatomy of the `theme.json` File(The full theme code is attached at the end of this blog post)
Variables Section (_variables)
Variables allow you to define reusable values (like colors and font sizes) that can be referenced throughout your theme. Variables must be prefixed with `@`.Example:
"_variables": {
"@primaryColor": "#E50914",
"@backgroundColor": "#141414",
"@ObjectBackgroundColor": "#3A3A3A",
"@fontColor": "#FFFFFF",
"@secondaryColor": "#B81D24",
"@fontFamily": "\"Bebas Neue\", Arial, sans-serif",
"@fontSize": "14px"
}
Global Properties
These properties set the default styles for your entire app.
Color: Sets the default font color.
Font Size: Sets the default font size.
Font Family: Sets the default font family.
Background Color: Sets the default background color for visualizations.
Sheet Styling
Customize the appearance of sheets, including the title backgrounds.
Object Styling
Control the styling of various objects (charts, tables, etc.) in your app.
Data Colors
Define how data appears in your visualizations, including primary data color, colors for null values, and colors for different selection states.Learn more here.
Palettes and Scales
Palettes are arrays of colors used for dimensions (categorical data). You can define custom palettes for data and UI elements.
"palettes": {
"data": [
{
"name": "Netflix Data Palette",
"scale": [
"#E50914",
"#B81D24",
"#221F1F",
"#FFFFFF"
]
}
],
"ui": [
{
"name": "Netflix UI Palette",
"colors": [
"#FFFFFF",
"#B3B3B3",
"#333333",
"#000000"
]
}
]
},
Scales are used for measures (numerical data) and can be gradients or classes.
"scales": [
{
"name": "Netflix Red Gradient",
"type": "gradient",
"scale": ["#B81D24", "#E50914"]
},
{
"name": "Netflix Grey Gradient",
"type": "gradient",
"scale": ["#333333", "#B3B3B3"]
}
],
Custom Fonts and StylesTo achieve the Netflix-style typography, we can use a font similar to Netflix's branding. For this example, we'll use "Bebas Neue", a free font that's close in style.
Extended Object Styling
You can apply specific styles to individual chart types, overriding global settings.
Example for a Bar Chart:
"barChart": {
"label": {
"value": {
"color": "@fontColor",
"fontSize": "12px",
"fontFamily": "@fontFamily"
}
},
"bar": {
"fill": "@primaryColor"
},
"outOfRange": {
"color": "#404040"
}
},
Tips and Tricks
Creating custom themes can be a rewarding experience, and here are some tips to help you along the way:
1. Use Variables for Consistency
Defining colors, font sizes, and other reusable values as variables ensures consistency across your theme and makes updates easier.
"_variables": {
"@primaryColor": "#E50914",
"@fontSize": "14px"
}
2. Leverage Inheritance
The `_inherit` property allows your theme to inherit properties from the default theme, reducing the amount of code you need to write.
{
"_inherit": true,
// Your custom properties here
}
3. Test Incrementally
Apply your theme during development and test changes incrementally. This approach helps you catch errors early and see the immediate impact of your changes.
4. Organize Your Theme File
Keep your `theme.json` file organized by grouping related properties. This practice makes it easier to navigate and maintain your theme.
5. Prefix Your Variables and Themes
To avoid conflicts with other themes or variables, use unique prefixes.
"_variables": {
"@netflix-primaryColor": "#E50914",
}
6. Validate Your JSON Files
Always validate your JSON files to prevent syntax errors. Use online tools like JSONLint.
7. Utilize Custom Fonts Carefully
Don't overuse custom fonts and ensure that any custom fonts you use are properly licensed for use in your application.
8. Use High-Quality Images
If you're incorporating images (like backgrounds or logos), make sure they are high-quality and optimized for web use.
-> Stay up-to-date with the latest on qlik.dev
Applying the Netflix Theme to Your App
Once you've created your custom theme, you can apply it to your Qlik Sense app:
1. Upload the Theme: Upload the zipped folder to the Themes section in your Console.2. Apply the Theme: In your app, go to the App options menu, select Appearance, and choose your custom theme from the list.
📌 If you are an advanced developer, checkout the following blog posts that tackle theming in an embedded context:- Theming with Picasso.js- Qlik Embed (theming section towards the end)
Happy theming!
...View More
A new file management system has been added to Qlik Cloud allowing users to create folders and subfolders for their data files. This hierarchical folder structure is available in your personal space, as well as shared, managed and data spaces. Now, I can add folders to a data space in my tenant and use folders to organize my files. This is extremely helpful when I have a project that has a lot of data files.
There are two ways to add folders to a space. The first is through Space details as seen in the image below.
After clicking on Space details, select Details. Then select Data files.
From the screenshot below, I can use the icons at the top or click on the eclipse at the end of a folder row to:
Upload files to a folder
Add a folder
Copy a folder
Cut and paste a folder
Delete a folder
I can also use the icons and menu options to cut, copy and paste files and/or folders to somewhere else within the space or to another space. More than one file can be cut/copy/pasted by selecting the entire folder or by holding ctrl and selecting each file.
The second way to add a folder to a space is via Administration > Content.
Let’s add one more folder to the CAJ space to see how it is done. To add a 2023 folder to the CAJ space, I will click on the Add folder icon and enter the name of the new folder. Be sure to confirm the path is correct. If not, select the correct path from the Path dropdown. Then click the Create button.
Once the folder is added, I can click on the eclipse for the 2023 folder and select Upload file to folder to upload files to this folder. If I used the Upload icon at the top, I would have to change the path to the 2023 folder before uploading my files.
This enhancement also lets me create subfolders as seen in the image below. I have a Population folder in the Census folder.
Now, let’s look at how we can load the data files in a Qlik Sense app using the folder structure. From the script editor in Qlik Sense, I can select the CAJ space and then click the Select data icon.
I can see the folder structure I have set up and I can drill down into the folders to select the file I want to load.
Notice that the file path in the script matches the hierarchical file structure I set up. This file structure can also be used when storing QVDs or inserting a QVS file.
I love this new feature in Qlik Cloud. Sometimes I have the need to organize my files by their source or in the example I shared in this blog by the year of the project. This allows me to organize my data in a way that makes sense for development. To learn more about this enhanced file management feature, check out Qlik Help.
Thanks,
Jennell
...View More
In this blog post, I will revisit a topic that I blogged about over a decade ago, the use of a silent legend. By default, a legend is created in a visualization when there are multiple dimensions and/or measures. The legend helps the user understand the visualization. Legends are helpful and without them, users may not comprehend the data in a visualization. But what do you do if have many visualizations on a sheet? Do you need a legend for each chart? Let’s look at the various ways a legend can be used and how a silent legend can reduce the clutter and give a sheet a cleaner look.
In the screen shot below, there are four visualizations at the bottom of the sheet with legends.
In this app, the legends are all the same because the visualizations are using the same asset class dimension. In this example, the legend does not need to be displayed for each visualization because it is redundant. Let’s see how this sheet will look if only one of the legends are kept on the sheet. A legend can easily be removed by toggling off Show Legend in the properties of the chart.
Here is what the sheet looks like with just one legend.
The sheet looks better with one legend versus four legends. This use of one legend for four charts, has decluttered the sheet and reduced repetitiveness. If a developer wants a legend to be displayed without expanding the chart, they need to ensure the visualization is large enough. Without the legends in the three stacked bar charts, less space is needed for the charts, thus they can be made smaller, if desired, to take up less space on the sheet. Since all the visualizations at the bottom of the sheet are using the same legend, the legend was placed with the first visualization, assuming a user is reading top to bottom, left to right.
Now, the beauty of a silent legend is that all visualization legends can be removed from a sheet. In the screenshot below, the four headings at the top of the sheet are colored based on the asset class they represent. So, Equity is green, Fixed Income is dark blue and so on.
This is an example of silent legend. The legend is implied by the asset class headings. This option looks even better and cleaner than the sheet with one legend.
The use of a silent legend is possible in this app because there are only four values for asset class. I have seen this work nicely with up to six values. Anything more may become too cumbersome and may require a legend to be used. Also, if the four visualizations at the bottom of the sheet used different dimensions, then multiple legends should be used. Legends are important and they should not be removed to add space if the chart is unreadable without it. What good is a pretty chart if you do not understand it.
Thanks,Jennell
...View More
