Forum Discussion

danblack's avatar
danblack
Cloud Apps
04-30-2024
Solved

Change Widget Description

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

dashboards & reporting

9 Replies

  • JeremyFriedel's avatar
    JeremyFriedel
    Sisense Employee
    05-15-2024

    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's avatar
    danblack
    Cloud Apps
    05-01-2024

    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's avatar
    DRay
    Sisense Employee
    05-01-2024

    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's avatar
      danblack
      Cloud Apps
      05-09-2024

      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's avatar
        DRay
        Sisense Employee
        05-09-2024

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

  • danblack's avatar
    danblack
    Cloud Apps
    05-13-2024

    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's avatar
    DRay
    Sisense Employee
    05-13-2024

    Hi danblack,

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