Google Unsafe - Oops

I'm working late as I usually do and needed to go get some Google Analytics codes for a couple of my sites and came across this page:



Now, I'm not a security specialist, but I think that is a problem for Google. I'm sure someone is going to get to clean the toilets for this mistake. :)

Cheers.

Poor Man's KPI in SharePoint 2010 with jQuery

Say you have a situation where you need do have some kind of KPI for a list view web part, but you can't use SharePoint Designer (SPD) or you just don't have time to make a custom template in XSL. Time to think outside of the Microsoft box. Having web design skills at the core of what I'm good at in development, I look at the SharePoint Web Part after it's rendered to the page, which is where jQuery takes over.

Enter jQuery

It actually isn't too bad to do. Below is a code snippet example that calls the jQuery library from Google's CDN on the fly, and then has three commands. Each command is looking in the SharePoint CSS class of "ms-vb2" to see if it contains a color. The color could be any term or phrase that you would be looking for (e.g. "House", "On Target", etc.) When the term is found within that class, it will remove the text in the TD, and replace it with a color box.

How to put into the page:

The easiest and most portable way to put this kind of code on a page (assuming you have no elevated privelages to place code on a server or in a page layout / master page), is within a Content Editor Web Part -- a SharePoint Admin's worst nightmare (with developers like me on the other side).

Steps:
1) Add Content Editor Web Part (CEWP) to the page
2) Go to the HTML Viewer for the CEWP
3) Paste the code below
4) Modify the Web Part properties of the CEWP and put the Chrome to "None" (to hide the title bar as it's not necessary).
5) Add other web parts that have the terms in which you are looking

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function() {
        jQuery('.ms-vb2:contains("Green")').html("<div style='margin: 2px; background-color: green; border: 1px solid #999; width:50px; height: 15px;'></div>");
        jQuery('.ms-vb2:contains("Yellow")').html("<div style='margin: 2px; background-color: yellow; border: 1px solid #999; width:50px; height: 15px;'></div>");
        jQuery('.ms-vb2:contains("Red")').html("<div style='margin: 2px; background-color: red; border: 1px solid #999; width:50px; height: 15px;'></div>");
    });
</script>

The Summary

This should get you going on using jQuery to "enhance" your pages in SharePoint 2010 as it doesn't require any programming tool like Visual Studio, etc., plus will work just fine in Office 365. Also, I'm calling jQuery like "jQuery." instead of just using the dollar sign "$" because I noticed that SharePoint 2010 is doing some additional things with the "$" for jQuery and will break our jQuery code when the dollar sign is used.

Cheers!

New Sand

After a sabbatical from blogging for almost 10 months, I decided to get back into the swing of things and start doing brain-dumps of all the juicy information I have locked in my head. Most things of what I'll be talking about will be around UI/X technologies in the Microsoft world of things like SharePoint 2010 and .NET web apps in general.

So, welcome back to myself, and thanks for visiting.