Using calculated columns to write scripts

Posted on by

In the past 6 months, I have proposed many examples using calculated columns to write HTML. If you are not familiar with this method, I strongly recommend that you first check out the post that started it all before reading the rest of this article.

Warning! This article doesn’t offer any plug and play example. Wait for my next article to see the method at work.

The HTML calculated column method has allowed us to include “div”, “a”, “img”, “iframe”,”table” and other tags in our formulas. Now, have you tried to use “script” tags? If it worked, this would open up a whole new world of opportunities!

Well, you sure can include “script” tags in your formulas, and like for the other tags the HTML calculated column method will convert them from text to actual HTML. However, there is a significant limitation: the script will be included in the page, but not executed, which makes this pretty much useless…

Fortunately, this issue is not new, and JavaScripters have come up with a workaround. Imagine you want to inject and run SomeJavaScriptCode in your Web page.
If we inject this:

<script type="text/javascript">SomeJavaScriptCode</script>

The script will not execute.

If now we inject this:

<img src="SomePicture.gif" onload="SomeJavaScriptCode" />

The browser will load SomePicture.gif, and then it will trigger the script attached to the onload event. Et voila! We have a method that allows us to write scripts in calculated columns and force the browser to run them. The trick is to use the onload event, an event that only works with some HTML tags like “body”, “iframe” and “img”.

Note: I have already used the onload event in some other posts, for example here, combined with an iframe.

The technique described in this post will open new possibilities to our “HTML calculated column”. I certainly don’t want to push this too far – we are talking about a workaround on top of another workaround – but it will come in handy to answer some simple requests. Well see an example in my next post.

14 thoughts on “Using calculated columns to write scripts”

  1. Pingback: Highlight rows in SharePoint lists « Path to SharePoint

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

  3. Pingback: WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! - Blog del CIIN

  4. Pingback: WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología…

  5. I have used your article to display list in another site – https://pathtosharepoint.wordpress.com/2009/01/22/a-simple-method-to-display-a-list-in-another-site/

    This works to perfectly to display the list – However I have calculated columns in the original list so color appears for 3 columns… when I add the javascript to the CEWP the color shows only the HTML code and not the color. I have also added the hidden cewp HTML to this page – any thoughts on how I can have the color appear as in the orginal list…. Thanks so much

    • That’s a tricky one… What you are experiencing is the expected behavior, as the script in the hidden cewp runs before the external list is loaded.
      What might work is to merge the two scripts, for example include the script for the HTML calculated column at the end of the DisplayThisList function.

      • Chris, What I ended up doing is Well after all my ranting!! I have finally used my nice new SPD webpart with conditional color codes and added to Site B as a Page Viewer – url and Bam!! Looks nice and updates as it should via Site A…..

      • Jake, I don’t see how this could be possible. If you are referring to the method described in this post, all the code is interpreted on the client, which knows nothing about asp.net.

  7. Actually I have to mess with this and your correct. Do you have any suggestions or a better way to present this webpart. Thanks very much…

  8. Fantastic tip. I found you can also use it to create buttons;

    
=CONCATENATE("<DIV><INPUT TYPE='button' NAME='myButton' VALUE='Press This' onClick='alert(",DoubleQUote,[ExampleColumn],DoubleQUote,")'></DIV>")

    where DoubleQuote is a calculated field equalling "

  9. the code is being display in the column and not the color. There is not unusual behaviour. Please do let me know abou the problem

  10. Pingback: Security concerns with the HTML Calculated Column « Path to SharePoint

Comments are closed.