HOW TO: CREATE a Practical Dashboard using a SharePoint List & jQuery…

2013 06 23 MV to All: OK, so I realized I’d never actually posted a handy little jQuery approach to transforming your SharePoint lists into actual – genuinely useful – dashboards.

So WHAT really makes a dashboard useful? In a word – color-coding. Period. Full Stop. Graphics don’t really add a thing to the equation – they’re just complexity for the sake of complexity. Color a few key cells Green, Yellow (even Orange) and Red, and in a single customization you draw The User’s attention to the Red Ink.

Mission… ACCOMPLISHED.

Here’s a way to add some very simple, “inheritable” (remember how I DEMAND my solutions be INHERITABLE by clients?) jQuery to a SharePoint list on a page via the CEwp (Content Editor web part).

Here’s the final product – a perfectly useable dashboard:
SCREENSHOT - SharePoint List as Dashboard via jQuery

Here’s the page in Edit Mode, showing a CE wp at the bottom of the page, pointing (NO embedded jQuery/HTML in the CEwp – it doesn’t always work in Office 365) to a txt file in a nearby SharePoint library filled with jQuery:

SCREENSHOT - SharePoint List as Dashboard via jQuery - edit

Here’s the actual jQuery library. NOTE – I could have also simply referenced any of the popular CDN-based repositories for a copy of the jQuery library, and in most cases that’s what I DO – for several reasons.
But for now let’s keep things “in” SharePointland:
SCREENSHOT - SharePoint List as Dashboard via jQuery - library

SOURCE CODE FROM CELLBGCOLORIZERJQUERY.txt :

<!-- HERE are some additional CSS styles which jQuery will append/apply to certain cells it finds... -->
<style type="text/css" media="screen">
   .cellRed {  background-color: Red; }
   .cellYellow {  background-color: Yellow; }
   .cellGreen {  background-color: Lime; }
</style>
<!-- HERE is the reference to an on-premises copy of latest v1 (most compatible) jQuery library, but COULD reference any CDN-based copy as well... -->
<script type="text/javascript" src="https://netrixonline.sharepoint.com/Projects/Intranet%20Project/jQuery%20Library/jquery-1.10.1.min.js"></script>

<!-- HERE is the actual jQuery which sifts through all the HTML, locates table cells with CSS class ".ms-cellstyle ms-vb2" (note HTML uses a space as delimiter between multiple styles, but jQuery uses NO space), and appends on an additional style to color the background... -->
<script type="text/javascript">
$(document).ready(function() {
    $('.ms-cellstyle.ms-vb2').each(function() {
       // get table cell text into variable...
       var colText = $(this).text();
       // check value of cell text and add corresponding CSS class to table cell...
       if (colText == 'Green') {
          // color bg green...
          $(this).addClass("cellGreen");
       }
       else if (colText == 'Yellow') {
          // color bg yellow...
          $(this).addClass("cellYellow");
       }       else if (colText == 'Red') {
          // color bg red...
          $(this).addClass("cellRed");
       }
       //alert($(this).text());
    });
 });
</script>

Kudos:
– friend & colleague Kiran Kakanur for helping me discover the oddity about CSS delimiters in jQuery :-)

Peace,

-MV

Leave a Reply

Your email address will not be published. Required fields are marked *