You are currently browsing the monthly archive for September 2009.
This Wednesday, Mark Miller and I will be presenting our online SharePoint workshop on the Easy Tabs interface.
If you haven’t heard about my Easy Tabs and Accordion yet, I recommend that you follow these steps:
1/ Check out the live demo. It’s all about dynamic interfaces, so click, click, and…click!
2/ View the workshop teaser
3/ If you find these navigation tools useful, register for the workshop. If you are wondering how they can help you, well… register for the workshop 
Talk to you on Wednesday!
As I was working on the labs for my live online workshop, I did some experiments with the last release (v 2.01) of the jQuery corner plugin.
This plugin takes the edge off corners and replaces it with various shapes (rounded, beveled, notched, etc.). I have applied two examples – rounded corners and dog ears – to Web Part headers on this page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx
The shapes are not always as neat as with other methods (that use images or the canvas element), but its ease of use and versatility make this plugin a excellent solution. Note that I said “not always”… the plugin is smart enough to apply the latest css standards if your browser recognizes them. To see this, try out the rounded corners of my above example in different browsers.
For the participants in the September 23rd “tabbed interfaces” online workshop, note that we’ll see how this technique can be applied to the Easy Tabs and the default SharePoint navigation.
If you want to try out this effect on Web Part headers, as in my example, here is the code I used (Only one line of jQuery!):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-WPHeader").parent().parent().parent().css("background-color","palegreen").corner("dog top");
</script>
(Remember to modify the script to point to your own copy of jQuery and jQuery corner)
Update [9/14/2009]: I have made a slight change to the code, it now works cross-browser: validated in IE7/IE8, Firefox 3.5, Safari 4.0 and Google Chrome (the initial code was IE only).
Update [10/21/2009]: version 1.1 is available for download (see links below). Remember to set the jQuery path and the pictures path in the script before using it.
Craig Lowrie is a Network administrator at the Ear Science Institute (Australia). A couple days ago, he shared with me a very useful script, allowing to add color coding to SharePoint Gantt views.
Let’s start with the live demo (combined here with the Gantt slider):
http://www.pathtosharepoint.com/Gantt/
A SharePoint Gantt view is made of two sections: the Gantt view itself (not customizable), and underneath a “summary list” that displays the task properties. We have customized this view to display the priority levels.
Craig’s script works as follows:
- first, it scans the summary list to identify for each task the priority level.
- it then goes back to the Gantt view, and for each task it replaces the blue bar with the appropriate color (red/yellow/green). This is done by replacing the dozens of small blue images that make the Gantt view with custom images (yes, SharePoint uses one image per day!).
The files for this customization are available on my site’s download page (to download a file, right click on it and select “save target as”).
[09/15/2010: link updated to the new Toolkit location]
First, you’ll need to unzip BarImages.zip, and place the images created by Craig in a library.
Then you’ll need to place the script on the page that contains your Gantt view. You have two choices on the download page:
- either the script (ColorCodedGantt.txt) that you’ll paste in the source editor of a Content Editor Web Part
- or directly the Web Part itself (ColorCodedGantt.dwp) that you can import to your SharePoint page.
The last step consists in minor adjustments to the script:
- change the path to point to the library where you stored the images (PicturesPath in the script)
- The sample code calls the jQuery library available online from Google. You may want to link to your local jQuery library instead. Or remove the call if you already use jQuery on your page.
You can easily adapt the script to work with a choice list other than Priority. Simply replace (High|Normal|low) in the script with your own values.
Thanks for sharing Craig!
I had planned to introduce my demo page featuring the EUSP Fall workshop calendar, but Mark Miller beat me to it. You can read his comments, and/or explore the page by yourself to try and discover all the featured customizations.
I’ll share more details in future posts. For now, here is the flat list of customizations, all added through the SharePoint UI (no SharePoint Designer, no server side change):
- Calendar displaying three months, not just the current month.
- Sundays have been removed (but we are open on SharePoint Saturdays!).
- The calendar height has been adjusted to fit in the page.
- Easy Tabs, that automatically generate the tabbed interface for the calendar months.
- Content types: workshops have a colored background, while a flag is displayed next to US holidays. Conferences have the standard SharePoint look.
- color coding based on the trainer’s name, for both the calendar views and the list views.
- Beauty Tips (jQuery plugin): there are many jQuery tooltip plugins around. I have selected this one for its ability to pull data from another page (in this case the display form) , and auto-position the popup in the largest available area – very useful in cases like mine where the popup has a significant size. Also, I love all the customization options. A great plugin!
- HoverIntent (jQuery plugin): another very useful plugin that analyzes your mouse movements. It waits until the user’s mouse slows down enough before triggering the tooltip.
- “learn more” button in the events list.
These customizations will of course be presented in detail in the upcoming workshops:
- Easy Tabs Interface, on September 23rd.
- Calendar solutions, on October 16th.
- Color coding and animations workshops, in November/December.
I started this blog one year ago, and one of the first techniques I shared was the “HTML Calculated Column”.
I’ve talked about many other topics since then, but to date the “HTML Calculated Column” remains by far the most popular. The original post has been viewed more than 45,000 times, while its little sister explaining how to use the technique for color coding has been viewed 27,000 times.
Online workshops coming soon
In the past year, I have refined this technique and published more tutorials. I have also created a formula generator to handle simple cases. The latest version of the script is on this same page (under the Download tab).
The “HTML Calculated Column” technique has also been relayed by many SharePoint bloggers. On EndUserSharePoint.com for example, you’ll find Paul Grenier’s jQuery version of the script, and a detailed example by Jim Bob Howard: the payroll schedule.
However it was still not enough to answer all the users’ requests. So I worked with Mark Miller to set up two online workshops that will include this topic.
The first one in October actually focuses on calendars, color coding being one of the featured solutions.
The second one, in November, will be dedicated to the HTML Calculated Column. During the workshop, I’ll answer your questions and we’ll work on your specific use cases.
To be informed of upcoming workshops offered by EndUserSharePoint.com, you can check out this page or subscribe to the RSS feed.
SocialVibe