How do we create dynamic url in Sharepoint 2010 Calculated field

Question

I am working on creating sharepoint dashboard using color coding. I have my custom list created and all of the traffic lights are working based on condition user provides. Following is the basic set up of my list

Program: Single Line Text              

Light 1: Calculated Field                Light1Link: Hyperlink

Light 2: Calculated Field                Light2Link: Hyperlink

Light 3: Calculated Field                Light3Link: Hyperlink

Light 4: Calculated Field                Light4Link: Hyperlink

Now is there a way that when user clicks on those individual lights will get directed to Hyperlink provided in Light1Link, Light2Link, ... Light4Link?

Edit:

To get color coding i have been using a javascript provided in pathtosharepoint.com very close to Sharepoint user ToolKit. Jussi can you please elaborate on you idea of modifying xsl. Just a reminder i am not trying to redirect a specific or a static url. It needs to get redirected according to user input in the fields Light1Link... Light4Link. Also the traffic lights are not an image file they are html. i.e i entered following piece of html in Calculated column named Tech Lights(KPI Lights)

="<DIV style='font-weight:bold; font-size:24px; color:"&[Tech]&";'>•</DIV>"

Which gives me Green light if Status of [Tech] column is Completed, Yellow IF [Tech} is In Progress, and Red if [Tech] is Not Started.

Answer 1

I believe the formula you're looking for is this:

="<a href='"&[Link]&"'><DIV style='font-weight:bold; font-size:24px; color:"&[Tech]&";'>•</DIV></a>"

Where [Link] is the name of the column containing your required link.

Answer 2

Depending on how you create the dashboard, can you modify the XSL of the the dashboard and make a small change to add link tags around the traffic light picture pointing to the hyperlink defined?

Answer 3

In your DIV tags (assuming that's the method you're using) creating the colors, include a unique class or ID name. Use some jQuery to grab all of your divs and wrap with a link. So following octopus example, if I take his and add a unique identifier

="<DIV style='font-weight:bold; font-size:24px; color:"&[Tech]&";' class="&[Tech]&">•</DIV>"

And using jquery you can do something like

$(".Completed").wrap("<a href='url'/>")
$(".InProgress").wrap("<a href='anotherUrl'/>")

or if you want them all to one URL, just give it a more generic class like

class="myLight"

and then one line to wrap the link

$(".myLight").wrap("<a href='url'/>")

Answer 4

Found this article. It solved my problem easy, no javascript at all.

Article

Make your formula i.e.

="<a href='"&[Link]&"'><DIV style='font-weight:bold; font-size:24px; color:"&[Tech]&";'>•</DIV></a>"

and set "The data type returned from this formula is: " to be i.e. number. VOILA

Worked for me.

Answer 5

If you want more flexibility, consider a computed field instead of a calculated field: http://www.threewill.com/2012/07/computed-fields-in-sp-2010/