You are currently browsing the monthly archive for December 2009.
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.
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.
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.).
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.
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!
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.
SocialVibe