Creating New Multi-Lookup Values from Custom Forms

I was working with a client where they wanted to add a new Multi-Lookup value on the New Item form. This will be a customized new item form that will add a link to popup a new item of that multi-lookup value. SPServices has something that will add the SPLookup (http://spservices.codeplex.com/wikipage?title=$().SPServices.SPLookupAddNew&referringTitle=Documentation), but wasn’t verified for SharePoint 2013 and had caveats for 2010, so I was unsure about the solution. I read some blogs that show you how to explicitly add a new lookup value, using the following format:

|t<ID>|t<LOOKUPVALUE>|t

where <ID> = the ID of the lookup item and <LOOKUPVALUE> = the lookup value/text of the item

The tricky part to this is that there are <select> tags and <input> tags that are hidden that you need to add and remove, this will force you to reinvent the wheel of adding and removing the option from the two panel display:

 

I think I was tackling it from a different angle, so I just used the refresh and with HTML5, you have the ability to use localStorage. localStorage is used for what cookies previously was used for in the prior versions. You can write and store key/value pairs that will stay with the browser even after you close the browser out (much like a cookie). So I think it may be easier to capture the values of the form, and reinsert the values whenever the new item is added and the form is refreshed.

<script type=”text/javascript” src=”../../Style Library/js/jquery-1.11.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(“input[id$=’TextField’]”).filter(“input[title=’Name’]”).val(localStorage.getItem(‘name’));
$(“input[id$=’TextField’]”).filter(“input[title=’Address’]”).val(localStorage.getItem(‘address’));
$(“input[id$=’TextField’]”).filter(“input[title=’Address 2′]”).val(localStorage.getItem(‘address2′));
$(“input[id$=’TextField’]”).filter(“input[title=’City’]”).val(localStorage.getItem(‘city’));

localStorage.removeItem(‘name’);
localStorage.removeItem(‘address’);
localStorage.removeItem(‘address2’);
localStorage.removeItem(‘city’);

});

function AddNewRig()
{

OpenPopUpPage(‘/../../Lists/<List>/NewForm.aspx?IsDlg=1′,  AddItemRefresh);
}

function AddItemRefresh()

{

var name = $(“input[id$=’TextField’]”).filter(“input[title=’Name’]”).val();
var address = $(“input[id$=’TextField’]”).filter(“input[title=’Address’]”).val();
var address2 = $(“input[id$=’TextField’]”).filter(“input[title=’Address 2′]”).val();
var city = $(“input[id$=’TextField’]”).filter(“input[title=’City’]”).val();
localStorage.setItem(“name”, name );
localStorage.setItem(“address”, address);
localStorage.setItem(“address2”, address2 );
localStorage.setItem(“city”, city);
location.reload();

}

</script>

 

Basically, upon loading the form, it will look for the localstorage keys, then set the form values for each textbox/control. You then delete the keys so that it doesn’t conflict with any other applications that use it. SharePoint will handle the loading of the Multi-lookup control with the new item that the user just created, so whenever you refresh the page, the form will load the Item you just added while retaining any information that the user previously put inside the form. A new key/value pair will have to be set/get/deleted for each column or field in the form.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s