HTML Calculated Column – Updated script

Posted on by

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.

49 thoughts on “HTML Calculated Column – Updated script”

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

  2. Pingback: Using calculated columns to write HTML « Path to SharePoint

  3. 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!

  4. Pingback: Case study: KPI roll-up in MOSS (Part I) « Path to SharePoint

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

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

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

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

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

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

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

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

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

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

  14. Hi,
    I seem to run into a problem with your script. I’ve put a ‘Item Limit’ on the number of items to display initially(in my case I’ve put it at 20). The script runs properly on the initial list display but when I click the ‘more’ button to page view the remaining items, the Lists just shows the whole tag in my case it shows
    ” view ” instead of just view for that column.
    Any help would be appreciated.
    Thank you.

  15. Well I found out what I had done wrong. I hadn’t placed the content editor Web Part below the List. After doing that, the links were working as they were supposed to.
    Thanks Christophe.

  16. Hello again. I have another problem that is happening with I use concatenate in the formula column in conjunction with your script. In my formula I have the web address of the list plus the ID and the field BatchId, eg /Lists/Batches/DataViewForm.aspx?ID=”,ID,”&BatchID=”,[Batch ID]. It works properly but when I edit an item and go back to the List display view and try to click the link to the item, the formula does not get the value of the ID anymore. That is, when i mouse over my link it just says http://mysite/Lists/Batches/DataViewForm.aspx?ID=&BatchID=100. So whenever I edit an item in the list the item’s ID doesn’t show up in the link after the item has been edited. However, This is usually alleviated when I go to the List Setting and to the Formula Column and just clicking ok, The ID will return back in the link. This is a very wierd problem I have could you please help me out. Thanks – Joseph

    • Joseph, this is the expected behavior, and you are not supposed to use the ID field in formulas. The list of available fields is displayed on the right side of the formula field, when you edit your calculated column.

  19. Any chance I can get the latest TextToHTML script to work for the Newsletter style list type? When I switch to Newsletter for the list style, the link becomes a full URL, in addition to cutting off the link at the end of the first word. For example, if I have a link for “Active Directory” the link will stop after “Active” and therefore ceases to work.

    Newsletter is one of my current favorite stlyes for the lists we are using, so if the script could work for Newsletter that would be FANTASTIC!

    Thanks – Steve

  20. Steve, if the style cuts the string, then it cannot be interpreted as html anymore. The issue is upstream in the rendering process and there’s nothing we can do on the client side.
    Maybe converting the view to a DVWP in SharePoint Designer would allow you to access the code and avoid the string to be cut?
    A style that works well with the HTML calculated column is the boxed view.

  21. Great work Christophe, I really like your TextToHTML script. However, I’m having one problem with it: My SharePoint 2007 list contains a plain text field type column. If the text in there begins with the left angled bracket character “<", the page won't load anymore with JavaScript hanging in a busy loop. Could you please try if you're seeing the same symptom, and if possible provide me with a fix or workaround.

    Thank you in advance and keep up the good work!

  22. Awesome work Christophe! This script really comes in handy; however, I’ve been running into a slight issue.

    My calulated column is used to link to a web part page that has a Query String (URL) Filter web part applied. The calculation is pulling the title of the item in the list and then when the user clicks on the link that is rendered via the script it takes them to the web part page and because of the filters I have applied, filters on the title of the original item.

    Everything works fine until the title contains an ampersand, at which point the user is taken to the web part page but nothing is rendered. Any ideas?

    Thanks in advance!

    • David, I think your issue is not linked to my script, but to the way querystrings work. The ampersand is a special character and you need to encode it before using it in a URL.

  23. Thank you so much for your informative posts. For some reason, the simple list I am using this on insists on displaying the (properly rendered) html code in the “Stoplight” column I’ve added. The IF statements work correctly, but I am still seeing the div tags and other HTML. I have added the 2.1.1 code directly into the source editor of a CEWP, positioned at the bottom of the page, but for some reason can’t get it to work.

    I’m sure it’s something really dumb, but this is driving me nuts… any ideas?

  24. Arggghhhh, I found it, somehow the first line under Preview pane views had been deleted. Thanks again for this AWESOME capability!

  25. Hiya,

    I’m having the same problem as Steve above where my text is not being converted when I use the Newsletter view style. I’m showing the calculated column in two places: the list (default view style) and as a Web part on the front page of my site (Newsletter style).

    The column appears as it should in the list view but the front page of my site is showing this:

    The front page has other Web parts (all using the default style) and these show the icons.

    The Boxed style does show the icon but I can’t use it because Web part has an item limit of 1; hence, it only takes half of the available space instead of filling the width of the Web part zone.

    In addition to this, the site I’m working on is a proof of concept that needs to be saved as a template. I want to avoid opening the page in SharePoint Designer and unghosting the page.

    Any ideas?

    • I have plans to expand the scope of the Text To HTML script (newsletter, grouping, etc.). However my current top priority is to make it work smoothly in SP 2010 (see my recent posts).

      As a side note, using SharePoint Designer to customize a page doesn’t necessarily mean unghosting it.

  26. A perfect solution! The html adjustments to the calculated field are showing nicely in webpart using the preview pane view.
    However, it does not seem to work any more once the webpart is connected to another webpart.
    Is there a solution to this?

    Many thanks in advance!

  27. Would it be possible to use this code on single-line and multi-line columns? I tried it and it worked like a charm on both column types in a list view, but as soon as I turn grouping on for the list view it starts acting up, it doesn’t display as a link until I expand the group, then expand a different grouping, then it turns into a link. Expanding all the groups is not an option because it takes forever to load when that is done.

    Thanks,
    Colin

  28. Is there any way to get this to work with grouped views? It seems like as soon as I add a Group By function to the view, it kills the HTML presentation. Does the Group By change how the item is viewed?

  29. Pingback: markwilson.it » Creating a dashboard using a SharePoint list (part 1): colour coded status indicators

  30. I tried all your instructions to use color coding to differentiate between approved and pending calendar items. Unfortunately only when it didnt work i realized your instructions were not for SP 2010 😦

    Any idea how i can make this work for SP 2010 Foundation?? Thanks!!

    • For techniques that apply to SP 2010…check out my posts from 2010!

      Or make the lists behave like they did in the previous version (for example no asynchronous load or auto-refresh).

  31. Christophe,

    This is great! However, in SharePoint 2010, the List Tools in the ribbon disappear. Do you have a workaround?

    Thanks!

Comments are closed.