I have released a new version (v 2.0) of the “HTML calculated column”. The new script covers lists (SharePoint 2003 and 2007) and calendars. Its purpose is to replace the scripts currently published here and here.
I am proposing this update as people were confused by my recent changes, with the use of DIV tags for lists and SPAN tags for calendars. The new code accepts various html tags. You can now use “DIV” or “SPAN” tags, but also “A” tags, “IMG” tags, etc.
The files are available for download on this page (right click on the file name and save as):
http://pathtosharepoint.com/Downloads/
Use the .dwp Web Part on a SharePoint page, or store the .txt file in a document library and connect to it from a Content Editor Web Part (detailed tutorials coming soon).
Note: I am not displaying code in this blog anymore, as I’ve had too many editing issues in the past.
I have also cleaned up the code to deal with grouped lists. Instead of overwriting the default SharePoint JavaScript, I append my own code to it.
This is still work in progress, I have chosen to make it available now to get your feedback. Next week I’ll publish more detailed explanations and I’ll update the old posts.
19 comments
Comments feed for this article
June 5, 2009 at 2:31 pm
Dinooz
It worked Chris U R The man, I create a custom list where I like to include some to show an SWF video… it works from my Web Content Editor Webpart, but did not worked for lists.
For the custom list page I add a webpart and copy your code. later on the list I copy and paste in the rich html editor column my code and include the open and close DIV tags as you indicate.
……
Yes is important to make sure the webpart with your script is at the bottom of this list page and voala, it works, U R The man thank you so much for this really useful feature.
Best Regards Dino.
June 8, 2009 at 12:45 pm
Using calculated columns to write HTML « Path to SharePoint
[...] HTML Calculated Column – Updated script « Path to SharePoint [...]
June 9, 2009 at 3:40 pm
Anissa Rush
Can you please email the text file for the updated script? When I right-click and choose “save target as”, it tries to save as a .htm file. I’ve successfully modified my calendar with color coding but can’t get it render properly in the week view. Changing DIV to SPAN only makes it worse. I’d like to try your updated script but am unable to download it for some reason. Thanks!
June 10, 2009 at 6:47 am
Christophe
Anissa: when you “save target as”, change the file extension to .txt. Or directly download the Web Part (.dwp extension).
June 26, 2009 at 3:40 am
Case study: KPI roll-up in MOSS (Part I) « Path to SharePoint
[...] the HTML calculated column (the instructions were initially posted here, but make sure you grab the updated version of the script). Your tasks list should now look like the above [...]
July 7, 2009 at 7:06 pm
Emmanuel
It work fine in Month view, but when I toggle to Week and Day view, the javascript doe not seems to be executed and I end up with plain html code in the calendar instead of formatted text.
Any idea?
Thanks
July 8, 2009 at 1:29 pm
Christophe
Emmanuel, send me your example:
Christophe@PathToSharePoint.com
(please precise the list type and the browser you’re using)
July 10, 2009 at 2:28 pm
Martijn
You can run into troubles with the new RegExp matching schema.
Suppose you have a list with one column, with no sorting header (e.g. created as dataviewwebpart) and that column is filled with the calculated HTML values.
This list will be wrapped in a TD by SharePoint. (thus making a nested table, The TD is filled with a table that has the list data)
The script will find this Table Cell and then checks only the innerTEXT. This innerText will consist of the concatenated values of the list. Now the script will trigger on the HTML found and then replace the contents of the TD with something awfull.
You will have to check if the TD that is being queried is actually a cell that contains listdata (and nothing more)
July 10, 2009 at 6:34 pm
Christophe
Thanks for your comment Martijn. You’re right, in extreme cases – e.g. single column and no header – the script will mess up the layout. However, I don’t think it is specific to the regexp schema, you’d experience the same behavior with the older script.
July 13, 2009 at 11:35 am
Martijn
You are right
I mixed up some problems and their causes.
Although, The old script tested if the ‘<DIV' was at the start of the string. The new method allows whitespace at the start. This difference allows the script to catch more. (the innerText of surrounding TDs have some white space before the 'real'content starts)
My extreme case was: Use the calculatedHTML column to generate a hyperlink and present them on the 'start' page (default.aspx of a site) and thus I stripped some formating (including the column header).
I prefer the old script, since it has a more controlled way of determining the string to convert to HTML.
July 20, 2009 at 12:36 pm
Carla
Chris, truly appreciate the code. However, I have hit a little quirk. I am using a calendar list view. The events are color coded if they are set to be All-day events, but are not color coded and only show the time if I set them to a particular time of day. Here is the exact “display” tag for a particular event:
Title text
Any idea what might be the cause?
Thanks!
July 22, 2009 at 4:10 pm
Lucy Blain
Hiya – Chris this code and your other list colour code e.g. KPIs in list view are Fab.
But wondering if you’ve solved an earlier pposts issue and hence mine…
We have implemented this code for a custom list, the fields used are single lines of text, and it shows fantastically by MONTH but as a previous post highlighted in the WEEK or DAY view its not.
We are struggling to fix this, but in calendar view by WEEK or DAY, the colour is not applying if there are many events on one timeslot, and also it only colours the background of the title not the sub heading of the event.
We would be very grateful to hear if you have a solution for this?
(Happy to send a screenshot or more info if needed…)
Hopefully, Lucy.
July 22, 2009 at 5:48 pm
Christophe
I have set up an example with full day event, intraday event an recurring intraday event:
http://www.pathtosharepoint.com/Calendars/Lists/Calendar/ColorCoded.aspx?CalendarPeriod=week
Everything looks ok on my side. Make sure you have defined the correct heading and sub-heading in week and day views. If it still doesn’t work, feel free to send me a screenshot:
Christophe@PathToSharePoint.com
August 14, 2009 at 8:03 pm
Chris
Hi,
Is there a tutorial on how to use this? I’m not seeing it, or missing it?
What I want to do is this.
I have a calendar list, and when the users create an entry. I’ve added a column where they can make a selection of 3 choices.
In the calender view, I want the bgcolor to be determined by what option was selected when the entry was made.
August 15, 2009 at 9:12 am
Christophe
Chris, follow the links in the post for more instructions.
November 9, 2009 at 2:10 pm
John
Your HTML script is a real gem!
I’m having difficulty getting it right in calendars. It works just fine in Month and All Events view but raw HTML still shows up in Week and Day views.
My calculated column (displayed) uses the …. format.
Do I need to use a different format for Week/Day views?
Thanks in advance!
John
p.s. I am using script version 2.1
November 10, 2009 at 12:31 am
Christophe
John:
1/ In the script, try removing the last $ in the regexpA expression
2/ let me know the result, and if it doesn’t work please send me more details about your use case:
Christophe@PathToSharePoint.com
November 17, 2009 at 3:14 pm
Martin
Hi Christophe,
amazing work, thanks! Looking at it, I gaze at its simplicity, but how the heck can one find such a solution?!
Any chance that we will have the filters html formatted, too? In my html formatted calculated columns, the filter drop-down shows the html code, more than the formatted possible values. You once announced a remedy for that one, too. Any news?
Thanks,
Martin
November 18, 2009 at 2:59 pm
Pete
Hi,
First off this is an excellent idea, such a simple work around to a huge annoyance with SP lists!
I do have one question which is when I attempt to edit a list in datasheet view with the script web part at the bottom of the page SharePoint throws an error…
“The list cannot be displayed in Datasheet view for one or more of the following reasons: A datasheet component compatible with Windows SharePoint Services is not installed, your browser does not support ActiveX controls, or support for ActiveX controls is disabled. ”
This isn’t true as quickly hitting back on the browser takes you to the datasheet, but just wondered if anyone had an idea of how to avoid this error?
Thanks,
Pete