Events in HTML calculated columns

Posted on by

In this post I am going to show how to tweak the look of a contacts list using an HTML calculated column.

What makes a contacts list? Usually, you’ll first want to identify the right contact (name, role/responsibilities). Then you need a way to get in touch with him/her, usually through an e-mail address and a phone number. A picture will add a warm touch to the e-relationship you have started…

In my example I have chosen the following behavior:
– on page load, only the full name is displayed
– when hovering over the name, a pop-up displays the picture, the job title and the phone number
– a click allows me to send an e-mail to the contact

There are of course other technical approaches, for example you could use a grouping rule on your list to achieve a similar result. My purpose here is to demonstrate the use of events – in this case onmouseover and onmouseout – in my HTML calculated column.

The contacts list is the same as before. I have added a text column called “Photo” to host the photo URL (SharePoint wouldn’t let you use a column of type “hyperlink or picture” in a formula).

Here is the formula (ouch):
=”<DIV style=’white-space: nowrap; position: relative;’><a href=’mailto:”&[E-mail Address]&”‘ onMouseOver=’document.getElementById(“””&[E-mail Address]&”””).style.display=””””‘ onMouseOut=’document.getElementById(“””&[E-mail Address]&”””).style.display=””none””‘>”&[First Name]&” “&[Last Name]&”</a><DIV id='”&[E-mail Address]&”‘ style=’display:none;position: absolute; top:-20px; left:70px;background-color:navajowhite;border-width:thick;border-style:ridge;’><IMG src='”&Photo&”‘ /><br>Job title: “&[Job Title]&”<br>”&[Business Phone]&”</DIV></DIV>”

The same for copy/paste (triple click on the formula):

="<DIV style='white-space: nowrap; position: relative;'><a href='mailto:"&[E-mail Address]&"' onMouseOver='document.getElementById("""&[E-mail Address]&""").style.display=""""' onMouseOut='document.getElementById("""&[E-mail Address]&""").style.display=""none""'>"&[First Name]&" "&[Last Name]&"</a><DIV id='"&[E-mail Address]&"' style='display:none;position: absolute; top:-20px; left:70px;background-color:navajowhite;border-width:thick;border-style:ridge;'><IMG src='"&Photo&"' /><br>Job title: "&[Job Title]&"<br>"&[Business Phone]&"</DIV></DIV>"

Follow the usual procedure to make it work on a SharePoint page.

17 thoughts on “Events in HTML calculated columns”

  1. Pingback: The “HTML calculated column”: stay tuned! « Path to SharePoint

  2. Pingback: Sneak peek: colored calendar « Path to SharePoint

  3. Awesome! I’ve been looking for something like this for a while now. If I can figure out how to add an IF clause in there to only show the thumbnail preview when there is a URL entered for the graphic, then I’d really have something here. Can you help?

  6. I’d like to embed an object – specifically, run a flash file. Would I just throw the embed code into a div tag? Any ideas?

  8. I am trying to implement this, and I get a Formula contains a syntax error or is not supported error. My idea for what I am looking for is to have a List with links to useful sites, and when you mouse over the items, you get a pop-up with more information about that item, being pulled from another column. So I am actually looking for a more simplified version, and I am new to all of this stuff. I have used your HTML calculated column in my site and it rocks! BTW. any help would be greatly appreciated.

  10. I am trying to implement this on a MOSS german version, and I get a Formula contains a syntax error or is not supported error. Where do I have to change the formula?
    The color codind in the tutorial before works with the formulars:
    =WENN(ISTZAHL(FINDEN(“Manager”;[Job Title]));”red”;””)
    for the color colum
    =””&[Last Name]&””
    for the display colum
    Thanks a lot for any help
    Britta

    • Britta, I think you are referring to a different post? Anyway, make sure you have your commas and semi-colons right when you translate to a non-English version.

  11. Christophe, Loving your Color Calendar, worked first time without issues! Is there a way to produce this hover over or tooltip in a calendar view? I’m having trouble access some of the links but it doesn’t seem possible because the calendar already has an anchor. Sharepoint just spits back an error.

  12. Christophe, I have your color calendar working with basic HTML tooltips however the tooltips on the workshop calendar are what I’m really looking for (thanks for fixing the demo URLs):
    https://blog.pathtosharepoint.com/2009/09/04/a-workshop-calendar-loaded-with-demos/

    However, for some reason I can’t seem to find an actual download link for BeautyTips, they all direct me to the release notes, and no hints for installing etc. http://plugins.jquery.com/node/8225

    Do you have a posting for the building the workshop calendar? To say I’m a neophyte would be generous, but I’m a quick study.

    • Trevor, the instructions are not on my site, the demo was an ad for my workshop.
      I am soon going to start a new series of online workshops, if you’re interested.

Comments are closed.