Sisense
Dashboard Toolbar
The Dashboard Toolbar plugin gives you full control over the appearance and behavior of your Sisense dashboard toolbar. This configuration-driven tool allows you to customize styling, simplify the interface, and add interactive elements, making it easy to align the toolbar with your brand and improve the overall user experience.



Release Notes for Dashboard Toolbar can be found here.
Installation
The Dashboard Toolbar plugin can be installed by an Admin, following the directions in Installing QBeeQ Plugins
Operating system and version support:
- Linux - Latest
- Windows - Latest
Upgrades
This plugin requires the modification of the config.js file. Any changes made to these files are specific to an individual customer’s environment. Because QBeeQ does not have access to customer environments, we cannot provide upgrade files tailored to each customer’s customizations.
To avoid issues when upgrading, please reference our Upgrading QBeeQ Plugins guide for more information.
Configuration
Dashboard Toolbar uses a config.js file for configuration. This file controls the global behavior across your entire Sisense instance.
To locate this file:
- Go to the Admin tab > App Configurations > File Management
- Continue to the plugins folder > QBeeQCustomDashboardToolbar folder > select the
config.jsfile
You can edit the file's code directly in the user interface.
The settings object provides a set of options to customize the dashboard toolbar look and feel:
- Style the dashboard title
- Show/hide elements of the toolbar
- Customize the toolbar background
- Add clickable icons to the toolbar
// Configuration settings for customizing the Sisense dashboard toolbar behavior and appearance
var settings = {
// Enable or disable the Dashboard Description icon and panel feature
dashboardDescription: true,
// Configuration for the Dashboard Description icon
dashboardDescriptionInfo: {
// Icon to display in the toolbar. Accepted values:
// "" → default: native Sisense #general-info-circle sprite
// "<svg>…</svg>" → inline SVG string
// "#sprite-id" → Sisense SVG sprite reference
// "/path/file.svg" → image file path (rendered as <img>)
icon_svg: "",
// Text shown when the user hovers over the icon
tooltip_text: "Dashboard Description",
// Optional inline CSS styling for the icon rendered in the toolbar
style_for_img: {
height: "28px",
width: "28px",
margin: "0px 0px 0px 0px",
},
},
// Enable or disable custom styling for the dashboard title
styleDashboardTitle: true,
// CSS rules to apply when styling the dashboard title
dashboardTitleStyleRules: {
"font-size": "22px", // Set font size of the title
color: "#000000", // Set text color of the title
"font-weight": 800, // Make the title bold
"text-transform": "capitalize", // Capitalize the first letter of each word
},
// Hide the data source's last refresh date/time display in the toolbar if true
hideDataSourceDateTime: false,
// Hide the data source title in the toolbar if true
hideDataSourceTitle: true,
// If true, apply a custom background color to the dashboard toolbar
colorToolbarBackground: false,
// Custom background color value for the toolbar
toolbarBackgroundColor: "#b1f2ff",
// Control whether to add custom icons to the dashboard toolbar
addIconsToToolbar: true,
// Array of custom icons to be added to the toolbar (if enabled)
toolbarIcons: [
{
// Path to the SVG icon file to display in the toolbar.
// This can be a relative path (from the web server root) or an absolute URL.
icon_svg: "/plugins/QBeeQCustomDashboardToolbar/icons/Contact.svg",
// Text shown when the user hovers over the icon — provides contextual info about the icon’s function.
tooltip_text: "Contact us",
// URL to open when the icon is clicked.
// The link opens in a new tab due to target="_blank" and rel="noopener" in the anchor.
url: "https://qbeeq.io/contact-us",
// Optional inline CSS styling specifically for the <img> tag rendering this icon.
// Each property (height, width, margin, etc.) is passed directly as an inline style.
style_for_img: {
// Image height in pixels with SVG source
height: "22px",
// Image width in pixels with SVG source
width: "22px",
// CSS margin shorthand: top, right, bottom, left (in pixels)
margin: "0px 0px 0px 0px",
},
},
{
// Path to the SVG icon file to display in the toolbar.
// This can be a relative path (from the web server root) or an absolute URL.
icon_svg: "/plugins/QBeeQCustomDashboardToolbar/icons/Documentation.svg",
// Text shown when the user hovers over the icon — provides contextual info about the icon’s function.
tooltip_text: "Documentation",
// URL to open when the icon is clicked.
// The link opens in a new tab due to target="_blank" and rel="noopener" in the anchor.
url: "https://qbeeq.helpkit.so/sisense/3PMp6GGUQ3mpdYf4Bp7hkj",
// Optional inline CSS styling specifically for the <img> tag rendering this icon.
// Each property (height, width, margin, etc.) is passed directly as an inline style.
style_for_img: {
// Image height in pixels with SVG source
height: "22px",
// Image width in pixels with SVG source
width: "22px",
// CSS margin shorthand: top, right, bottom, left (in pixels)
margin: "0px 0px 0px 0px",
},
},
{
// Path to the SVG icon file to display in the toolbar.
// This can be a relative path (from the web server root) or an absolute URL.
icon_svg: "/plugins/QBeeQCustomDashboardToolbar/icons/Support.svg",
// Text shown when the user hovers over the icon — provides contextual info about the icon’s function.
tooltip_text: "Support",
// URL to open when the icon is clicked.
// The link opens in a new tab due to target="_blank" and rel="noopener" in the anchor.
url: "https://www.sisense.com/support/",
// Optional inline CSS styling specifically for the <img> tag rendering this icon.
// Each property (height, width, margin, etc.) is passed directly as an inline style.
style_for_img: {
// Image height in pixels with SVG source
height: "22px",
// Image width in pixels with SVG source
width: "22px",
// CSS margin shorthand: top, right, bottom, left (in pixels)
margin: "0px 0px 0px 0px",
},
},
],
};dashboardDescription
Enables or disables the Dashboard Description icon in the toolbar. This setting is independent of addIconsToToolbar, and will display regardless of whether addIconsToToolbar is true or false.
Value | Description | Notes |
true | Enables the Dashboard Description feature | ⚠️ When enabled, a "type": "dashboard_description" object must be present in the toolbarIcons array. |
false | Disables the Dashboard Description feature |
dashboardDescriptionInfo
Configures the icon, tooltip text, and styling for the Dashboard Description icon.
Property | Type | Required | Description |
icon_svg | string | No | Accepted values are: empty, inline SVG, #sprite-id, or file path.
An empty "" uses the default icon. |
tooltip_text | string | Yes | Tooltip text shown on hover |
style_for_img | object | No | Inline CSS styles for the <img> tag when using a file path. See style_for_img |
styleDashboardTitle
Enables or disables custom styling for the dashboard title when set to true.
dashboardTitleStyleRules
An object that applies standard CSS properties to the dashboard title when styleDashboardTitle is set to true.
Property | Description | Example |
font-size | Set font size of the title | "16px" |
color | Set font color of the title | "#ec008c" |
font-weight | Set the weight of the font using standard CSS. The weights available depend on the font-family that is currently set. | 800 |
text-transform | Specifies how to capitalize text using standard CSS. | "capitalize" "lowercase" "uppercase" |
hideDataSourceDateTime
Hides the last refresh timestamp of the data source from the toolbar when set to true.
hideDataSourceTitle
Hides the data source title in the toolbar when set to true.
colorToolbarBackground
Applies a custom background color to the dashboard toolbar when set to true.
toolbarBackgroundColor
The hex value for the toolbar’s background color when colorToolbarBackground is true.
addIconsToToolbar
Enables the addition of custom icons to the dashboard toolbar. The icon displays regardless of whether addIconsToToolbar is true or false.
toolbarIcons
An array of objects that defines the custom icons that will be added to the toolbar when addIconsToToolbar is set to true.
The Dashboard Toolbar supports Sisense themes for icon colors. A set of icons is provided in the icons folder, but custom icons can be uploaded to this folder.
Each object includes:
Property | Type | Required | Description |
icon_svg | string | Yes | Inline SVG markup or path to an SVG file |
tooltip_text | string | Yes | Tooltip text shown on hover |
url | string | Yes | URL opened when the icon is clicked. Opens in a new tab. |
style_for_img | object | No | Inline CSS styles for the <img> tag when using a file path |
style_for_img
An optional property that defines CSS styling specifically for the <img> tag rendering this icon. Each property (height, width, margin, etc.) is passed directly as an inline style. This allows you to apply custom visual formatting to file-based SVG icons embedded in the dashboard toolbar.
Do not use this property with inline SVG markup. style_for_img is only applicable when the icon_svg value is a file path (e.g. /icons/help.svg)
Property | Description | Example |
height | Sets the image height in pixels | "20px" |
width | Sets the image width in pixels | "20px" |
margin | Sets spacing around the icon using CSS shorthand (top, right, bottom, left) | "0px 0px 0px 0px" |
Adding custom icons
Admins can add their own icons to the toolbar by uploading them to the plugin's icons folder and referencing them in config.js.
Custom icons only appear when addIconsToToolbar is set to true.
- Go to the Admin tab > App Configurations > File Management.
- Open the plugins > QBeeQCustomDashboardToolbar > icons folder and upload your SVG icon files.
- In the same plugin folder, open
config.js.
- Find the
toolbarIconsarray and add a new object inside the square brackets, after the last existing icon. Separate it from the previous icon with a comma.
- In the new object:
- Set
icon_svgto the path of your uploaded file, for example/plugins/QBeeQCustomDashboardToolbar/icons/MyIcon.svg. - Set
tooltip_textto the text shown on hover, or""for no tooltip. - Set
urlto the page that opens when the icon is clicked. - Optionally, adjust
style_for_imgto change the icon's size or spacing.
- Save the file and allow the plugins to recompile.
- Log in as a Viewer, or ask a Viewer, and open any dashboard to confirm the icon appears in the toolbar (customizations are only visible to Viewers, and Designers see the standard toolbar).
{
// Path to the SVG icon file to display in the toolbar.
// This can be a relative path (from the web server root) or an absolute URL.
"icon_svg": "/plugins/QBeeQCustomDashboardToolbar/icons/Documentation.svg",
// Text shown when the user hovers over the icon — provides contextual info about the icon’s function.
"tooltip_text": "Documentation",
// URL to open when the icon is clicked.
// The link opens in a new tab due to target="_blank" and rel="noopener" in the anchor.
"url": "https://qbeeq.helpkit.so/sisense/3PMp6GGUQ3mpdYf4Bp7hkj",
// Optional inline CSS styling specifically for the <img> tag rendering this icon.
// Each property (height, width, margin, etc.) is passed directly as an inline style.
"style_for_img": {
// Image height in pixels with SVG source
"height": "22px",
// Image width in pixels with SVG source
"width": "22px",
// CSS margin shorthand: top, right, bottom, left (in pixels)
"margin": "0px 0px 0px 0px"
}
},A missing comma between icon objects will break config.js and prevent the toolbar from loading. Check each object is separated by a comma before saving.
Dashboard description
The Dashboard Description feature adds a toolbar icon that opens a popover panel, allowing authorized users to attach a text description to any dashboard. The description is stored in Sisense's native desc field and mirrors the native widget description experience in look and feel.
The Dashboard Description icon is visible to all users regardless of role. Access to edit the description is determined by the user's role.
Role | Access |
Admin | Edit access on any dashboard |
Designer | Edit access on dashboards they own or co-own; read-only on all others |
Viewer | Read-only on all dashboards |
After adding or updating a description, the dashboard must be republished for the changes to be visible to Viewers.
As of Q2026.07.28, dashboard descriptions added in shared mode are saved and shown to Viewers after republishing, including when dashboard co-ownership is enabled.


Considerations
- The Dashboard Toolbar is configured globally for all dashboards in the environment.
- The Dashboard Toolbar does not reference user roles or data security rules, with the exception of the Dashboard Description feature, which uses role-based access to determine edit permissions.
- All users will see all configured icons and the Dashboard Description icon regardless of role.
