There are many image rotators available on the Web – I have built a couple myself. The interest of the one I propose is that it takes advantage of SharePoint’s built-in features to improve performance: instead of loading the full image, you can choose to use a thumbnail or a Web-optimized copy.

“Lite” refers to the script being written in plain JavaScript, without the need for additional libraries like jQuery. My other more advanced (and heavier) versions use jQuery and plugins to include transition effects (fade, slide, bounce, etc.).

What I haven’t decided yet is how to add a description for each picture. Should it be displayed below the picture? Should it just show up on mouseover? Well, your ideas are welcome! Just keep in mind that it is a “Lite” version, so don’t expect fancy effects.

For a live demo, go to the Path to SharePoint home page.

Why Lite?

I am maintaining two flavors of the Easy Tabs. This one is public, written in plain JavaScript. There’s another one written with jQuery, which allows to include some additional effects. The jQuery version is made available to the participants of the Easy Tabs online workshop.

Why a copyright?

As I explained in a previous post, original content published on the Web is copyrighted, even if the copyright notice is not displayed. It means that you are not supposed to reuse it without the author’s consent.
By including a license, I explicitly grant you the right to use the script without having to ask me first.

Why beta?

The new version has several new options, and testing all the variations on various browsers is time consuming. A beta version allows me to accelerate the release process and benefit from your input.
To report an issue, leave a comment below, or send an e-mail to Christophe@PathToSharePoint.com.

Will it work in SharePoint 2010?

No, version 4.0 is for SharePoint 2007 only. I am working on a SP 2010 compatible version.

No documentation?

The page is still under construction, and I’ll add more information in the weeks to come. I decided to publish it today to benefit from your feedback as soon as possible, both on the script itself and on the interface.
For information on the options, see the descriptions below and hover over the help icons on the form.

What’s new in v4.0?

Inline script

The script now runs in the flow of the page, instead of waiting for the page to be loaded. This avoids the flashing effect that some users reported.
To make the new script work, you’ll need to place it at the bottom of the Web Part zone.

Web Parts without a title

The previous version triggered an error if the zone contained a Web Part without title. The new version will simply ignore such Web Parts.

Multiple Easy Tabs in a page

The new script is “widgetized”, you can include several Easy Tabs in the same page without having to tweak the code.

Split option

If you check the Split option, the tabs will be distributed across two rows.

Expand all

This option will add to the tabs row an option to make all Web Parts visible.

Web Part headers

Choose to show the Web Part headers if you want to keep the title hyperlink and the Web Part edit menu on the screen.

Autoplay

With this option, the focus will automatically switch to the next tab after a certain amount of time. This can be useful to build a simple slide show for example.

Minified script

For better performance, the new script is compacted. Its size remains similar to the previous version, despite all the added features.

How to get the script?

Go to the Easy Tabs page, fill out the form, and click on the “Save to Disk” button. Once you have your script, you can add it to a SharePoint page via a Content Editor Web Part (preferred solution: upload the text file containing the script to a SharePoint library, then link to it from the CEWP).

Notes:
- if you don’t have Flash 10 installed, you won’t see the “Save to Disk” button. In this case, just copy and paste the code displayed in the text area.
- all the options are included in the script you download. You can later modify the variables directly in the script, without having to come back to the form.
- keep in mind that this is a beta version, for evaluation purposes.

Several readers reported that it didn’t work for them. Larry Pfaff investigated the issue, and came up with the following update:

