Change Widget Description

Question

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, ...

Jeremy Friedel · Accepted Answer

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 · Answer

Thank you JeremyFriedel ! And also for your help, DRay !

DRay · Answer

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

danblack · Answer

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 · Answer

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 · Answer

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);
});