cancel
Showing results for 
Search instead for 
Did you mean: 

Change Widget Description

danblack
9 - Travel Pro
9 - Travel Pro

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

1 ACCEPTED SOLUTION

JeremyFriedel
Sisense Team Member
Sisense Team Member

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.

View solution in original post

9 REPLIES 9

danblack
9 - Travel Pro
9 - Travel Pro

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
Community Team Member
Community Team Member

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

 

David Raynor (DRay)

danblack
9 - Travel Pro
9 - Travel Pro

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
Community Team Member
Community Team Member

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

David Raynor (DRay)

danblack
9 - Travel Pro
9 - Travel Pro

@DRay 

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

danblack
9 - Travel Pro
9 - Travel Pro

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
Community Team Member
Community Team Member

Hi @danblack,

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

David Raynor (DRay)

JeremyFriedel
Sisense Team Member
Sisense Team Member

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
9 - Travel Pro
9 - Travel Pro

Thank you @JeremyFriedel!

And also for your help, @DRay!