<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/<td width="1.5%">&nbsp;<\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td>&nbsp;<\/td><\/tr><tr>");
boxedview = boxedview.replace(/<td width="1%">&nbsp;<\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td>&nbsp;<\/td><\/tr><tr>");
boxedview = boxedview.replace(/<td>&nbsp;<\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td>&nbsp;<\/td><\/tr><tr>");

document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>

To include the script in your page, use a CEWP placed below the boxed view.

The above script is written for wss v3. It identifies the Web Part by its id “WebPartWPQ1″. If you use MOSS, or if the boxed view is on a page along with other Web Parts (typically on the site home page), you’ll need to change the id to “WebPartWPQ2″ or ”WebPartWPQn“. Or you can modify the code to scroll through all the Web Parts on the page and grab the boxed views.

Larry’s update works for all boxed styles, while my initial code only worked against the “Boxed, no labels” style.

Remember that the purpose of this sample script is simplicity (5 lines!). It relies on the innerHTML property.
I am going to publish a more complete (and of course heavier) solution that will allow you to choose the number of columns.

About Larry:
“Larry Pfaff, Sr, Systems Analyst working for Convergys Corp, a global company, based out of Jacksonville Florida delivering training and outsourcing for major corporations. I have been working with SharePoint for almost 7 years and manage many internal projects using SharePoint as the collaboration tool. I enjoy new challenges and automating existing process. I seek out cookie cutter solution and mold them to fit for “Non-Developers” working with SharePoint by developing and providing training for end user and sharing my knowledge with as many as I can.”

Larry is a long time reader of my blog and other power user blogs, like EndUserSharePoint.com and SharePoint JavaScripts. While we were collaborating on a case study, in the past few weeks, Larry decided to take the plunge and start his own blog, SharePoint Hacker.

Well, this coming Monday is your chance to get on the bandwagon. Mark Miller and I will be hosting a new workshop: Get Started with jQuery in SharePoint.

Your goal is of course not to become a jQuery expert. But still, by the end of the workshop:
- You’ll have written - and tested - your first jQuery script
- You’ll know the key domains in which jQuery shines
- You’ll be aware that jQuery is not always the best option, and that you should not grab every script you find on the Internet

As usual we’ll provide concrete examples that you’ll test live in your own sandbox.

For more information and to register:
http://series-jquery.eventbrite.com

The new version will handle cases when a Web Part has no title (it will simply ignore it, instead of triggering an error in the current version). Also I have ”widgetized” the script, which means that you won’t need to tweak the code anymore to get two Easy Tabs on a same page.

A couple options come with v4:
- Split (tabs spread across two rows)
- Display all/Expand all (make all the Web Parts visible)
- Autoplay: automatically switch to the next tab after a certain amount of time. This can be useful to build a simple slide show for example.

You can experiment with the Expand all and Autoplay (8 sec/tab) options on my home page:
http://www.pathtosharepoint.com

That said, sticking with SharePoint 2007 for now doesn’t mean that you should not prepare for the future. And I am receiving more and more inquiries from readers worried that my scripts may not work in SharePoint 2010. So here is where I stand today.

First, it is clear that several scripts will need an upgrade to work in the next version. They rely on the standard page layout, which has evolved in SharePoint 2010: HTML tables replaced with div elements, new CSS class names, different calendar structure, etc.

From my first investigations, I am confident that only minor tweaks will be needed for most scripts, like the Easy Tabs. However, I’ll only be able to confirm this when the final release is out. Most of my scripts are at the very end of the page rendering chain, and any upstream modification might affect them. My big handicap is that, as an independent consultant having no direct contact with Microsoft, I don’t have any special privileges like access to information before the public release. I’ll keep you updated as I continue my investigations.

The Easy Tabs rely on each Web Part following a standard pattern (see a simplified diagram on this page, “behind the scene” tab). This gives the Easy Tabs a straightforward way to scan a Web Part zone and identify for each Web Part:
- the title (will be converted into a tab)
- the content (will be displayed or hidden depending on the selected tab)

When the Easy Tabs come across a Web Part that doesn’t follow the standard structure, they don’t know how to deal with it.

How can we move forward on this issue? Tweaking my script will only help for a specific third party application. Here is my proposal:
- if your third party Web Parts work with the Easy Tabs,  use the comments section to let everybody know.
- if they don’t work, you could let the vendor know that their Web Parts don’t adhere to the standard structure. It may be an easy step for the vendor to fix it.

Original content published on the internet is protected by copyright laws. It means that you cannot reuse it without the author’s consent. To be honest, I didn’t pay too much attention to this when I started a blog in 2008. It occured to me when I started reusing scripts from others, for example jQuery plugins. I was also alerted last year when Paul Grenier at endusersharepoint.com started including copyright notices. I contacted him, and he confirmed that his purpose was to give readers the freedom to reuse his scripts.

What does all of this have to do with you? Well, as it turns out, I have never precised under which conditions the content of my blog can be reused. I am not the only one btw, most of us bloggers are amateur publishers and started writing without being aware of the legal whereabouts. It may not have been an issue in the past, when code was limited to short snippets showing how to hide a button or change a background color. But today some scripts – like the Easy Tabs for example – are full blown solutions.

One of my top priorities today is to take the steps to clarify what readers can do with my content. I plan to include a copyright notice in my original scripts, and I need to choose a license or two under which I’ll make my work available. I have defined a few objectives:
1/ Make sure that end users can freely and legally use in their organizations the scripts I publish, without having to ask me first.
2/ Protect myself, so that I am not liable for any misuse of my scripts.
3/ keep some control on how my content is republished, or reused in other scripts.

How to do this in practice? Instead of trying to reinvent the wheel, the best is to leverage an existing license. However, there’s a bunch of them out there, so the choice is not easy. The MIT license is very open, so it seems like the right choice. But I don’t want to rush, and I’ll take the time to make an informed decision.

For the record, here are a few other important concepts associated with copyright.

Derivative work

Copyright extends to derivative work: works based or derived from copyrighted work require permission from the owner of the original work. So for example, my copyright would apply to a method that uses calculated columns to write HTML.

Fair use

The law allows “fair use” of copyrighted work. On the internet, it often means copying a short excerpt and linking to the original work.

I’ll add to this another principle, not derived from copyright but from collaborative systems: keep only one version of the truth. As a consultant, I am a strong defender of this principle – and this is actually one of the strengths of SharePoint: allowing the reuse of the same content in different views.
An issue I have been confronted with, for example, is that some people copied the content of my original post, “using calculated columns to write HTML”. 18 months later, the copies are still around, haven’t been updated and are not helpful anymore.

Obviously all of this is fairly new to me, so advice is welcome!

Additional reading: 10 Big Myths about copyright explained

If you are a frequent visitor of my blog, rest assured that I’ll continue answering comments and e-mails as before. The online sessions target people who want to benefit from a hands-on experience.

For more information on the upcoming workshops and the one-on-one sessions, please visit the home page of my SharePoint site.

First, for the sake of transparency, I have decided to communicate on my action items. From now on, you’ll be able to follow my work in progress through my SharePoint To Do list. Hopefully this will give you a better idea of the workload behind the upcoming releases.
My top priority is version 4 of the Easy Tabs Lite. Because this is the most popular of my scripts, and also because…I plan to use it on my own sites!

Besides this, and the time spent responding to blog comments and e-mails, a couple things have kept me busy in the past weeks.

First, I’m back from a week in Beijing, where I celebrated the Chinese New Year. Before this, I was involved (or should I say dragged by Mark Miller?) in two SharePoint conferences: SharePoint Saturday EMEA (follow this link for the recordings, and see my previous post for the slides) and the San Francisco SPTechcon (more details here).

In January, I worked with Mark Miller on my sessions for the Spring 2010 live online workshops. I recommend that you check them out, and register for the free webinars that will start this month.

In addition to this, I have spent a significant amount of time investigating two issues: copyrights for my site content and scripts upgrades to SharePoint 2010. I’ll dedicate specific posts to these two important topics.

I wish you a Happy Year of the Golden Tiger!

I wanted to share this mosaic from the official SharePoint 2010 site, as an example of how Web design techniques are making their way into SharePoint 2010.

If you are familiar with Web design, you’ll recognize a CSS sprite. The principle: multiple images used throughout the Web page are combined into a “master image”. This reduces server requests and improves page load performance.

In the above example, the master image is used to populate the list ribbon (also a feature introduced in SP 2010):

Note that I already talked about CSS sprites a couple months ago, with this example designed to display inline pies in SharePoint lists: http://pathtosharepoint.com/Utilities/PieSprite50.png

Some references if you’d like to learn more and see other real life examples:
- CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea March 2004
http://www.alistapart.com/articles/sprites 
Sprites are the extension of a technique called “sliding doors”, used to create button rollover effects.
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

SharePoint Saturday EMEA was a fantastic event, kudos to Mark Miller and the organization team! As Mark explained in his post mortem, “there were a couple of roadblocks to making this thing actually work. First was that Europeans treasure their weekends and we had to assume that many people would not attend because it was scheduled to be a Saturday event.” Well, the Europeans proved that they had the motivation to dedicate their Saturday to SharePoint. And the Americans proved that they are always ready for action, even at 3 am!

fpweb.net has big plans for 2010. As one can expect from the pioneer of SharePoint hosting, they are actively preparing for the SharePoint 2010 release. But what really got me excited is their data center map that shows their expansion plans outside of America, in Europe and Asia.

I am now working on the redesign of my demo site. The site should be ready to move to its new home in a couple weeks, after the (Chinese) New Year.

Yesterday, I came across a discussion between @EUSP, @webdes03 and @ebrackley on Twitter:
“TextToHTML can be a bad performer when tasked with lots of HTML; also research DVWPs”

This is a timely comment, as I am about to present at SharePoint Saturday EMEA. Let me expand on this, and provide a few hints on how to better use the HTML Calculated Column.

Remember: TextToHTML is not the only way

Right, most of the examples you’ll find on my blog rely on the TextToHTML script, embedded in a Content Editor Web Part. But there are other ways to render the HTML. In particular, the Data View Web Part, used in crosslist mode, or the Content Query Web Part can directly do the rendering. For more information, see these series:
- for MOSS
KPI roll-up in MOSS
- for SharePoint 2007 (applies to both wss and MOSS):
KPI roll-up in SharePoint (Part I)
KPI roll-up in SharePoint (Part II)

The latter will be the theme of my presentation at SharePoint Saturday.

Get a faster browser

Not always a choice, but if you can, upgrade your browser to the latest version. These days, browsers are improving by leaps and bounds, with Google leading the charge.
My tests show that the TextToHTML script is four times faster in IE 8 than in IE 7. That’s huge! Some other browsers offer even better response time.

Faster TextToHTML

If you are using the TextToHTML script, you’ve certainly got the current version from the download section. What I am making available over there is a generic script, for both SharePoint 2003 and 2007. If you are on SharePoint 2007, you can make it more specific and thus faster.

Focus on the main content

As is, the script will scan the whole page to find table cells (TD elements):

TextToHTML(document.getElementsByTagName("TD"),regexpTD);

This is a waste of time, as you just need the main content, excluding header and Quicklaunch. You can easily do this by replacing the above line with the following code:

var theMainContent = document.getElementById("MSO_MainContent");
TextToHTML(theMainContent.getElementsByTagName("TD"),regexpTD);

Use selectors

Instead of grabbing all the cells in the document, try to restrict your scope to the cells that may contain HTML Calculated Columns.

For example, Paul Grenier proposed a jQuery version of my script, which allows you to grab only certain cells. If HTML Calculated Columns are only in List View Web Parts on your page, the simple $(“td.ms-vb2″) selector should be enough. For better performance, you may want to combine it with my first advice, and focus on the main content: $(“#MSO_MainContent td.ms-vb2″).

Here again, a modern browser will give you better performance (for example if it has native tools to find elements by class name).

Place your script close to the point of consumption

Imagine that you are displaying 10 lists on your page, but only the third one is using HTML calculated columns. If you place the CEWP that contains TextToHTML at the bottom of the page, the script will go through the 10 lists. If you place the script right below the third list: when the script runs, it will be faster as it only sees 3 lists, the 7 others being displayed later.
btw placing the scripts close to the point of consumption is a good practice that also applies to other scripts, not just here. In traditional Web design, you would find all the scripts under the head section of the page, but this practice has evolved now that pages are more dynamic.

If you have other ideas, feel free to share them with me and the other readers! I’ll push some of these performance improvements in the next release of the TextToHTML script. I am also looking for volunteers to test the beta versions…

Note: You’ll need site owner permissions on your site collection to set up the demo.

I am providing all the templates needed to replicate my demo in the download section. This includes 4 files:

Projects_List.stp (List template)
Each program site has a projects list. This is where the project managers will update their project status: progress and 4 health indicators.

Projects.webpart
This is a Data View Web Part that displays the visual indicators, progress bar and traffic lights.
Placed on the home page,  it will find all the project lists in the sub-tree. For example, if added to the home page of BU2, it will find all the project lists in BU2, Program 2.1, Program 2.2 and Program 2.3.

  
Projects_with_Overall_Status_=_Red.webpart 
Similar to the previous Web Part, but with an additional filter that only selects the projects in poor health (overall status = red).

Program_Site.stp 
A site template to create program sites. The template includes both the Projects list and the Project DVWP.

So you have the choice: either use the site template, or use the list template with the DVWP template. See below detailed instructions on how to use the files.

A couple comments:
- I used a site content type to manage centrally the project items. It is excluded from the templates, as the SharePoint UI doesn’t provide a way to export/import content types.
- the DVWP includes two grouping levels that are based on the site collection hierarchy.

What’s next?

I am really looking forward to your feedback. I think it is a very convenient implementation of the  “HTML Calculated Column”, as it doesn’t rely on a Content Editor Web Part. Also, the method works on both wss and MOSS, gives you access to a large choice of visual indicators, and doesn’t require images.

If everything works as advertised, please leave a comment here! If not, you may also leave a comment, but more importantly contact me so that I can help you out.

Also, let me know if you’re not clear about the scenario and the benefits of such an implementation.

In part III I’ll explain how I built the projects list.

Detailed instructions

Start by downloading the templates from the download section, under the topic ”KPI roll-up”. To download a file, right click on it and select “save target as”.

To use the Projects list template (you need site owner permissions):
- On your top level site, go to the List template gallery:
Site Actions | Site Settings | Galleries | List templates
- Select Upload
- Upload the Projects_List.stp template

You can now create lists based on the ProjectsList template, on any site of your site collection:
Site Actions | Create | Custom Lists | Projects List

To use the Data View Web Parts:
- On your top level site, go to the Web Part gallery:
Site Actions | Site Settings | Galleries | List templates
- Select Upload
- Upload the two templates Projects.webpart and Projects_with_Overall_Status_=_Red.webpart

You can now add them to your Web Part pages like any other Web Part.

Alternately, you can use the Program_Site.stp site template that contains both the projects list and the Data View Web Part (you need site owner permissions):
- On your top level site, go to the site template gallery:
Site Actions | Site Settings | Galleries | Site templates
- Select Upload
- Upload the ProjectsList template

To create a site based on the template:
Site Actions | Create | Web Pages | Sites and Workspaces

Good luck!

On January 23rd, at the SharePoint Saturday EMEA event, I’ll present a session about ”KPI roll-up in SharePoint 2007″.

Last year, I already published a series about KPI roll-up, but it only applied to MOSS, and relied on the Content Query Web Part. This time, I’ll show you how a similar result can be achieved with the Data View Web Part and applied to any SharePoint 2007 configuration (wss v3 and MOSS).

As usual, no action is required on the server side. All the customizations will be done via the SharePoint UI. We’ll also use SharePoint Designer to configure the Data View Web Part, although this is not mandatory and could be one with a text editor.

Our tool for building the visual indicators is my “HTML Calculated Column” method. If you’ve already used it before, you know that it is usually associated with a client side script (“Text to HTML”). Well, here is some good news: in this specific case, we don’t even need the script, SharePoint will do all the work for us! btw this is also how it worked with the CQWP in last year’s series.

In this article (part I), I am going to describe the business scenario, with the support of a live demo.
In part II, I’ll provide the templates I used for the live demo. This will allow you to test them in your own environment (wss or MOSS).
In parts III and IV, I’ll explain how I did it, using calculated columns and the Data View Web Part.
In parts V to X… you tell me how you’ve taken advantage of the method in your own environment, and share your findings and customizations with me and the other readers!

The scenario

An organization is divided in business units, each one gathering multiple program teams. Each program team manages several projects.

Each level of the hierarchy needs visibility on the projects under its supervision. So for example:
- the program team 1.2 monitors all projects 1.2.x
- Business Unit 1 monitors all projects 1.x.y
- the top management monitors all projects

Information architecture

The SharePoint architecture follows the organizational structure: the collaborative space is a site collection, where each business unit is a sub-site of the top level, and each program is a sub-site of the business unit site.

Program team level

Note: click on a screenshot to access the live demo.

In my example, I use a custom list with 5 indicators to monitor the projects.

The budget, quality and schedule indicators track the project health: good (green), average (amber), or poor (red).

The overall status is a global indicator based on the 3 others. For example:
- Green+Amber+Amber –> Amber
- Red+Amber+Amber –> Red

To make the table easier to read, the text is converted into visual indicators: progress bar for the % complete, and traffic light for the health indicators.

Business unit level

 The business unit dashboard gathers all the projects under its responsibility:

For the demo, I have shown all the indicators. At this level, we could actually have restricted the view to the progress bar and the overall status, for a lighter display.

Top level

At the top level, we are collecting information from all the projects in the organization. To avoid an overwhelming amount of data, the list is filtered to only display the projects we want to focus on (in my example the ones with a red overall status).

In the next episode, I’ll share the list template and Web Part I used for the demo. A key point with this method is that it is the SAME Web Part that is used at all levels of the hierarchy to render the visual indicators. At each level, the Web Part is smart enough to only select the relevant information, i.e. the projects in the sub-tree.

What I am looking for:
- SharePoint hosting for my demo sites (SP 2007 and SP 2010)
- Web hosting for my other sites (mainly blogs based on the WordPress platform)

What I can offer:
- act as the SharePoint evangelist for the provider’s user community
- packages based on my creations, that will enhance the basic SharePoint offer

If you know anyone who could be interested please let me know!

1. Issues with my tutorials

I want to make sure that readers can easily use the advice I provide. So my top priority is to respond to issues reported on my blog (errors or usability). If a script or tutorial doesn’t work for you, leave a message in the comments section and you’re sure to be heard.
You can also contact me by e-mail, but blog comments take priority as they affect all readers. Use the e-mail in addition to comments if you need to provide details or screenshots.

2. Requests for enhancements

I am also very interested in suggestions to improve my articles and scripts. Here again, the comments are the main channel. Your request may be relayed by other readers, which will give it more weight.

Note: I have a number of enhancements in my to-do list, for the Easy Tabs and the image rotator. I’ll publish them in February, after I am done restructuring my sites.

3. Other questions

I also receive many questions that are not directly related to one of my posts. I’ll respond immediately if I can, but most of the time it requires some investigations, and I put your message on hold until I have a final answer (which sometimes means never…).
My suggestion in such cases: instead of sending me an e-mail, post your question on the Stump the Panel forum, and then PM me (username: Christophe). This way, you’ll get me to look at your issue AND you can get help from the fantastic STP community!

One precision: my blog and the STP forum target end users. Do not use them for server side questions!

I entered the contest with three solutions:
- A tooltip for SharePoint lists and calendars, based on the jQuery Beauty Tips plugin.
- Tasks visualization: a tasks list enhanced to display visual indicators (task progress, KPIs, buttons, rating, etc.).
- the Easy Tabs

Last month I received the great news: the Easy Tabs got the first prize! Big thanks to zevenseas for their choice, and for their initiative to encourage creativity in the SharePoint community.