An experiment: tiny calendar + jQuery zoom

Tiny calendars look nice on a home page, but they have one drawback: their small size doesn’t allow to  display events.

In a previous post, I proposed two ways to deal with this issue, one being to include a zooming effect on the text.

Then last week I discovered anythingZoomer, a jQuery plugin that allows to add a zooming effect to any Web content (well, just as it says). It seemed like the perfect solution for my tiny calendar, so I decided to give it a try. You can see the result on this page:
http://www.pathtosharepoint.com/Calendars/Pages/CalendarZoom.aspx

This first attempt looks promising. I like the fact that the zoom keeps the clickable parts of the calendar. You can for example move to the next or previous month, or select a specific event.
There are still some issues though. In particular the zoomed view is not correctly aligned with the small view. To be continued…

HTML calculated column and Data View Web Part

This is a technical post that assumes you are familiar with the HTML calculated column and the Data View Web Part.

I recently published a new version of my “HTML calculated column” script. It works fine in list views and calendar views, but not with the Data View Web Part. Let’s take a closer look.

As an example, I’ll use a calculated column called “Indicator” with the following formula:

="<IMG src='/_layouts/images/kpiryg-"&(3-RIGHT(LEFT(Priority,2),1))&".gif' />"

If for example the priority is low, the following result will be displayed in list view:
<IMG src=’/_layouts/images/kpiryg-0.gif’ />

Applying the “HTML calculated column” method on top of this will render the kpiryg-0.gif image.

If however you use a DVWP, here is what you’ll see:
&lt;IMG src=&#39;/_layouts/images/kpiryg-0.gif&#39; /&gt;

Special characters are escaped: &lt; for “<”, &gt; for “>”, &#39; for single quotes.

Let’s take a closer look at the source code behind the DVWP. The code that renders the Indicator field depends on how you created the DVWP:
1/ Directly from the data source library, using the “Insert Selected Fields” option:

<td class="ms-vb">
	<xsl:value-of select="@Indicator"/></td>

2/ By converting a list view:

			<!--Indicator-->
			<!--Indicator-->
			<TD Class="{$IDAXOQVC}"><xsl:value-of disable-output-escaping="yes" select="ddwrt:AutoNewLine(string(@Indicator))" /></TD>

Change the code as follows:

<td class="ms-vb">
<xsl:value-of disable-output-escaping="yes" select="@Indicator" />
</td>

With the modified code, the field will display the same way as in a list view:
<IMG src=’/_layouts/images/kpiryg-0.gif’ />

You can now apply the usual script, and have your string rendered as HTML.

An example combining Gantt view and color coding

 

(click here for full size picture)

I wanted to share the above screenshot sent by Keath Montgomery, VP, Sr. Change Manager at Bank of America, along with his comment:

“Many of us who find the Gantt view to portray the best picture of project tasks also are not really fond of the list of tasks that appears below the Gantt.
Since you cannot remove it from the view in SharePoint, why not add a web part to make it more useful and informative at a glance by adding the Text to HTML Web Part to assign a color status to the task.
The above screenshot utilizes the “Slider “ Web Part to facilitate a flexible view of the Gantt and the Text to HTML Web Part to add a visual status to the task.”

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.

XML and Flash charts – FAQ

I received e-mails asking for more details about my XML+Flash chart demo, so here are the answers to some frequently asked questions.

Where do you put the swf file? And how do I point to it?
The swf is a small file and can easily be stored in a document library, in your SharePoint farm. You can then point to it using its URL, as you would with any other file. For example, here is the location of my doughnut flash chart:
http://www.pathtosharepoint.com/Utilities/Doughnut3D.swf

How did you create the XML file and the code to display the chart?
I didn’t create them, I just reused an existing example proposed on the FusionCharts site. The idea behind this technique is that in SharePoint you can reuse XML driven charts that were initially created for standard Web pages.

If you use FusionCharts v3, you’ll find examples in the gallery (I took my example from the pie/doughnut category). For the free FusionCharts v2 version, the examples are here.
To make an example work on your SharePoint site you need three components:
- the XML file  containing the data (click on “View XML” in the example you have chosen)
- the charting component (swf file) that you get from the FusionCharts package
-  the HTML and script that you’ll include in your SharePoint page. To get it, display an example and view the source code.

My demo uses FusionCharts, but you can apply this method to any XML driven component.

Is there a specific webpart for the HTML and script, or do you use a Content Editor Web Part?
As usual, I rely on the CEWP to include the HTML and script in the page.

If your data is stored in SharePoint list, how can you get it in XML format?
There are several ways to do this (and none of them is perfect):
- URL protocol
- Web Services
- RSS feed

Note: the use of FusionCharts v3 is subject to the licensing terms. For the free FusionCharts v2, see the terms of use.

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).