Defaulting Values in a Multi-Lookup Form in SharePoint

This was a question asked on the MSDN Forums but I thought it was worthy of a blog post as I could get more in depth with the explanation and show some pretty pictures (plus the fact I’ve never done it so thought it would be fun).

The problem was a user wanted to default multiple values in a lookup field in SharePoint. First problem, there are no defaults in a lookup field. Second problem, how do you do default multiple values?

First we’ll start with the setup. Create yourself a list which will hold the lookup values. In this case it’s a list of country names but it can be anything you want. Just a custom list with the Title field is enough.

Now we need a list with a lookup column to select our countries from. Create another custom list and add a column to it that looks something like this. Here’s the name and type:

And here’s the additional column settings where we get our information from (MultiLookupDefaultSpikeSource is the name of the list we created to hold our values)

Here’s what our form looks like when we add a new item:

Thinking about the problem I first though we could manipulate the form in SharePoint Designer but realized that the Form Web Part is going to retrieve all of our values from the list, defaults, etc. and really what we need to do is manipulate the list at runtime in the DOM.

It’s jQuery to the RESCUE!

First we take a look at the original state of the form to find our list boxes. Here’s the snippet we’re interested in, the first listbox:

 <select   
 name="ctl00$m$g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate"   
 title="Country possible values"   
 id="ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate"   
 style="width: 143px; height: 125px; overflow: scroll;"   
 ondblclick="GipAddSelectedItems(ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false"   
 onchange="GipSelectCandidateItems(ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);"   
 multiple="multiple">   
 <OPTION title=Africa selected value=5>Africa</OPTION>   
 <OPTION title=Asia value=1>Asia</OPTION>   
 <OPTION title=Europe value=3>Europe</OPTION>   
 <OPTION title=India value=4>India</OPTION>   
 <OPTION title=Ireland value=6>Ireland</OPTION>   
 <OPTION title=Singapore value=2>Singapore</OPTION>   
 </select>  

We can see that it has an ID that ends in “_SelectCandidate” so we’ll use this for selection.

Another part of the puzzle is a hidden set of fields that store the actual values used in the list. There are three of them and they’re well documented in a blog post here by Marc Anderson on SharePoint Magazine. In it he talks about multiselect columns and breaks down the three hidden fields used (the current set of values, the complete set of values, and the default values).

The second listbox looks like this:

 <select   
 name="ctl00$m$g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$ctl00$SelectResult"   
 title="Country selected values"   
 id="ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_SelectResult"   
 style="width: 143px; height: 125px; overflow: scroll;"   
 ondblclick="GipRemoveSelectedItems(ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" \   
 onchange="GipSelectResultItems(ctl00_m_g_478fe6d2_8fdb_48e8_be57_7739de1c3b8f_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);"   
 multiple="multiple">  

Easy enough. It has an ID that contains “_SelectResult”.

Now a quick jQuery primer when selecting items:

• $("[id='foo']"); // id equals 'foo'
• $("[id!='foo']") // id does not equal 'foo'
• $("[id^='foo']") // id starts with 'foo'
• $("[id$='foo']") // id ends with 'foo'
• $("[id*='foo']") // id contains 'foo'

Simple. We want to find the control that ends with “_SelectCandidate” and remove some items, then find the control that ends with “_SelectResult” and append our selected items.

So a few lines of heavily commented JavaScript:

 $(document).ready(function(){  
   // define the items to add to the results (i.e already selected) this the visual part only   
   var $resultOptions = "<OPTION title=Africa value=5>Africa</OPTION><OPTION title=India value=4>India</OPTION><OPTION title=Ireland value=6>Ireland</OPTION>";   
   // this is the list of initial items (matching the ones above) that are used when the item is saved   
   var $resultSpOptions = "5|tAfrica|t4|tIndia|t6|tIreland";   
   // find the possible values control   
   var possibleValues = $("[id$='_SelectCandidate']");  
   // remove 1st option (Africa)   
   $("[id$='_SelectCandidate'] option:eq(0)").remove();  
   // remove 3rd option (India)   
   $("[id$='_SelectCandidate'] option:eq(2)").remove();  
   // remove 3rd option (Ireland)   
   $("[id$='_SelectCandidate'] option:eq(2)").remove();  
   // set selected value to asia (value 1)   
   possibleValues.val(1)  
   // append the new options to our results (this updates the display only of the second list box)   
   $("[id$='_SelectResult']").append($resultOptions);  
   // append the new options to our hidden field (this sets the values into the list item when saving)   
   $("[id$='MultiLookupPicker']").val($resultSpOptions);   
 });  

SharePoint 2010 supports editing NewForm.aspx (and the other out-of-the-box forms) in the browser. One option is to modify the list and under advanced settings you can disable “Launch forms in a dialog”. This will launch the form like a regular web page. However that’s 3 or 4 steps and you have to go back and change it when you’re done.

Instead just visit the new form directly:

http://sitename/listname/NewForm.aspx

From this page select Site Actions | Edit Page. Now you can add a Content Editor Web Part to the page. When adding JavaScript I point the Content Link to the .js file (that I upload somewhere like Style Library or the Assets library if you have one) rather than trying to put JavaScript into the Content Editor Web Part. This way a) I can edit the JavaScript outside of the page by loading it up in SharePoint Designer or even upload a new .js file to the library and b) I can debug the JavaScript independently of the NewForm.aspx page (or whatever page I’m adding the .js file to)

The result:

When you save the record, the three default options are saved as well (this was set by the JavaScript).

Hope that helps!