A great workshop!

Last Thursday, Mark Miller and I presented our last workshop of the year, dedicated to the SharePoint Gantt view.

As for previous workshops, I had prepared some customizations (7 to be precise), each packaged as a Web Part. As I was detailing them, I received some great feedback from Mark and the participants, on the usability of each solution. One advantage of these client side scripts is that the code is accessible and can be easily tweaked, so we were able to make changes in real time, that the participants tested immediately in their own sandbox.

After the workshop, I finalized the scripts and added a couple notes. I also added two more Web Parts, also based on the comments I had received. And one participant, Jeremy, shared another variation he had worked on after the workshop. What a teamwork!

Mark and I share the same view of what training should be. When we say live workshops, we mean it:
- live: the participants have their word to say, and their reactions drive the pace of the session.
- workshop: what is important is not what we show, but what the participant is able to accomplish.

Mark and I will team up again in January for a new series, and I am really looking forward to it!

If possible, I’d like to take the experience even further, and tune up the workshops content based on your feedback. We have already heard from several people that it would be good to have an introduction to jQuery for non-programmers, and we are working on this.

Explore your SharePoint network on Twitter with Mentionmap

Well, I think the easiest way to understand this is to see it in action!

1/Go to this page:
http://apps.asterisq.com/mentionmap/#hashtag-sharepoint

2/ Watch the graph build itself and start interacting with it
and/or
3/ Enter your Twitter id in the green text box, on the top left

How it works (source Asterisq): Mentionmap loads each user’s Twitter status updates (tweets) and finds the people and hashtags they talked about the most.[...] In this data visualization, mentions become connections.

Now, here is the reason why Mentionmap immediately caught my attention: the idea is not new to me, this network graph is something I already thought about in the past. I never blogged about it, but back in January I was in contact with Daniel McLaren, the author of the application, and built a proof of concept, based not on Twitter but on Technorati:
http://www.pathtosharepoint.com/Pages/constellation_roamer.html
Click for example on endusersharepoint.com to see which blogs linked to it (remember, the data is from January).

I dropped the idea because it didn’t work out so well with Technorati – the data was too scarce to be meaningful.

So, let me know if Mentionmap works for you! Does the graph help you discover useful connections?

And for Lord of the Rings fans: check out this experiment on timeline visualization, also by Daniel McLaren.

Path to SharePoint: what’s changing in 2010

Ever since I started this blog, and started sharing my SharePoint end user tips, I have realized that there is a strong demand for flexible, client side solutions.
I expect this to be more and more the case. From a business user’s perspective, being given the ability to fine tune processes, workflows and user interaction, without going through heavy development cycles, is definitely a big plus. Client side scripting in general is gaining momentum (for example with jQuery, HTML5/Canvas, increasingly powerful browsers, and the continuous growth of Web Services). For SharePoint in particular, new SP 2010 features like the JavaScript object model (JSOM) and reusable SharePoint Designer customizations will boost such applications.

Keeping up with the pace of growth means than I need to become more rigourous and professional. Businesses that rely on my solutions expect more than sample scripts. They expect tools that have been thoroughly tested, and that come with documentation and support. They need clear and easy implementation steps. And they need scalable solutions with regular upgrades.

What it means for me is that I am going to expand and split my online activities. Besides this blog, that I started (and will continue) as a hobby, I’ll start offering packaged products and services that leverage my ideas. This is what I am working on for next year.

I don’t know yet how I’ll make this happen, but it is clear for me that it will be through partnerships with active members of the SharePoint community, with people who like me truly believe that SharePoint makes a difference. In my next post I’ll outline some ideas, if you are interested please talk to me!

To make things clear, this blog is not going away. My commitment is to continue sharing here my sample code and ideas in 2010, at the same pace as in 2009! I am also considering starting a second blog, where I’ll share Web design tips that are not directly related to SharePoint (jQuery, AJAX, SEO, etc.).

Gantt demos – Update

Update [12/8/2009]: due to the recent events at EndUserSharePoint.com, we are postponing the live online workshop. The Gantt workshop is now scheduled on Thursday, December 17 at 1 pm EST.

I have updated the Gantt demos on my SharePoint site. All the featured customizations will be detailed in Thursday’s live online workshop. Each participant will get a sandbox and the parts needed to build the views below.

Demo 1:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx

This demo is based on the OOTB Gantt view, to which I have added some customizations (cf. my previous post):
- month time scale
- variable scale, adjusted via a slider. Three ways to adjust the scale: move the handle / click on the slider bar / use the arrows on your keyboard.
- overdue tasks in red
- [new] on the fly filtering of tasks: tasks will be filtered based on the text you enter in the input field (placed above the task titles).
- [new] tooltip displaying task title, start and end dates: hover over a blue bar to view it.

Demo 2:
http://www.pathtosharepoint.com/Gantt/default.aspx

The second demo shows a method to add color coding to the OOTB Gantt view. The color is based on the level of priority. More details here.

Demo 3:
http://www.pathtosharepoint.com/Gantt/Lists/Project%20Tasks/cc-Gantt.aspx

