Autopopulate a SharePoint Form from URL

March 11th, 2010

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>

Depends on Prototype.js.

Filed in JavaScript, SharePoint 2007 (Tags: , , , )
16 Comments »

16 Responses to “Autopopulate a SharePoint Form from URL”

  1. Karen Says:
    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!

  2. Karen Says:
    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!

  3. Kit Says:
    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:

    AutopopulateInputFromURL('Candidate Name','CandidateName');

    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

  4. Karen Says:
    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!

  5. Kit Says:
    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');
}
  6. Karen Says:
    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.aspx

    Thanks again!

  7. Karen Says:
    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?!

  8. Kit Says:
    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?

  9. Shawn Says:
    August 7th, 2010 at 2:48 pm

    Can this also set the value of select “drop down” menus?

  10. Kit Says:
    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.

  11. Nan Says:
    August 11th, 2010 at 11:52 am

    Can this work for any other datatype other than text?  For example date and time?

  12. Kit Says:
    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

  13. MikeD Says:
    August 18th, 2010 at 1:58 pm

    How will the querystring looklike if you have multiple fields to auto populate?

  14. Kit Says:
    August 18th, 2010 at 3:44 pm

    Mike,
    Your URL will have a querystring that looks something like this:

    /Lists/ProjectTasks/NewForm.aspx?projectID=523&favoriteColor=Red

    Then your CustomExecuteFunction will look something like this:

    function CustomExecuteFunction() {
        AutopopulateInputFromURL('Project ID','projectID');
        AutopopulateInputFromURL('Favorite Color','favoriteColor');
    }

    Keep in mind the first parameter to AutopopulateInputFromURL is 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).

  15. will Says:
    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

  16. Kit Says:
    August 20th, 2010 at 8:38 am

    Will,
    After editing the page…

    1. Add a “Content Editor Web Part”
    2. Click Edit -> Modify Shared Web Part
    3. Click Source Editor
    4. Paste in your JavaScript

    Thanks,
    Kit

Leave a Reply