SharePoint Multiselect Choice field Saving using PnPjs

Question

I want to save multi-select drop-down in SharePoint field. I already referred few results in this site.

Choice values in SharePoint : Test1, Test2, Test3, Test4, Test5.

From the custom drop-down choice field user will select multiple values I want to save the data in multi-select choice field in SharePoint list.

Now am getting results as:

var testvalue="'Test1','Test2'";

$pnp.sp.web.lists.getByTitle("TestList").items.add({
    Testchoicefield:{results:[testvalue]},
    LastModifiedByDisplayName:_DisplayUserName,
    LastModifiedByUserId:_CurrentUserID,
    LastModifiedOn:_modifiedon
}).then(function(resultdata) {
    idvalue = resultdata.data.Id;
    ShowMsgaddupdate("Data Saved Successfully", "", "Ok");

But am not able to save the item. Its throwing error.

Can you please help me?

Answer 1

You are passing Choices array in wrong way.

You can create your choices array as given below:

var choicesArray = ["Test1", "Test2"];

Then pass it in the items.add() function as:

$pnp.sp.web.lists.getByTitle("TestList").items.add({
    Testchoicefield: { results: choicesArray },
    LastModifiedByDisplayName: _DisplayUserName,
    LastModifiedByUserId: _CurrentUserID,
    LastModifiedOn: _modifiedon
}).then(function (resultdata) {
    idvalue = resultdata.data.Id;
    ShowMsgaddupdate("Data Saved Successfully", "", "Ok");
});

Answer 2

Set multiple value choice field as array like this:

 public render(): void {
        pnp.sp.web.lists.getByTitle("Jerry").items.add({
          Title: "NewAddedTitle",
          MultipleChoice: {
            results: [ 'Enter Choice #1', 'Enter Choice #2' ]
          }
      }).then(result => {
        console.log(result);
    });
  }

Answer 3

Using REST API:

function PublishDocument() {
      var CompName=[];
      var Template = $('#dd-Template').val();
            $("input:checkbox[name=CompanyName]:checked").each(function() { 
                var CompName1 = $(this).val(); 
                CompName.push(CompName1);
            });                         
                    var item = {  
                        "__metadata": {  
                            "type": 'SP.Data.TransactionListListItem'
                        },  
                           "Template": Template,
                           "Comp": {
                            results:[''+CompName+'']
                           }
                       };    
                    $.ajax({  
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TransactionList')/items",  
                    method: "POST",  
                    contentType: "application/json;odata=verbose",  
                    data: JSON.stringify(item),  
                    async: false,  
                    headers: {  
                        "Accept": "application/json;odata=verbose",  
                        "X-RequestDigest": $("#__REQUESTDIGEST").val() 
                    },  
                    success: function(data) {  
                        //alert('Published Successfully'); 
                        $("#PublishResult").html("Published Successfully !!!");
                        setTimeout(function () {
                            window.location.reload();
                        }, 200);    
                    },  
                    error: function(jqXHR, textStatus, errorThrown) {  
                        console.log(jqXHR.responseText);
                        alert('Error');  
                    }  
                }); 
    }//func

Answer 4

Fyi to anyone who's using the latest version of PnP Js (3+) - you no longer need the results property on a sub object - you can now just update the field as a string array directly, like this:

 private async onButtonClick(): Promise<void> {
        await pnp.sp.web.lists.getByTitle("MyListName").items.add({
          Title: "NewAddedTitle",
          MultipleChoice: [ 'Choice #1', 'Choice #2' ]
      });
  }