Prepopulate fields in SharePoint with Querystring values via Jquery

What are you talking about?
Paul Grenier over at EndUserSharePoint discussed in length a lot of great stuff you can do with Jquery and SharePoint. This is one of the really cool things I used at a client:
This code is used to prepopulate values you put in the querystring into SharePoint fields. This is really useful for when you link to create an item, and need to have some default values filled in depending on the link. You click on the link and go to a page where some fields are allready filled in. This is also great to create linked items in SharePoint via RootFolder and ID fields.

So how does this work ?
1. Add the standard Jquery file to a document library on your site (you can also directly link to the ajax google file (http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/)
2. Add the script on the SharePoint page where you want to prepopulate the fields, like the new or edit form
3. Create a link to that page containing some querystring parameters.
IMPORTANT: the querystring parameters have to have the same name as the fields you want to prepopulate !!
For those non-techies: The link has to look like this: http://www.yoursite/page.aspx?parameter1=xxxx&parameter2=yyyy&parameter3=zzzz
All done, click on the link and watch the fields being prepopulated πŸ™‚

The script

/*
 * Prepopulate form fields in SharePoint
 * Copyright (c) 2008 Paul Grenier (endusersharepoint.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 */
(function(){
	var params = window.location.search.substring(1).split("&"),
		kv = {},
		opts,
		sp=/%20|\+/g,
		datetime=/([1-9]|0[1-9]|1[012])[\-\/.]([1-9]|0[1-9]|[12][0-9]|3[01])[\-\/.](19|20)\d\d\s([0-1][0-2]|[0-9]):([0-9]{2})\s(A|P)M/i,
		date=/([1-9]|0[1-9]|1[012])[\-\/.]([1-9]|0[1-9]|[12][0-9]|3[01])[\-\/.](19|20)\d\d/,
		clean = function(str){
			return str.replace(sp," ");
		},
		getKv = function(){
			$.each(params,function(i,e){
				var p=e.split("=");
				kv[p[0]]=decodeURIComponent(p[1]);
			});
			return kv;
		};
	jQuery.prepop = function(){
		$.each(getKv(),function(k,v){	
			k=clean(k);
			v=clean(v);
			var f=$("[title='"+k+"']"),
				job;
			if (f.length>0){
				if (f[0].type=="text"){job=10;} //text
				if (f[0].type=="checkbox"){job=20;} //checkbox
				if (f[0].tagName=="SPAN"&&f.hasClass("ms-RadioText")){job=30;} //radio
				if (f[0].type=="select-one"&&f[0].tagName=="SELECT"){job=10;} //choice and non-IE lookup
				if (f[0].tagName=="TEXTAREA"){job=10;} //textarea
				if (f[0].type=="text"&&f[0].opt=="_Select"){job=70;} //IE lookup
				if (v.match(date)){job=40;} //date
				if (v.match(datetime)){job=50;} //datetime
			}
			if (f.length===0){ 
				var elm = $("nobr:contains('"+k+"')");
				if (elm.length>0){
					elm = elm.parents("td").next()[0];
					var s1 = $(elm).find("select:first"),
						s2 = $(elm).find("select:last"),
						p1 = $(elm).find("textarea[title='People Picker']"),
						p2 = $(elm).find("div[title='People Picker']"),
						vals = v.split(",");
					if (s1.length>0){job=80;} //multi-select
					if (p1.length>0){job=90;} //people picker
				}
			}
			switch (job){
			case 10:
				if (v.substring(0,1)=="@"){
					opts = f[0].options;
					$.each(opts,function(i,e){
						if (opts[i].value==v.substring(1)){f[0].selectedIndex=i;}
					});
				}else{
					f.val(v);
				}
				break;
			case 20:
				if (v.toUpperCase()=="TRUE"||v=="1"){f[0].checked=true;}
				if (v.toUpperCase()=="FALSE"||v=="0"){f[0].checked=false;}
				break;
			case 30:
				if (v.toUpperCase()=="TRUE"||v=="1"){f.find("input:radio").click();}
				break;
			case 40:
				v=v.replace(/[\-\/.]/g,"/");
				f.val(v);
				break;
			case 50:
				var dt=v.split(" "),
					d=dt[0].replace(/[\-\/.]/g,"/"),
					t=dt[1],
					hm=t.split(":"),
					hh=hm[0].replace(/^0/,""),
					mm=hm[1],
					ap=dt[2].toUpperCase();
				f.val(d);
				f.parent("td").siblings("td.ms-dttimeinput")
					.find("select:first").val(hh+" "+ap)
					.parent("td").find("select:last").val(mm);		
				break;
			case 70:
				if (v.substring(0,1)=="@"){
					ShowDropdown(f[0].id);
					opts = $("#_Select")[0].options;
					$.each(opts,function(i,e){
						if (opts[i].value==v.substring(1)){$("#_Select")[0].selectedIndex=i;}
					});
					f.blur();
				}else{
					f.val(v);
					ShowDropdown(f[0].id);
					f.blur();
				}
				break;
			case 80:
				opts = s1[0].options;
				$.each(vals,function(i,e){
					var V=e;
					$.each(opts,function(i,e){
						if (opts[i].text==V){
							s2.append("<option value='"+opts&#91;i&#93;.value+"'>"+V+"</option>");
						}
						if (V.substring(0,1)=="@"){
							if (opts[i].value==V.substring(1)){
								s2.append("<option value='"+V+"'>"+opts[i].text+"</option>");
							}
						}
					});
				});
				break;
			case 90:
				var p=vals.join(";");
				p1.val(p);
				p2.html(p);
				break;
			//default:
			}
		});
	};
})();
$(function(){
	$.prepop();
});
</script>

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


4 thoughts on “Prepopulate fields in SharePoint with Querystring values via Jquery”

  1. Thank you – will give it a try. Ive been trying to get Infopath form to accept multiple prepopulated fields with no joy.

  2. Tried it and the result was unexpected. It returned a blank page. It wasn't even displaying the fields. Not sure what was going on.

Leave a Reply

%d bloggers like this: