Change Widget Description

[danblack]

Apologies if I've missed it, but has anyone written js for changing the Description section of a widget?  It's the same section of a widget where the edit pencil appears.  I would like to change the font color, size, ...

[danblack]

FWIW, I was able to manipulate the following code.  The only issue is that it changes the description for all widgets + dashboard when placed in a widget's editor.  It does nothing when placed in the dashboard's editor.

widget.on('ready', function(w, e) {
    var color = '#209DBB'; 
    var fontSize = '20px';
    var fontWeight = 'bold';
    // var backgroundColor = '#0C3D5E'; // Example background color

    var $description = $('.sis-scope .transput-caption');

    var newCSS = { 
        'color': color, 
        'font-size': fontSize, 
        'font-weight': fontWeight,
        'background-color': backgroundColor // Add background color
    };
    
    $description.css(newCSS);
});

[DRay]

Hi @danblack,

Good to see you again! You may need to target the specific widget by using the Widget ID. For example, if you wanted to change the background color you could use the following:

var widgetId = 'widget[widgetid*=' + sender.oid + ']';
$(widgetId + ' .p-value').css('background-color','rgb(0,114,206)');

[danblack]

Hey, @DRay!  Good to see you again as well!

Wondering if you might know why this would be... I'm actually happy with the code, but when a user (viewer) looks at the dashboard, the Description title changes don't seem to be working.  Yet, it looks fine on my end.

[DRay]

That is odd. I wonder if the Widget ID is different.

[danblack]

@DRay 

I'm not specifying a widget ID.  The code is actually as shown above; I hadn't made any changes.

[danblack]

Hey @DRay how would I incorporate the widget id-specific code within my code?  And should it be placed at the dashboard level or widget level?  I'd like it to work for all widgets, but it does nothing when I use it (as it is) at the dashboard level.

[DRay]

Hi @danblack,

I am going to reach out to your account team. We will find a technical resource to work with you directly.

[JeremyFriedel · Accepted solution]

Hi @danblack 

Based on the existing script shared at the start of the thread, the below code will only run on the current widget, as it includes the Widget unique OID to the CSS selector, narrowing the scope to the current widget.

widget.on('ready', function (_, env) {
    var color = '#209DBB';
    var fontSize = '20px';
    var fontWeight = 'bold';

    var widgetID = env.widget.oid;

    var widgetHeader = $('widget-header', `[widgetid='${widgetID}`)

    var newCSS = {
        'color': color,
        'font-size': fontSize,
        'font-weight': fontWeight,
    };

    widgetHeader.css(newCSS);
});

The code can be changed as needed, as long as the Widget OID is kept in the CSS selector (in this case used with jQuery), the styling will only be for the current widget.

[danblack]

Thank you @JeremyFriedel!

And also for your help, @DRay!