Prefilling an image URL on NewForm.aspx, with limited toolset

Question

WSS 3.0, MOSS 2007 - no access to SP Designer in production - as you can see, my hands are tied, and limited to web parts to make it work.

I know how to turn the newform.aspx into a web part page (the old adding "PageView=Shared&ToolPaneView=2" to the URL), and have seen some examples using SPFF and jQuery that are close, but...

I have a custom list, with a text field called "Project Number".  The end user will always be putting an image named projectnumber.gif into a picture library called ProjectImages.

I would like to have a column of type "Hyperlink or Picture" where it will have "format url as: picture".  Since URL is not a calculatable (is that a word?) column, they would be required to always type in the full path to the file.

I would like to be able to hide the field, and have the URL self created based upon (if formulas were allowed) the following:

="http://spnet/sites/etcom/ProjectImages/"&[Project Number]&".jpg"

The reason I need this as a hyperlink column, and don't just use a text column, is so the image shows in the preview pane view of a list.

I am a site owner, and know how to use CEWP's, etc, and have many that I have filled with html, javascript, jQuery, etc, but am not versed in those languages - I can cut and paste, and do some light tweaking.

One other tidbit - I do have access to a DEV site where I can use SP Designer as a last resort, and save the list as a templet, and copy up to PRD - but that usually gets ugly.

Thanks!!

Answer 1

Not sure if you have resolved this already, but here's what you can do.

1. Create a calculated column of type single line text field
2. In this calculated column, create your dynamic url to the image. I think this should work "=CONCATENATE('<your url to image library>',[Project Number],'.jpg')"

Now in your list or form view, you should have an appropriate link to the project image. I believe you need to show the image instead of showing the link to the image. In this case, you can use Christoph's solution from the following post.

http://pathtosharepoint.wordpress.com/2008/09/01/using-calculated-columns-to-write-html/

Basically, you'll make the above field hidden and create another calculated column with HTML code for showing image. In that calculated column, you can refer to the dynamic url that you create above. Or, you can do it all in one place. Then, simply put christoph's javascript code on that page using a CEWP.

Answer 2

I received the following in another forum just a day or to ago.  I had used your solution as an interim step, so thank you very much!!!

Props out to ken_le who provided the following through endusersharepoint.com's Stump the Panel forum:

Here's a snippet of code using the jPoint and jQuery libraries to do exactly what you want. Paste this into a CEWP on your NewForm.aspx

<script type="text/javascript" src="//sharejpoint.googlecode.com/files/jPointLoader-0.6-expanded.js" ></script>
<script>
$(document).ready(function(){
	var ImgUrlField = "ProjectPict";
	var ImgNameField = "ProjectNumber";
	var ImgLibUrl = "http://spnet/sites/etcom/ProjectImages/";
	//initialize
	jP.Form.readForm();
	//hide image url field
	jP.Form[ImgUrlField].hide();
	//add blur event to image name field
	//on blur update image url field
	$(jP.Form[ImgNameField].Item).find("input").blur(function(){
		var imgfile = jP.Form[ImgNameField].val();
		var imgurl = ImgLibUrl+imgfile+".jpg";
		jP.Form[ImgUrlField].val([imgurl,imgurl])
	});

});
</script>

See http://jpoint.codeplex.com for more info.