Format cells in Table widget

Answered

Comments

9 comments

  • Avatar
    Sam Ovenshine

    Hi Lloyd,

    You are correct - pivot table scripts generally won't work for table widgets, since they have a different simpler structure. This won't suit your specific case, but it may help - here is a sample of a script to modify the css of a table widget:

    dashboard.on('domready', function(sender, ev){ 
    $('td').css({'background-color':'red',

    'font-family':'Times New Roman,Georgia,Serif',

    'font-size':'30px',

    'font-style':'italic'})
    })

    0
    Comment actions Permalink
  • Avatar
    Adi Hecht

    Lloyd,

    I need this too, if you found a solution.

    I did manage to write a partial solution.

    The following code, in the widget script, works for table widgets and will allow you to change the color for cells containing a specific value. In the example code below, I am changing the text color (not background color) for all cells containing the text "keyword".

    However: If infinite scrolling is enabled, then the colors will disappear when you scroll down. which is a bummer. I hope someone finds a better solution.

    widget.on('ready', function(sender, ev){ 
    setTimeout(function(){
    $("td:contains('keyword')",element).css({'color':'red'})
    },500)
    })
    0
    Comment actions Permalink
  • Avatar
    Lloyd Butler

    Hi Adi,

    Unfortunately, I haven't made any progress on this. It got pushed off. I did just try your code. I have two Table widgets, both of which have Infinite Scrolling.

    Your solution worked great on the first one, even when I scrolled down to the bottom.

    However, in the 2nd one gave me the same disappearing behavior that you mentioned. I was able to scroll to the 30th row (out of 65 total rows) before all of the colors disappeared.

    The first table only has 27 rows. So, for some reason, it seems to be tied to the number of rows.

    If I change the 2nd widget to only show 25 rows at a time, and then move to the 2nd or 3rd page of rows, then the colors will disappear too.

     

    Here's the code for both of my widgets:

    widget.on('ready', function(se, ev){
      setTimeout(function(){ $("td:contains('On Track')",    element).css({'background-color':'#7dcb97'})  },500)
      setTimeout(function(){ $("td:contains('Completed')",element).css({'background-color':'#7dcb97'})  },500)
      setTimeout(function(){ $("td:contains('At Risk')",        element).css({'background-color':'#f5fc97'})  },500)
      setTimeout(function(){ $("td:contains('On Hold')",     element).css({'background-color':'#f5fc97'})  },500)
      setTimeout(function(){ $("td:contains('Off Track')",    element).css({'background-color':'#ffa6a6'})  },500)
    });

     

    If I have time to really play around with this, I'll be sure to post my answer here.

    0
    Comment actions Permalink
  • Avatar
    Adi Hecht

    Glad to hear this somewhat helped.

    Would appreciate if anyone has a solution for this and can share.

    I suspect that the problem is that the script is applying the CSS changes correctly, for all cells that are currently loaded or appear on the page.

    But when you scroll down, or when you move to the next page, then the script in not triggered again.

    I could not find any event that would trigger it again though.

    0
    Comment actions Permalink
  • Avatar
    Adi Hecht

    BTW, Lloyd, your script is adding redundant timeout functions (you are waiting 500 ms between each change, which is unnecessary).

    The purpose of the 500 ms wait is to wait for the widget to finish loading. you do not need to wait it again after each change.

    A simpler more efficient version for your code should be ( I did not test):

    widget.on('ready', function(se, ev){
    setTimeout(function(){
    $("td:contains('At Risk')",element).css({'background-color':'#f5fc97'});
    $("td:contains('Completed')",element).css({'background-color':'#7dcb97'});
    $("td:contains('At Risk')",element).css({'background-color':'#f5fc97'});
    $("td:contains('On Hold')",element).css({'background-color':'#f5fc97'});
    $("td:contains('Off Track')",element).css({'background-color':'#ffa6a6'});
    },500)
    })
    1
    Comment actions Permalink
  • Avatar
    Adi Hecht

    Great news update!

    I've managed to resolve the issue where the colors disappear when you scroll down the table widget.

    Here's the new code for the table widget script. In the example code below, I am changing the text color for all cells containing the text "keyword", to the color red.

    You can easily change the code to add other CSS modifications and change the background color, font, etc.

    //JS by Adi Hecht. This script to be used in table widgets. The script will change the text color for all cells containing a certain keyword.
    widget.on('domready', function(sender, ev){
    $("td:contains('keyword')",element).css({'color':'red'})

    // an event fired on each table re-draw:
    $(element).on('draw.dt', function() {
    $("td:contains('keyword')",element).css({'color':'red'})
    });

    })

    Credit to Oleg Fil, whose post on a different matter here provided the resolution:

    • Use the 'domready' event instead of the 'ready' event to eliminate the need for the timeout function.
    • Use the 'draw.dt' event to apply the the function on each table redraw.

    https://support.sisense.com/hc/en-us/community/posts/221226868-Clickable-URL-links-in-a-pivot-s-column?flash_digest=fe73fd3b90a7760c55a18578cf4bf2328595ba61

    5
    Comment actions Permalink
  • Avatar
    Shawn Springstead

    Thanks Adi, pretty awful that you have to bind your own event to get the paging to work with this, saved me alot of time.

    0
    Comment actions Permalink
  • Avatar
    Gaurav Gupta

    Try below script for table/table with aggregation widgets:

     

     

    widget.on('ready', function (sender, args)
    {
    var myColArray = [1, 2, 3, 10, 11, 13];
    var arrayLength = myColArray.length;
    $('th', element).css(
    {
    'background-color': '#16365c',
    'color': 'white',
    'font-family': 'calibri',
    'font-size': '12px',
    'font-weight': 'bold',
    'padding-left': '3px',
    'padding-right': '3px',
    'text-align': 'left',
    'vertical-align': 'middle'
    }
    );
    $(element).on('draw.dt', function ()
    {
    $('th', element).css(
    {
    'background-color': '#16365c',
    'color': 'white',
    'font-family': 'calibri',
    'font-size': '12px',
    'font-weight': 'bold',
    'padding-left': '3px',
    'padding-right': '3px',
    'text-align': 'left',
    'vertical-align': 'middle'
    }
    );
    $('td', element).css(
    {
    'font-family': 'calibri',
    'color': '#16365c',
    'font-size': '12px',
    'font-weight': 'normal',
    'padding-left': '3px',
    'padding-right': '3px',
    'vertical-align': 'top'
    }
    );
    _.each($('td', element), function (td)
    {
    var $td = $(td);
    if ($td.index() == 10)
    {
    $td.css('border-right', '1px solid #16365c');
    };
    if ($td.index() == 12 && $td.html() == '')
    {};
    for (var i = 0; i < arrayLength; i++)
    {
    if (myColArray.includes($td.index()))
    {
    $td.css('text-align', 'center');
    };
    };
    }
    );
    }
    );
    }
    );

    0
    Comment actions Permalink
  • Avatar
    Tracy Hinkley

    I am working on a widget that displays when a record is becoming close to expiring OR close to running out of units.  Rather than putting on filters, I would like to highlight the rows where the end_date field <= Today() - 14 OR the balance field < 10

    Does anyone have scripting to assist with this?
    Thanks,
    Tracy

    0
    Comment actions Permalink

Please sign in to leave a comment.