Adding Dashboard Descriptions with a Modal Info Icon

Summary: Mia Isaacson praised a solution for improving dashboard functionality by adding descriptions that enhance UX and context discoverability. They introduced a Dashboard Toolbar plugin for Sisense, allowing users to view or edit descriptions easily. Ido Darnell appreciated the shared solutions, highlighting their support and maintenance of plugins, even those offered for free. The discussion focused on enhancing dashboard experiences with innovative tools.

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 6 months ago·Last reply 1 month ago

3 comments

Ido Darnell

·1 month ago

Love it @Garrett Wolfe !! thanks for sharing!

Mia Isaacson

·1 month 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

·1 month 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!