A multi-value field column in a SharePoint list allows us to store multiple look-up ids. This is an alternative to creating a separate list that has a one-to-many association. For example, an invoice item that needs to be associated to one ore more time entries. For this example, we could define an invoice list with a lookup field that can hold multiple values.
When adding a new record to the list with JavaScript Client Object model, we must use an instance of SP.FieldLookUpValue for each lookup id that needs to be associated to a new record on the list. The following JavaScript snippet shows how a multi-value field can be set to one or many values:
- var context = SP.ClientContext.get_current();
- var web = context.get_web();
- // Get references to the lists we will use
- var tsList = web.get_lists().getByTitle('Invoice');
- var listInfo = new SP.ListItemCreationInformation();
- var tsItem = tsList.addItem(listInfo); //add new item
- var fields =['InvoiceNo','TimeEntries']; //fields to read and set
- $(fields).each(function(){
- var field = $("#"+this); //get reference to the control
- var fieldValue = field.val(); //get the value
- if (title =='Weeks'){
- var items = field.val(); //multi select listbox returns an array
- var timeEntries =[]; //array to store the lookup ids
- for(var idx=0;idx<items.length;idx++){
- var newField = new SP.FieldLookupValue(); //new lookup field instance
- newField.set_lookupId(items[idx]); //sets the lookup id
- timeEntries.push(newField); //add to the array
- }
- fieldValue =timeEntries;
- }
- tsItem.set_item(fieldName,fieldValue );
- });
- tsItem.update();
- context.executeQueryAsync( //post update
- Function.createDelegate(this, onSuccess),
- Function.createDelegate(this, onError));
We use a field array to define all the controls and fields that need to be processed. The HTML controls have their ids set to the field names. This allows us to map the controls to the fields. The IF statement is used to check for the field that has the multiple lookup values. When this field is encountered, we read the value of the Multi-Select list which returns an array of ids. For each id, we create a FieldLookupValue instance and set the lookup id using the set_lookupId method. Each FieldLookupValue is then pushed into the timeEntries array. The last step is to set the item value by calling set_item and passing the array of FieldLookupValues. The call to item.update() sets the query to execute. To post the changes, we call executeQueryAsync and pass the OnSuccess and OnError handler to validate that all went OK or if an error needs to be handled.
- function onSuccess(sender, args) {
- alert('Invoice was updated');
- }
- function onError(sender, args) {
- alert(args.get_message());
- }
Happy coding.