The third demo offers a completely different approach: the Gantt view is built from scratch, in a standard SharePoint list view. This provides more flexibility (color coding, annotations, tooltip, etc.), and benefits from the OOTB list features (like grouping).
See this post for more details.

Live demo: dynamic time scale for the Gantt view

After this week’s live online workshop dedicated to sparklines, next week will be the turn of the Gantt view.

I am still working to finalize the customizations, but here is a preview to show you what you can expect:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx 

On this mockup, play with the slider to change the time scale. There are three levels: the default day and week levels, plus a custom month bar. The day and week levels are only displayed when the scale is big enough (x10 for weeks, x15 for days).

You’ll also notice a red bar in the Gantt, this is to indicate an overdue task (not completed, and due date before today).

Anything else you’d like to see on Gantt charts? Let me know!

Sparklines in SharePoint (part II) – A homemade bar graph

In my last post, I introduced sparklines and their applications. Today, let’s see on an example how to build simple bar graphs in a SharePoint list.

The scenario
In my example, I am tracking customer support calls over time. For each product or service, I want to monitor:
- the number of calls (too many support calls will kill my margins).
- the  trend: call numbers should decline, as I address initial issues and improve the Quality of my product/service.

While the above table contains all the data I need, it is not easy to read. By including sparklines next to the numbers, I’ll be able to visualize both the level and the trend, for each item (cf. first screenshot).
Ideally, a visual signal (for example a change in color) would alert me when I pass a certain threshold, but we’ll leave this for another day.

For a homemade solution, the easiest type to build is a bar graph. With more advanced tools, like the jQuery sparkline plugin, I could also opt for a line graph or a discrete chart, as shown in this screenshot.

The method to render the graphs is – once again – the HTML calculated column:
1/ Use a calculated column to build a HTML string that describes the bar graph
2/ Apply the “Text to HTML” script that will change the HTML string into actual HTML.

If you haven’t used the “HTML calculated column” method yet, you’ll need to learn it first (it’s really worth it if you are interested in visualization solutions). For the latest information on the HTML calculated column, start with this post.

If you are already familiar with this method, you’ll find below the formulas needed to render the bar graphs. For a first pass, feel free to skip the tedious explanations and simply copy/paste the formulas for the HTMLstring and BarGraph columns.

Single bar

Let’s start with a single bar for January. Once we get that, we’ll just replicate it for each month.

To adjust the graph size, I need to know the maximum value for my table data. For this, I am adding to my list a column, called Max (see first screenshot). In my example, I have chosen a fixed value of 2000 for Max, but I could also have entered a formula based on the content of other columns.

I can now:
- calculate the height of my bar: 20*Jan/Max pixels (the maximum height will be 20 px).
- create my HTML element, a green bar with the appropriate height:

="<b style='display:inline-block;background-color:chartreuse;margin-right:1px;width:4px;font-size:0px;height:"&(20*Jan/Max)&"px;' title='"&Jan&"'></b>"

Note: the tag name (here a “b” tag) doesn’t really matter as long as I can assign a background color.

Multiple bars

In theory, we would just need to repeat the above formula 12 times to get the chart for the whole year. Except that we hit a road block here: the complete formula will have a length of 12×150 characters, plus a wrapping tag. That’s far too much for a calculated column, which will “only” accept 1000 characters.

As all bars follow the same pattern, I’ll use the following trick: store the recurring string in a separate calculated column, that I’ll call HTMLstring:

="</b><b style='display:inline-block;background-color:chartreuse;margin-right:1px;width:4px;font-size:1px;height:"

 I can now use HTMLstring to write my complete formula for the BarGraph column:

="<span style='white-space:nowrap;'><b style='display:inline-block;height:20px;'>"&HTMLstring&(Jan*20/Max)&"px;' title='"&Jan&"'>"&HTMLstring&(Feb*20/Max)&"px;' title='"&Feb&"'>"&HTMLstring&(Mar*20/Max)&"px;' title='"&Mar&"'>"&HTMLstring&(Apr*20/Max)&"px;' title='"&Apr&"'>"&HTMLstring&(May*20/Max)&"px;' title='"&May&"'>"&HTMLstring&(Jun*20/Max)&"px;' title='"&Jun&"'>"&HTMLstring&(Jul*20/Max)&"px;' title='"&Jul&"'>"&HTMLstring&(Aug*20/Max)&"px;' title='"&Aug&"'>"&HTMLstring&(Sep*20/Max)&"px;' title='"&Sep&"'>"&HTMLstring&(Oct*20/Max)&"px;' title='"&Oct&"'>"&HTMLstring&(Nov*20/Max)&"px;' title='"&Nov&"'>"&HTMLstring&(Dec*20/Max)&"px;' title='"&Dec&"'></b></span>"

The solution described in this post gives a nice result, you’ll notice that I have even included a hover effect that allows to read the values directly on the sparklines. However, there are a couple limitations. First, we need to build each graph by hand. Then, with those monster formulas, we quickly reach SharePoint’s limits - 1000 characters for the formula, 2000 characters for the calculated field. For the record, my above example consumes 665 characters for the formula, and ~1700 characters for the calculated field. Note that I chose on purpose very short column names for the months, to shorten my formula. This is also the reason why I chose “b” tags.

