Dashboard Toolbar – QBeeQ

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 and configuration

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

Dashboard Toolbar uses a config.js file for installation and 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.js file

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

"use strict";

// Configuration settings for customizing the Sisense dashboard toolbar behavior and appearance
var settings = {
  styleDashboardTitle: true,
  dashboardTitleStyleRules: {
    "font-size": "16px",
    "color": "#ec008c",
    // 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: true,
  // Hide the data source title in the toolbar if true
  hideDataSourceTitle: false,
  // If true, apply a custom background color to the dashboard toolbar
  colorToolbarBackground: true,
  // Custom background color value for the toolbar
  toolbarBackgroundColor: "#fddde2",
  // 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: [
    {
      // SVG markup for the custom icon
      icon_svg:
        '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6C6 4.89543 6.89543 4 8 4H16C17.1046 4 18 4.89543 18 6V21L12 15L6 21V6Z"></path></svg>',
      // Tooltip text that appears when hovering over the icon
      tooltip_text: "Choropleth",
      // URL to open when the icon is clicked
      url: "https://qbeeq.io",
    },
    {
      // 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-us.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",
      // Optional inline CSS styling specifically for the <img> tag rendering this icon. NOTE: USE ONLY WITH FILE REFERENCE
      // Each property (height, width, margin, etc.) is passed directly as an inline style.
      style_for_img: {
        // Image height in pixels with SVG source
        height: "20px",
        // Image width in pixels with SVG source
        width: "20px",
        // CSS margin shorthand: top, right, bottom, left (in pixels)
        margin: "0px 0px 0px 0px",
      },
    },
  ],
};

// Get-Service | where {($_.name -like "*sisense*")} | Stop-Service -Force
//Get-Service | where {($_.name -like "*Sisense*")} | Start-Service

`styleDashboardTitle`

Enables custom styling for the dashboard title

`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`	Sets 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 false

`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 when set to true

`toolbarIcons`

An array of objects that defined the custom icons that will be added to the toolbar when addIconsToToolbar is set to true. 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	(Optional) 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.

⚠️

style_for_img is only applicable when the icon_svg value is a file path (i.e. /icons/help.svg)

Do not use this property with inline SVG markup.

Property	Required	Description
`height`	Sets the image height in pixels	`"20px"`
`width`	Sets the image width in pixels	`"20px"`
`margin`	Controls spacing around the icon using CSS shorthand (top, right, bottom, left)	`"0px 0px 0px 0px"`

Using the Dashboard Toolbar

ℹ️

The customizations on the toolbar are only visible to Viewers. Designers will continue to see the standard toolbar, without customizations.

Examples

Inline SVG Icon

{
  icon_svg: '<svg>...</svg>',
  tooltip_text: "Choropleth",
  url: "https://qbeeq.io"
}

File-Based SVG Icon with Style

{
  icon_svg: "/plugins/QBeeQCustomDashboardToolbar/icons/contact-us.svg",
  tooltip_text: "contact-us",
  url: "https://qbeeq.io",
  style_for_img: {
    height: "20px",
    width: "20px",
    margin: "0px 0px 0px 0px"
  }
}