SharePoint Automatic prefilling of lookup fields in insert forms using JQuery

At my last project I was working on a SharePoint online solution and one of the requirements is to prefill some values at one of the insert forms for a list. Since this is SharePoint online and the only tool you can use to customize is SharePoint Designer I had to do this with JavaScript.

I’ll explain how to build it by an example. for example you have a list of customers and a list of customer actions. What I wanted to build was a way to make it easier to add a customer action for a specific customer. To do this I added a custom column to the customer list containing a link to the edit form with the customer id as an url variable. Of course the out of the box you can’t create links or any other html with calculated fields so I added more javascript there.

to enable html as output of a calculated field just copy this piece of javascript and put it in a content editor webpart or paste it on your master page.

var theTDs = document.getElementsByTagName("TD"); 

var i=0; 

var TDContent = " "; 

while (i < theTDs.length)

{ 

  try

  { 

    TDContent = theTDs[i].innerText || theTDs[i].textContent; 

    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0))

    { 

      theTDs[i].innerHTML = TDContent; 

    } 

  } 

  catch(err){} 

  i=i+1; 

} 

Thanks Marijn Somers for this piece of code. original source: http://marijnsomers.blogspot.com/2010/01/write-html-code-in-sharepoint-via.html

so now my calculated field was a link in html. what did my calculated field look like?

="<DIV><a href=’../../Lists/CustomerActions/NewForm.aspx?Customer="&[Customer ID]&"’>Add Customer Action</a></DIV>"

First a DIV element since the javascript above only replaces elements starting with a <DIV> to html, then just a plain html link to the NewForm.aspx sending the customer id as an url parameter.

 

So now the changes in the customer list are done and we only need to add some more javascript at the NewForm.aspx or again just at your masterpage to get the parameter from the url and selecting the right lookup field value at the form.

I’ve created the following code  using Jquery:

var customer = $.getUrlVar("Customer");

 

if(customer != "")

{

  $("input[title='Customer']").val(customer);

  

  $("select[title='Customer']").children("option").each(function() {

    if($(this).text() == customer)

    {

      $(this).attr('selected', 'selected'); 

    }

  });

}

My customer actions list contained a Customer field which is a lookup to the Customer list by Customer ID. The script above gets the Customer ID from the url parameters first and then tries to set the lookup item. SharePoint renders lookup items in 2 different ways. as a select box when there are less then +/- 25 items and as a auto complete textbox when there are more then 25 items in the lookup list. Because of that I firs try to set the textbox to the right value and after that the select. I’m using the title attribute to locate the right input field because it gets the same name as the field from SharePoint by itself.

Now when I open the newform.aspx?customer=1234 my customer lookup field is automatically prefilled with 1234

 

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter