Sneak Peek: HTML Calculated Column v3

HTMLfilter

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.

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

FAQ: how comes my Easy Tabs display in edit mode, but not in view mode?

This is the most frequent issue reported with the Easy Tabs Web Part: the user can see the tabs when the page is in edit mode, but as soon as they switch to view mode the tabs don’t show up anymore.

‘The explanation: the Easy Tabs script builds the tabs from the Web Part titles. In edit mode, all the Web Parts and titles are displayed (even those set to hidden), so the script finds the information it needs to build the tabs. In view mode, some Web Part titles may be hidden, depending on your settings. If it is the case, the script can’t find the information to build the tabs and stops.

So, if your tabs display in edit mode but not in view mode, the first thing to check is that your Web Parts have a chrome type set to “Title” or “Title and border”.

I’ll update the Easy Tabs page, to either explain this issue or tweak the Web Part behavior.

If you participated in the online workshop you don’t see this issue, as the version given to the participants has a different behavior.

If you are interested in the Easy Tabs, note that Mark Miller has set up an additional online workshop on October 8. In this session, we review use cases and customization options for the Easy Tabs and its sister Web Parts, the accordion and the Quick Menu.

Image Rotator: now with hyperlinks

I have added a new option to the Image Rotator: you now have the possibility to make the pictures clickable. Clicking on a picture will open a new window, to display either the full size picture or a link that you have referenced in a text column.
By default the text column is called [Link]. You can of course choose your own column name, but do not use spaces or special characters in the name. Remember to include that column in the default view of your picture library.

HTML Calculated Column – Updated script v2.1

I have updated the TextToHTML script to add support for preview panes. You can get the new version (v 2.1) on the download page.

SharePoint uses a function called “showpreview1” to render preview panes. My script appends the “text to HTML” transformation to this default function.

Note that since version 2.0, you don’t need DIV tags anymore in your HTML formulas. The script will identify any HTML string, with upper case tags (DIV, SPAN, IMG, A, etc.) or lower case (div, span, img, a, etc.). For this, the script relies on regular expressions, like this one used for list views:
RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$")

If you haven’t heard about the HTML Calculated Column yet, check out these links:
the method, explained (includes version 1.0 of the script)
– an example: apply color coding to lists
– a formula generator for color coding
– a troubleshooting page

…Or read the whole series (~30 posts).

Image rotator: build your own!

ImageRotator

Can’t wait to get your own image rotator? Go there!

 Last year, when I published a post about displaying a random picture on a SharePoint page, I left some unfinished business. At the end of the post, I was suggesting some improvements, but I didn’t provide the related code.

So I have decided to build an image rotator generator: simply go to this page, choose your settings, and get your own script. You can then add it to a SharePoint page using a Content Editor Web Part, as usual.

One key feature of this image rotator is that it allows you to use pictures optimized for the Web, instead of the original pictures. I’ll provide more details on this in a dedicated post.

Another plus is the option to choose the refresh frequency, using the JavaScript setInterval function. This is something I had already mentioned in a SharePoint forum 3 months ago.

 I am already thinking about future enhancements, for example:
– make it work for anonymous users, not just in authenticated environments
– add transition effects
– add a description to each picture

There is still a lot of room for improvement, so your feedback is welcome!

SharePoint pages: add tabs in a snap!

EasyTabsWebPart

I have just released the “Easy Tabs Web Part” for SharePoint 2007. Check out the demo, the video and the Web Part for download on my SharePoint site:

http://www.pathtosharepoint.com/pages/easyTabs.aspx

The Web Part can be used on a SharePoint 2007 site by anybody who has design or full control permissions (it is actually based on a Content Editor Web Part). The installation does not require server access.

Update [5/24/2009] In addition to the swf format on my SharePoint site, the screencast is now available on YouTube. Duration:1min25.

Update [5/26/2009] Thanks all for the great feedback (comments and e-mails)!

I have added a twin Web Part to the download section, for those who want another set of tabs for another Web Part zone on the same page.

I am also going to add two sections on the site, one for FAQ and another to track known issues.

Update [5/29/2009] Version 2 now includes cookies. Reloaded pages will remember the active tab. This is useful for example when you switch between different views of a calendar (Mark’s comment), or if you use sorting/filtering options on list columns.

Display a list in another site (Cont’d)

Two months ago I published a simple method to display a SharePoint list in another site.

A few days ago, Nathan posted the following comment:

The one (minor) inconvenience I have found is that when you click the ID or Title field to navigate to the full record (dispform.aspx), the Close button will redirect you to the default view of the source list […] Would it be possible to modify the script in order to append something like Source=location.href to the ID/Title hyperlink? That way, the Close button on dispform.aspx would redirect you back to the starting page.

So here we go. As Nathan points out, SharePoint offers a very convenient “Source” querystring that tells where the user should be redirected after an action is completed.

This is the modified JavaScript version:

<!-- Load and display list - iframe version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->

<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>

<!-- Paste the URL of the source list below: -->


<script type="text/javascript">
function DisplayThisList()
{
var placeholder = document.getElementById("ListPlaceholder");

var displaylist = null;
var sourcelist = document.getElementById("SourceList");

try {
   if(sourcelist.contentDocument)
      // Firefox, Opera

      {displaylist = sourcelist.contentDocument.getElementById("WebPartWPQ1") ;}
   else if(sourcelist.contentWindow)
      // Internet Explorer

      {displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ1") ;}
   else if(sourcelist.document)
      // Others?

      {displaylist = sourcelist.document.getElementById("WebPartWPQ1") ;}
}
catch(err) { alert ("Loading failed");}

displaylist.removeChild(displaylist.getElementsByTagName("table")[0]);
var allDescendants = displaylist.getElementsByTagName("*");
for (i=0;i<allDescendants.length;i++) {
allDescendants&#91;i&#93;.removeAttribute("id");
allDescendants&#91;i&#93;.removeAttribute("onclick");
allDescendants&#91;i&#93;.removeAttribute("onfocus");
allDescendants&#91;i&#93;.removeAttribute("onmouseover");
try {
if (allDescendants&#91;i&#93;.href.indexOf("?") > 0) {allDescendants[i].href = allDescendants[i].href + "\&Source=" + location.href;}
else {allDescendants[i].href = allDescendants[i].href + "?Source=" + location.href;}
}
catch(err) {}
}
placeholder.innerHTML = displaylist.innerHTML;
}
</script>

And the modified jQuery version:

<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>

<script type="text/javascript">
// Paste the URL of the source list below:
var SelectedView = "http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id").removeAttr("onclick").removeAttr("onfocus").removeAttr("onmouseover");
$("#ListPlaceholder a").each(function() { 
if ($(this).attr("href").indexOf("?") > 0) {$(this).attr("href", $(this).attr("href")+"\&Source="+location.href);}
else {$(this).attr("href", $(this).attr("href")+"?Source="+location.href);}
});
});
</script>

See the original post for more details. In particular, if you are using MOSS remember to replace WebPartWPQ1 with WebPartWPQ2 in the above scripts.

Update (March 24th): I have modified yesterday’s post to make the scripts work for document libraries as well. I have also corrected the jQuery version (thanks to Peter Allen for alerting me).

Update [6/16/2009]: I have modified the jQuery code for better performance. Thanks Danny van Loon for the advice!

A Content Editor Web Part for every home!

In this post, I am going to describe a technique that allows end users to control multiple SharePoint pages from a central location. As the title suggests, the cornerstone is the Content Editor Web Part.

I’ll first describe the implementation, then I’ll show it at work on two examples: a cross-site menu and a “Breaking News” scenario. We’ll complete our tour with a live demo.

Continue reading