Underline part of the title text on the widget header

Comments

4 comments

  • Avatar
    Moti Granovsky

    Hi James, could you specify which sample this is from or provide a link to it?

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    In any case, you can create an add-on that adds a custom CSS to Sisense,

    and some simple CSS can add the effect you're looking for. The example below targets a specific widget by ID, but could be applied to all widgets. note that if used without IDs it would apply to all dashboards and that needs to be considered as well.

    The same logic could be done via Javascript by adding a class to selected elements, for example.

    This is just a quick example I came up with, you may need to develop it further to get it to work in all scenarios. I hope this helps!

    widget[widgetid="5f195f4cbf342a002d120e4e"] widget-header {
    position: relative;
    }

    widget[widgetid="5f195f4cbf342a002d120e4e"] widget-header::after {
    content: "";
    background:red;
    width: 130px;
    position: absolute;
    bottom: 0px;
    height: 2px;
    }


    0
    Comment actions Permalink
  • Avatar
    James Haig

    Hi Moti, 

    Thanks for responding. The image is just from your website it seems to be used quite a lot but is not used in any of your example dashboards :( I would like to apply this on a widget by widget basis applying it to the individual widget script if that is possible?

    This is my current scripts which lets me have a rounded box on the widget and a bigger header. How would I add it to this script? I have tried and failed :)

    widget.on('ready', ()=> {

    $(element).parent().css('border-radius', '5px');
    $(element).parent().parent().css('border-radius', '5px');

    $('widget-header' ,element.parent()).css('height','50px'); //change title height

    })

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    There are 2 ways you could do this. I recommend the former:

    Approach #1 - Using an add-on (plugin)

    You could build a plugin that contains a CSS with the rules you need, that exposes a function that appends this class to the desired widgets, something like:

    // A function that adds a CSS class to a widget container
    function addUnderline(widget) {
    $('widget[widgetId="' + widget.oid + '"]').addClass('myCustomClass')
    }
    // Initializing a global namespace for plugins
    prism.plugins = prism.plugins || {}l
    // Exposing the above function globally
    prism.plugins.addUnderline = addUnderline;

    Then you could turn this on for individual widgets with only one line of code in the widget's script:

    prism.plugins.addUnderline(widget);

    The benefit of this approach is that your code isn't repeated and can easily be modified and styled differently for all applicable widgets.

    Approach #2 - Via widget script with jQuery

    If you still want to have this entire logic implemented in each widget, you could grab the "widget" DOM element and then apply all of the above CSS styling using jQuery like so:

    // get existing elements we need
    var widgetElement = $('widget[widgetId="' + widget.oid + '"]');
    var widgetHeaderElement = widgetElement.children('widget-header');

    // create a new element for the underline (to replace the ::after CSS effect)
    var widgetHeaderUnderline = $('<div></div>');

    // set the styles needed:
    widgetHeaderElement.css('position', 'relative');
    widgetHeaderUnderline.css('background', 'red'); // repeat this for all the styles needed!

    // add the underline DIV element to the correct place:
    widgetHeaderElement.append(widgetHJeaderUnderline);

    You can find more documentation on creating add-ons here: https://sisense.dev/guides/js/plugins/

    Hope this helps!

    0
    Comment actions Permalink

Please sign in to leave a comment.