Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.
So today I was trying to work out how to create a web part connection using pictures in one list and linking that to text in another list. Ohh and all this without having to create a custom web part!
First I tried adding a picture column to the first list, and creating the connection on various areas of the picture. No such luck.
Next I decided that I was going to have to write some code, but wanted to be able to get other people to do this as well without having to fire up Visual Studio, so I investigated a Form Web Part.
The way this works is that we upload our pictures into a library. We then need to configure the Form Web Part to use these pictures as Hyperlinks. Some JavaScript is then run to set a hidden text field to a predefined value based on the image clicked on, and finally the connection provides the data from the hidden field to a column in the other list.
Here is the code
<!-- Start JavaScript -->
<script type="text/javascript">
//Function to tell the page to set a hidden textbox (Resource Type) to value
//"Applications" and then posting it to SharePoint.
//The value in the textbox will be used to filter the
//list that the web part is connected to
function application1()
{
document.getElementById("Resource Type").value = "Application";
_SFSUBMIT_;
}
function tool1()
document.getElementById("Resource Type").value = "Tools";
</script>
<!-- set up a hidden textbox that will be used to hold the -->
<!-- filter data for the web par connection -->
<p><input name="Resource Type" id="Resource Type" type="hidden" /></p>
<!-- set up a hyperlink of a picture that when clicked on -->
<!-- will run the javascript to set the custom field type -->
<!-- for the web part connection -->
<a href="javascript:application1()">
<img alt="Applications" src="/applications.jpg" /></a><br />
<a href="javascript:tool1()"><img alt="Tools" src="/applications.jpg" /></a>
Remember Me
