Teaser: jQuery animations in SharePoint

On November 17, Mark Miller and I will host our live online workshop dedicated to animations in SharePoint.

The main featured customizations will be scrolling news and the image rotator. To give you a feel for what you’ll be playing with, I have created a live demo:
http://www.pathtosharepoint.com/Pages/Animations.aspx
[This is a mockup, I am still working on the final scripts for the workshop]

The engines behind these customizations are two highly acclaimed jQuery plugins: Scrollable and Cycle. There are also a couple others working behind the scene, like the Easing plugin (which creates the optional bouncing effect in the image rotator).

An important note: the focus of the workshop is the SharePoint UI, not jQuery. We’ll learn how to pull the content from SharePoint lists, and format it to feed the plugins. We’ll also see how to optimize the display of images to reduce bandwidth.

If you like what you see, feel free to use the comments section below, to give me feedback and ask for more details. We are very flexible, and we’ll adapt the workshop content to your needs!

The live online workshop is scheduled on November 17 at 1:00 PM (EST). I hope to see you there!

Visualization – calculated color gradients

If you need dynamically generated visualizations for your SharePoint data, have you considered leveraging the power of the Calculated Column? This Tuesday at 1:00pm EST, Mark Miller and I will give you all the keys to master this simple yet powerful technique. At the end of the two hour entry level workshop, you’ll be able to add color coding, KPIs and other effects – like the one described in this post – to your SharePoint lists.

Green/Yellow/Red is a standard color palette for dashboards. You can just use 3 colors to visualize discrete states, for example the status of a project (on track – drifting - late). But if your purpose is to communicate progress, or a measure on a scale, you need a larger color palette. This is for example the case in my screenshot, where the color reflects the level of completion (in %), in a tasks list.

So, how can I do this in SharePoint? Of course, my plan is to use a calculated column that will determine the color, based on the value in the [% Completed] column.

Method 1: nested IFs

This is the most basic approach:
if [% Completed]>90, select green
else if [% Completed]>80, etc.
I am not going to detail it, as we can do much better.

Method 2: CHOOSE function

The CHOOSE function is more elegant than nested IFs, and is a natural choice when dealing with multiple options. You’ll find all the explanations to achieve a color gradient in this post.

Method 3: pure calculation

So, how can we go even further? Well, colors can be identified by their name, but also by their rgb code, as each color can be generated from a combination of red, green and blue. For example:
red: rgb(255,0,0)
green: rgb(0,255,0)
blue: rgb(0,0,255)
yellow: rgb(255,255,0)
white: rgb(255,255,255)

Using these values, we can “easily” create our red/yellow/green gradient:
rgb(255,0,0) –> rgb(255,255,0) –> rgb(0,255,0)

The following formula, entered in a calculated column, will give you the rgb value for each value of the [% Completed] column:
=”rgb(“&INT(MIN(510-[% Complete]*255*2,255))&”,”&INT(MIN([% Complete]*255*2,255))&”,0)”

To obtain the visual effect as in the screenshot, use the HTML Calculated Column method, with the following formula:

="<span style='display:inline-block;position:relative; width:60px; height:14px;border:1px solid;'><span style='display:inline-block;position:relative;background-color:rgb("&INT(MIN(510-[% Complete]*255*2,255))&","&INT(MIN([% Complete]*255*2,255))&",0); width:"&([% Complete]*100)&"%;height:14px;'><span style='position:absolute; top:0px;'> "&TEXT([% Complete],"0%")&"</span></span></span>"

Note that the method works in both SharePoint 2003 and 2007.

Sneak Peek: HTML Calculated Column v3

One of the great benefits of running online workshops is that it pushes me to refine my solutions.

The cornerstone of Tuesday’s visualization workshop is the HTML calculated column. So for the occasion I revisited my script and worked on several improvements. The main one is to make the filter menu work for HTML calculated columns (see screenshot).

Another enhancement I am working on is to allow the use of HTML calculated columns for grouping (see second screenshot).

The first to benefit from the improvements will of course be the workshop participants, as the filter menu will be included in the script they’ll receive. The complete version (v3) of the HTML Calculated Column with all the enhancements should be published by the end of the year.

Update [11/01/2009] Another screenshot of my work in progress: HTML calculated columns used for two level grouping.

Color coding: nobody’s left behind!

Visualizing Information in SharePoint is the theme of my next online workshop, scheduled on November 3rd. In this entry level session, we’ll see how color coding and other effects can be applied to SharePoint lists, using only out of the box features.

If you are a regular reader of this blog, you may already be familiar with this technique, and know how easy and powerful it is. So, how about spreading the word? If you have a colleague who has been hesitant to make the plunge and try out client side scripts, this workshop is a unique opportunity to get started!

You’ll find several examples featuring this technique in my blog. Also, follow Mark Miller’s series of screencasts showcasing real life examples – starting with this one.

And if you are using SharePoint 2003, this also works in your environment!

Upcoming online workshops

Mark Miller has just released the EUSP workshop calendar for November and December.

I’ll be presenting 4 workshops:
 
Visualizing Information in SharePoint: Tuesday, November 03, 1:00 PM (ET)
 
jQuery Animations in SharePoint: Tuesday, November 17, 1:00 PM (ET)
 
