Adding Dashboard Descriptions with a Modal Info Icon

Summary: Garrett Wolfe introduced a solution for improving dashboard descriptions, focusing on discoverability and user experience. Mia Isaacson, representing QBeeQ, shared an enhancement for their Dashboard Toolbar plugin, which allows descriptions to be managed globally and matches Sisense UI patterns. Ido Darnell appreciated both solutions, highlighting the support and maintenance provided by their plugin. Garrett Wolfe mentioned advantages of their approach, such as persistence across environments and searchability, and inquired about integrating these features with the plugin.

Every widget in Sisense supports descriptions, but what about dashboards themselves? Sometimes you need to explain a dashboard's purpose or guide users on how to interact with it effectively.

We solved this by adding an info icon to the top toolbar that triggers a modal with the dashboard description. Add this script at the dashboard level and update the CONFIG object at the top with your custom text.

We also included a feedback email in the configuration, making it easy for users to reach out with questions or suggestions. If you'd prefer, you could split this into a separate feedback button instead of including it in the description modal.

Another nice touch: you can swap the ℹ️ emoji for a different icon to match the style of Sisense's built-in widget info icons.

Let me know if this is helpful or if it this feature already exists and I have missed it.

// Configuration - update these values for your dashboard
const CONFIG = {
    feedbackEmail: 'feedback@feedback.com',
    description: 'You can put your additional context here.'
};

$(document).ready(function() {
    setTimeout(function() {
        // Clean up any existing instances
        $('#dashboard-info-icon, #dashboard-info-modal').remove();
        
        // Create info button
        const infoButton = $('<button id="dashboard-info-icon" title="Dashboard info">ℹ️</button>').css({
            cursor: 'pointer',
            background: 'none',
            border: 'none',
            fontSize: '20px',
            padding: '5px 10px',
            color: '#666'
        });
        
        // Add button to toolbar (after Widget button if found, otherwise append to toolbar)
        const widgetButton = $('button:contains("Widget")').filter(':visible').first();
        if (widgetButton.length) {
            widgetButton.after(infoButton);
        } else {
            $('.dashboard-toolbar').append(infoButton);
        }
        
        // Create modal
        const modal = $(`
            <div id="dashboard-info-modal" style="display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
                <div style="background:white; margin:15% auto; padding:30px; border-radius:8px; width:500px; max-width:90%; box-shadow:0 4px 6px rgba(0,0,0,0.1);">
                    <h2 style="margin-top:0; color:#333;">Dashboard Description</h2>
                    <p style="line-height:1.6; color:#555;">${CONFIG.description}</p>
                    <p style="line-height:1.6; color:#555; margin-top:20px;">
                        <strong>Feedback:</strong> 
                        <a href="mailto:${CONFIG.feedbackEmail}" style="color:#0078d4; text-decoration:none;">${CONFIG.feedbackEmail}</a>
                    </p>
                    <div style="text-align:right; margin-top:20px;">
                        <button id="close-modal" style="background:#0078d4; color:white; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:500;">OK</button>
                    </div>
                </div>
            </div>
        `);
        $('body').append(modal);
        
        // Event handlers
        infoButton.click(function() {
            modal.fadeIn(200);
        });
        
        $('#close-modal').click(function() {
            modal.fadeOut(200);
        });
        
        // Close when clicking outside modal
        modal.click(function(e) {
            if (e.target.id === 'dashboard-info-modal') {
                modal.fadeOut(200);
            }
        });
        
        // Close with ESC key
        $(document).keydown(function(e) {
            if (e.key === 'Escape' && modal.is(':visible')) {
                modal.fadeOut(200);
            }
        });
        
    }, 1000);
});

Garrett Wolfe

Posted 8 months ago·Last reply 1 month ago

5 comments

Ido Darnell

·3 months ago

Love it @Garrett Wolfe !! thanks for sharing!

Mia Isaacson

·4 months ago · Edited

Hey

This is a really thoughtful solution. It addresses multiple gaps at once: discoverability of dashboard context, better UX for Viewers, and a practical workaround for limitations in native dashboard descriptions. Nice work. 👏

That being said, you inspired us to incorporate dashboard descriptions into our free Dashboard Toolbar plugin that’s designed specifically to extend and customize the Sisense dashboard toolbar. This plugin is configured globally instead of per dashboard. And managed through a configuration file vs. a script.

Here's what we introduced with Dashboard Descriptions 🎉

A new toolbar icon opens a description panel on any dashboard, visible to all users regardless of role
Owners and co-owners can add, edit, or delete descriptions inline; Viewers see a clean read-only view
Descriptions are stored natively in Sisense's desc field, so context travels with the dashboard — even across exports
The panel matches native Sisense UI patterns, so it feels like it was always there

The Dashboard Toolbar is available for free as part of our Starter PowerUp. It is built, maintained, and supported by QBeeQ. Check out the Starter PowerUp and let us know if you have any questions!

Mia from QBeeQ, a Sisense Gold Implementation Partner
www.qbeeq.io

Ido Darnell

·3 months ago

Thanks @Garrett Wolfe and @Mia Isaacson for sharing your solutions!

Both are great options for adding more information to a dashboard, the main benefit with working with our solution is that we fully support and maintain all our plugins even if they're from the completely free Starter PowerUp!

@Garrett Wolfe Loving all your great content lately, keep it up!

Garrett Wolfe

OP1 month ago

@Mia Isaacson This is awesome! There are 2 advantages I found of having this set at the dashboard level.

The description persists from deployment when publishing from our dev to prod environment
The description becomes searchable metadata on the dashboard (which we can query with our internal MCP server)

Any idea how to work through these with your plugin?

Mia Isaacson

·1 month ago

@Garrett Wolfe Glad you like it!

The plugin doesn't maintain its own storage — it reads/writes the native desc field on the Sisense dashboard object itself using the /api/v1/dashboards/ endpoints:

Regular dashboards: PATCH /api/v1/dashboards/{dashboardId}
Co-authored/shared dashboards: PUT /api/dashboards/{dashboardId}?sharedMode=true

So the description lives as a first-class property of the dashboard, just like the dashboard's title. The plugin just exposes UI to view and edit that existing field.

The description persists from deployment when publishing from our dev to prod environment

Since desc is a part of the dashboard's JSON, it is included when exporting/importing a .dash file, as well as any of the duplication operations. So if you are generating .dash files as part of your deployment, this should work just fine. You'll just need to have the Dashboard Toolbar installed on both environments.

The description becomes searchable metadata on the dashboard (which we can query with our internal MCP server)

I want to assume that if it's part of the dashboard JSON, then it's considered metadata that is searchable. Can you explain a bit more about how you do this today?