Autopopulate a SharePoint Form from URL
March 11th, 2010
 |
November 10, 2010 Update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). I’ll leave the original intact just in case someone wants it, but I would highly recommend checking out the new and improved way using SPUtility.js! |
|
August 20, 2010 Update: The code below has moved to be part of a bigger library… check out SPUtility.js on CodePlex! |
Original Post:
This post builds off of my previous post about making fields read only. In this case, I needed to autopopulate the NewForm.aspx with a value that gets passed to the form via URL parameters.
In this case, the URL that gets passed in is something like:
/Lists/ProjectTasks/NewForm.aspx?projectID=523
I wanted to take the ‘projectID’ URL parameter and autopopulate my Project ID field with this value.
Additionally, we will make this field Read Only so that they can’t change the value. Lastly, do this all without SharePoint designer or C# code.
Stick the following code in a Content Editor on your NewForm.aspx or EditForm.aspx. (Remember you can get to edit mode by appending ToolPaneView=2 on the end, like NewForm.aspx?ToolPaneView=2)
<script type="text/javascript" src="/_layouts/1033/prototype.js"></script>
<script type="text/javascript">
function CustomExecuteFunction() {
AutopopulateInputFromURL('Project ID','projectID');
}
function AutopopulateInputFromURL(title,queryParamName) {
var inputs = $$('input[title="' + title + '"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var queryParams = location.href.toQueryParams();
if (queryParams != null && queryParams[queryParamName] != null) {
input.setValue(queryParams[queryParamName]);
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
}
_spBodyOnLoadFunctionNames.push("CustomExecuteFunction");
</script>
<script type="text/javascript">
function CustomExecuteFunction() {
AutopopulateInputFromURL('Project ID','projectID');
}
function AutopopulateInputFromURL(title,queryParamName) {
var inputs = $$('input[title="' + title + '"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var queryParams = location.href.toQueryParams();
if (queryParams != null && queryParams[queryParamName] != null) {
input.setValue(queryParams[queryParamName]);
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
}
_spBodyOnLoadFunctionNames.push("CustomExecuteFunction");
</script>
Depends on Prototype.js.
June 23rd, 2010 at 1:41 am
Hi Thanks for your blog… But i can’t seem to have it work on my list
I wanted CandidateName to be autopopulate but i’m not quite sure if the link format i’m using is correct?
What I’m using
https://Site/Lists/Employee%20Documents/NewForm.aspx?CandidateName=123&Source=…
What it looks like when creating NewForm normal way, there is the RootFolder in the link..
https://Site/NewForm.aspx?RootFolder=%2Fsite%2FHR%2Frec%2FLists%2FEmployee%20Documents&Source=…
Appreciate all your help! Many thanks!
June 23rd, 2010 at 1:49 am
plus to add, do i have to rename something from the code? i just copy pasted the code. thanks!
June 23rd, 2010 at 8:52 am
Karen,
You will need to change the following line from:
AutopopulateInputFromURL('Project ID','projectID');to
AutopopulateInputFromURL('name of field as shown in the form','CandidateName');I’m thinking it will be:
Also, do you have Prototype.js? Currently, my code depends on Prototype. If you don’t have it on the server you can upload it to a document library and link to it from there (would change the first line:
<script type="text/javascript" src="/path/to/document library/prototype.js"></script>).Thanks,
Kit
June 23rd, 2010 at 8:01 pm
Thanks Kit, it worked! I haven’t downloaded the prototype.js that’s why (duh!)
What I’m trying to achieve is, instead of user attaching files inside infopath (because of size limitation and impact on performance), this link will direct them to a document library with pre-pouplated fields.
What about if I have more than one fields to prepopulate? what do I add to the script?
Thanks again!
June 23rd, 2010 at 9:40 pm
In order to populate multiple fields, you will simply call the AutopopulateInputFromURL function multiple times:
function CustomExecuteFunction() { AutopopulateInputFromURL('Project ID','projectID'); AutopopulateInputFromURL('Candidate Name','CandidateName'); AutopopulateInputFromURL('My Other Field','OtherFieldParam'); }June 25th, 2010 at 12:21 am
Thanks kit appreciate all your help:)
Just to share, when you want to do this and prepopulate document library metadata, place the paramater in the upload.aspx not on the editform.aspx (page where the metadata are captured)
this the link that i used for document library upload
https://<site>/<subsite>/_layouts/Upload.aspx?formID=HR10205-59&List=%7BD73D6170%2D498E%2D4352%2DA2F0%2D00474B726CE9%7D&RootFolder=%2FEmployeeDocs&Source=https://<site>/<subsite>/EmployeeDocs/Forms/AllItems.aspxThanks again!
June 25th, 2010 at 12:53 am
Hi again,
i noticed the functionality doesn’t works for users with contributor access to the site. does this work for admins only?!
June 25th, 2010 at 9:06 am
It should work for anyone who has access to the form. It doesn’t do any sort of security; just puts data into the field from the URL.
Can you describe how it doesn’t work? Or how you are using it?
August 7th, 2010 at 2:48 pm
Can this also set the value of select “drop down” menus?
August 8th, 2010 at 9:13 pm
@Shawn: Currently it will only work for textboxes. I’ll take a look and see if I can whip up something for dropdowns as well.
August 11th, 2010 at 11:52 am
Can this work for any other datatype other than text? For example date and time?
August 17th, 2010 at 10:22 pm
Nan,
I think this probably would work for a Date only field (not Date and Time). I’m currently working on a library that will be able to populate many more types of fields so look for it soon.
Thanks,
Kit
August 18th, 2010 at 1:58 pm
How will the querystring looklike if you have multiple fields to auto populate?
August 18th, 2010 at 3:44 pm
Mike,
Your URL will have a querystring that looks something like this:
Then your
CustomExecuteFunctionwill look something like this:AutopopulateInputFromURL('Project ID','projectID');
AutopopulateInputFromURL('Favorite Color','favoriteColor');
}
Keep in mind the first parameter to
AutopopulateInputFromURLis the name of your field as it looks in SharePoints user interface and the second parameter is the name of your query string variable (the variable in the URL).August 20th, 2010 at 2:43 am
Hi,
How can i do this:
“Stick the following code in a Content Editor on your NewForm.aspx or EditForm.aspx.”
when i put the javascript code in the newform.aspx , an xslt error apears
August 20th, 2010 at 8:38 am
Will,
After editing the page…
Thanks,
Kit
October 9th, 2010 at 8:29 am
Did you come up with a DropDown solution?
Tks
October 9th, 2010 at 9:45 am
Assuming you mean a single select choice field.. yes! Check out SPUtility.js.
November 10th, 2010 at 9:41 pm
[...] This post is the sequel to my first post: Autopopulate a SharePoint Form from URL. [...]
April 17th, 2012 at 8:50 am
I know I’m a bit (or to be accurate very!) late on this post, but if my URLs have the format http://sharepoint.abc.def/projects/123/… is there any way of getting the 123 out of the URL given it’s not referenced by an = sign as in your examples? The 123 is my project ID and I’d like it to automatically appear in a form that writes to a central list of projects.
Thanks , Chris
April 17th, 2012 at 10:33 am
Chris,
Definitely! You’ll need to change the code to parse location.href for your project’s ID. Maybe use a regular expression or split: location.href.split(‘/’).
Thanks,
Kit
May 10th, 2012 at 8:19 pm
“Just to share, when you want to do this and prepopulate document library metadata, place the paramater in the upload.aspx not on the editform.aspx (page where the metadata are captured)”
This is exactly what i’m trying to accomplish (pass parameters for uploading a document to document library), but I can’t edit the “/_layout/upload.aspx” as I’m not an admin. Any other way to do this? I’ve been working non-stop on this for a few days trying to do this OOTB.
I’ve seen a write-up that recreated the multiple document upload in a CEWP, but it doesn’t call the editform.aspx afterward to capture the parameters…..
May 11th, 2012 at 9:27 pm
Martin,
You will need to create a new link to the Upload.aspx page that passes your parameters. This means that you can’t use the out of the box upload button. Keep in mind, that you’ll need the default parameters that are passed to the page in addition to your custom one.. List, RootFolder, and Source.
The easiest way to get these, is just to click Upload like normal, copy the URL, and add your own URL parameter.
Thanks,
Kit