In Wednesday’s live online workshop, you’ll have the opportunity to practice this method. We’ll also review other business scenarii, and learn other techniques allowing to build more advanced inline charts, for example using the jQuery sparklines plugin or the Google charts. To give you an idea of the result, check out these screenshots from Mark Miller.

Sparklines, more information in less space

For details on the upcoming Sparklines online workshop, see the end of this article, or click here.

Edward Tufte, who coined the term “sparklines”, describes them as “data-intense, design-simple, word-sized graphics.”
While traditional charts aggregate information from a full list, and are set off the flow of text, a sparkline pictures an individual item, and is directly embedded in the list.
You’ll find a good introduction to sparklines on this page from BonaVista.

The most common type is a line graph (hence the name), like in this screenshot from Google Finance. But sparklines come in various other shapes, as you can see from the (jQuery) samples on this page.

For example, you’ll use:
- line and bar graphs to track data against time
- progress bar or bullet chart to assess data against thresholds or objectives
- pies for categories (e.g. region, product line)
- discrete charts for status (project phases, game results)

Sparklines apply to many situations:
- enterprise dashboards (revenue, expenses, market share, all within one list)
- healthcare (patient stats)
- education (attendance rate, success rate)
- project management (issues resolution, costs)
- products/services dashboard (sales, support calls)
- transportation (passenger traffic, delayed flights)
- sports and games (won, lost or drawn)
- website stats: pageviews, visitors (cf. Google Analytics)
- baby name trends for a given year
- etc.

Sparklines can also be placed on supports other than lists, like maps, although I find this more difficult to read. Here is an example with the New-York subway.

How about SharePoint?

I already published last year a tutorial showing how to include Google sparklines in SharePoint lists. The Google approach is very convenient, but has its downside. First, in your corporate environment, you may not have access to the Google charts website. Then, even if you can access it, you may not like the idea that your data goes public, as you send it on the Internet to get the charts in return. If so, you’ll have to find an in-house solution to build your sparklines.
In a couple days, I’ll publish a tutorial to explain how to I created simple, homemade graphs for SharePoint lists (see screenshot below).

If you are wondering how I built the pie charts, check out this picture for a clue. More details after Thanksgiving…

To apply the tutorials, you’ll need to know about the “HTML Calculated Column”. For a refresher on this method, start with the post I published last week, and follow the links.

The above bar graphs and pies are basic solutions, but their great advantage is that they don’t have any external dependency.

If you are looking for more advanced charting capabilities, check out Gareth Watts’ sparklines plugin for jQuery. Back in March, I showed an example combining this plugin with SharePoint.

Inline charts are the central theme of our upcoming live online SharePoint workshop, scheduled on December 2nd at 1 pm (EST). Mark Miller and I will guide you through the steps to implement these customizations. Like for the other workshops, you’ll receive a SharePoint sandbox, where you can directly try out the solutions.

Easy Tabs: multiple tab rows

I am falling behind in my schedule, and several posts will only be published in the beginning of next year. However, I didn’t want to postpone this one as this is by far the number one request: how to split the tabs row, on my Easy Tabs solution.

This post explains how you can tweak the Easy Tabs v2 to achieve this. The option will be included in the next public release of the Easy Tabs Web Part.

To split the tabs row into two, follow these steps:

- include the Easy Tabs Web Part in your page. This is a Content Editor Web Part that contains a script.

- edit it, using the source editor of the CEWP.

- find this line of code:
activateTab(ActiveTab);

- replace it with:

var splitdiv = document.createElement("div");
var index = Math.floor(TabsTD.childNodes.length*0.5);
TabsTD.insertBefore(splitdiv,TabsTD.childNodes[index]);
activateTab(ActiveTab);

Basically, what we’re doing is simply add a “line break” in the middle of the tabs row (hence the 0.5 in the script).

You can of course add more than one line break, for example:

var splitdiv1 = document.createElement("div");
var index1 = Math.floor(TabsTD.childNodes.length*0.7);
TabsTD.insertBefore(splitdiv1,TabsTD.childNodes[index1]);
var splitdiv2 = document.createElement("div");
var index2 = Math.floor(TabsTD.childNodes.length*0.3);
TabsTD.insertBefore(splitdiv2,TabsTD.childNodes[index2]);
activateTab(ActiveTab);

Adjust the split values (0.3 and 0.7 in the above example) to your own needs.

Hope this helps!

Note: if you attended the Easy Tabs workshop, the split option is included in your Easy Tabs version (3.1). If you need more than two rows, here is a solution I have already posted on the Stump the Panel forum:

This is the current split function in v 3.1 (written in jQuery):

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.5-1);
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

splitindex is the index at which the row will be split. If you have 16 tabs, then:
splitindex = 7 (indexing starts at 0 in JavaScript)

You can change this calculation to include more splits, for example:

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.3-1);
$(ET001_TabContainer).children().eq(splitindex*2).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

Or you can force your own values:

//split
$(ET001_TabContainer).children().eq(5).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(11).after("<div style='font-size:0px;'></div>");

And if your users ask for too many rows…switch to a Quick Menu Web Part!