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.
Pingback: The “HTML calculated column”: stay tuned! « Path to SharePoint
Pingback: Sneak peek: colored calendar « Path to SharePoint
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?
Or I could wait 5 minutes to figure it out..
Just added “=IF(NOT(ISBLANK”([Thumb_Loc])),”
Excellent post, thanks for sharing
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?
Great article! That is exactly what I was looking for 🙂 ! Thanx a lot!
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.
How do I implement this on a calendar?
For calendars, you cannot use div elements. Try to build a similar formula using span tags.
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:
for the color colum
for the display colum
Thanks a lot for any help
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.
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.
Trevor, there’s a calendar example on my blog:
So the answer is definitely yes.
However this technique has its limitations (no dynamic positioning of the hover window for example). You might be interested in more advanced techniques, search for “tooltip” in my blog and on endusersharepoint.com .
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):
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.
Sorry to be posting so late. You probably have already found this, but it not: