Conditional Formatting of Grand Totals

Comments

5 comments

  • Official comment
    Avatar
    Yuri Nazarov (Edited )

    Folks, sorry for the delay, here is the script and the explanation.

    Please put this code into the widget script of the pivot:

    widget.on("domready"function(w, args) {  
      
        // column 2 formatting, using the underlying value of a <td>, instead of the surface text of the <div>  
        // <td> has the value attribute with a full numeric, unformatted value of the number, i.e. 2823.05091742397  
        //  here, I take that value, then set the formatting of the <td> based on whether the value is greater or less that zero  
      
        $('td.p-total-row-val[fidx=1]',element)   
      
            .each((index, item) => { // loop. For each of these <td> cells  
                var myItemNum = parseFloat($(item).attr("val")); // grab the "val" attribute of the cell, convert to number  
                if (myItemNum > 0) {  
                    $(item).css({  
                        "backgroundColor""green",  
                        "color""#fff5f5",  
                        'font-weight''bold'  
                    });  
                }                                     
                else if (myItemNum < 0) {  
                    $(item).css({  
                        "backgroundColor""red",  
                        "color""#fff5f5",  
                        'font-weight''bold'  
                    });  
                }                                     
                else {  
                    $(item).parent().css("backgroundColor""")  
                }   
            });  
      
    });  

    EXPLANATION:

      $('td.p-total-row-val[fidx=1]',element)   

    This is a jQuery, that returns all <td> elements (i.e. table cells) with the class name p-total-row-val (grand totals), in the 2nd column of the pivot (attribute fidx = 1).

    , element - only look into the current widget (without it, this script would apply to all pivots in the dashboard).

     .each((index, item) => { } 

    That is a loop. It iterates through each of the grand totals (there really should only be one).

     var myItemNum = parseFloat($(item).attr("val")); // grab the "val" attribute of the cell, convert to number  

    Take the <td> cell of the grand total, extract its val attribute (which contains the cell's underlying number, in a string format). Convert it to a number using parseFloat and assign it to var myItemNum.

    Now, look at myItemNum, and, based on whether or not it is above or below zero, apply one or another css.

    Hope this helps!

     

     

    Comment actions Permalink
  • Avatar
    Brian Wilson

    Yuri, that's a very clear explanation, thank you!

    1
    Comment actions Permalink
  • Avatar
    Alfonso Moran

    Were you able to do this? I am looking for a way, or if it's even possible.

    Thanks...

    0
    Comment actions Permalink
  • Avatar
    Habiba S

    No luck so far unfortunately.

    0
    Comment actions Permalink
  • Avatar
    Yuri Nazarov

    Brian, glad it was helpful!

    0
    Comment actions Permalink

Please sign in to leave a comment.