SharePoint Charts and Graphs: Part 02 (Sparklines): Wednesday, December 02, 1:00 PM (ET)
 
SharePoint Charts and Graphs: Gantt Charts: Thursday, December 10, 1:00 PM (ET)

These are hands on trainings. Each participant receives a sandbox and the Web Parts needed for the workshop.

Easy Tabs: any issues to report?

This is a checkpoint. Before I publish more tips on how to customize the Easy Tabs, I’d like to hear from you if you have issues to report.

The most frequently reported issue so far: tabs are visible in edit mode, but not in view mode. I have published the explanation here.

I have also received comments about the tabs not working with Data View Web Parts that include filters, but I am unable to replicate the issue. Everything works fine in my case. If you have an example that doesn’t work, I suggest that you save your Web page (html format) and send it to me. Remember to precise your SharePoint version (wss or MOSS).

Also, note the following restrictions:
- the Easy Tabs work on a site’s home page and on Web Part pages you create (Site actions > Create > Web Part page).
- the Easy Tabs won’t work if you are using a custom Web Part or Master page that doesn’t follow the standard SharePoint structure.
- I am restricting my tests to these browsers: IE7, IE8, Firefox 3, Safari 4 and Chrome 3.

Following the SharePoint Conference 2009

7000+ SharePointers have migrated to Las Vegas for this week’s SharePoint gathering, while many more – me included – are staying at home and are anxious to grab the latest news on SharePoint 2010 from the Internet.

I have set up a page to share news from the conference:
http://www.pathtosharepoint.com/Pages/SPC09.aspx

On the left side, I am displaying the channels that Mark Miller has set up, including in particular live blogging from more than a hundred (!) SharePoint professionals, divided into 7 groups, who are reporting in real time on the sessions they attend.
On the right side of the page are my findings, grabbed from my rss feeds and Internet search (I recommend Jeff Teper’s review of SharePoint 2010 features). I am trying to stay away from developer info, and focus on content accessible to end users.

If you have any interesting links to share, feel free to add them in the comments section below, and I’ll push them to my SPC09 page.

Hope you find this helpful!

A method to customize Web Part zones

Warning: the script below contains a time bomb. Be sure to read the whole article before using it.

A question from the STP forum: how can I change the layout of my Web Part zones, without SharePoint Designer or server side access? For example: on the home page (default.aspx), I only want one column. Or I want two columns with the same width (50%).

In the past, I have already answered specific cases. Today I am proposing a more generic approach.

In a SharePoint page, there is nothing special that identifies Web Part zones. When you look at the page html, zones are just regular table cells. My idea is to include in the Web Part zone a CEWP (Content Editor Web Part) that will act as a tracking device. It will identify its host zone and then apply customizations to it. btw this technique is similar to the one used for the Easy Tabs.

Here is a sample script including two examples:

<script id="RightWPzone" type="text/javascript">

/*************************************
  Customize the Right Web Part zone
  Christophe Humbert
  Christophe@PathToSharePoint.com
*************************************/

function GetParentTable(elem)
{
while(elem !=null && elem.tagName !="TABLE") elem=elem.parentNode;
return elem;
}

var thisWPzone = GetParentTable(GetParentTable(document.getElementById("RightWPzone")).parentNode);

if (thisWPzone.id != "MSOZone") { // Remove this line if the customizations also apply in edit mode

var thisWPzone = thisWPzone.parentNode;

// Example 1: set the Web Part zone width
thisWPzone.style.width = "50%";

// Example 2: hide the Web Part zone
try {thisWPzone.previousSibling.style.display = "none";} catch(err){}
thisWPzone.style.display = "none";

} // Remove this line if the customizations also apply in edit mode

</script>

Simply add a CEWP to your Web Part zone, add the above script, and change it as needed (the main tool for these customizations is the style object). 

When you reuse the script for several zones on your page, make sure that each script has its own id (the id appears twice in the script). In my sample script the id is “RightWPzone”.

A time bomb, you said?

Let’s say we decide to hide a Web Part zone, both in edit and view mode (so that nobody is tempted to drop a Web Part there):

<script id="RightWPzone" type="text/javascript">

/*************************************
  Hide the Right Web Part zone
  Christophe Humbert
  Christophe@PathToSharePoint.com
*************************************/

function GetParentTable(elem)
{
while(elem !=null && elem.tagName !="TABLE") elem=elem.parentNode;
return elem;
}

var thisWPzone = GetParentTable(GetParentTable(document.getElementById("RightWPzone")).parentNode);
var thisWPzone = thisWPzone.parentNode;
thisWPzone.previousSibling.style.display = "none";
thisWPzone.style.display = "none";
</script>

So far so good…but what if I need to make changes? Well, I’m stuck, as I can’t access the zone content anymore, even in edit mode! Fortunately – and this is one reason why I love working with CEWPs – there’s always the option to undo the customization. You can remove the Web Part from the page, with this well known trick:
…/default.aspx?contents=1
If you append the ?contents=1 querystring to the URL, you’ll be sent to the maintenance page, where you can manage your Web Parts.

Another way to deal with this issue is to apply a “best practice”: don’t put the code directly into a CEWP, place it in a separate text file instead, and link the CEWP to it (cf. this article for more details).