Add multiple item in SharePoint List or Document Library using SPServices jQuery library in SharePoint
In a previous article, How to update item in SharePoint List or Document Library using SPServices jQuery library in SharePoint, we already explained about $().SPServices.UpdateListItems operation to access the listing of a folder.
For example, in SharePoint online site, we need to add the item to SharePoint List or Document library when the user clicks the button.
To implement above requirement, we cannot use the SharePoint server-side code, so we need to utilize the Client Side Scripting – JSOM/Call to SharePoint REST API using JQuery/Use of SPServices jQuery Library.
Now, we are going to explain how to insert the item in SharePoint List or Document Library using SPServices jQuery library in SharePoint. SPServices JavaScript Library ($().SPServices) provides function called UpdateListItems to add/update content in the SharePoint list.
1. Add item the SharePoint Document Library or List using $().SPServices.UpdateListItems operation with value pairs option:
var newItemID = null;
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "AmitKumar_TestList",
valuepairs: [["Title","Amit Kumar"]],
completefunc: function (xData, Status) {
console.log('List items has been added);
newItemID = $(xData.responseXML).SPFilterNode("z:row").attr("ows_ID");
}
});
In the above code block, we are not using updates attributes of "UpdateListItems" operation, instead of using valuepairs attribute to define the columns which need to be added.
We can define more than one columns in valuepairs attribute, it will serve as an array of columns:
valuepairs: [["Title", "Amit Kumar"], ["Technologies", ".NET, SharePoint, AngularJS"]]
2. Insert new item in SharePoint Document Library or List using $().SPServices.UpdateListItems operation with CAML query:
var newItemID = null;
var camlQuery = "<Batch OnError='Continue' >" +
"<Method ID='1' Cmd='New'>" +
"<Field Name='FSObjType'>0</Field>" +
"<Field Name='Title'>Amit Kumar -1</Field>" +
"<Field Name='Topic'>SharePoint</Field>" +
"</Method>" +
"</Batch>";
$().SPServices({
operation: "UpdateListItems",
async: false,
listName: "AmitKumar_TestList",
batchCmd: "New",
updates: camlQuery ,
completefunc: function(xData, Status) {
console.log('List items has been updated');
newItemID = $(xData.responseXML).SPFilterNode("z:row").attr("ows_ID");
}
});
In the above code block, we are using updates attributes of "UpdateListItems" operation to insert a new item in SharePoint Online List or Library.
3. Insert multiple items in SharePoint Document Library or List using $().SPServices.UpdateListItems operation with CAML query:
Sometimes, we required to insert multiple items in one shot then also, we can utilize $().SPServices.UpdateListItems
//--Sample of creating array of rows--::Start::------------//
var objArrColumns = [];
var objArrRows = [];
//---First Row Details :: Start::------------//
var objColumnDetails = new Object();
//--Title column details
objColumnDetails.FieldName = "Title";
objColumnDetails.FieldValue = "Amit Kumar";
objArrColumns.push(objColumnDetails); //--Add details to column array
//--Category column details
objColumnDetails = null;
objColumnDetails = new Object();
objColumnDetails.FieldName = "Category";
objColumnDetails.FieldValue = "SharePoint";
objArrColumns.push(objColumnDetails);//--Add details to column array
objArrRows.push(objArrColumns)//--Add details to Row array
//---First Row Details :: End::------------//
//---Second Row Details :: Start::------------//
objArrColumns = null;
objArrColumns = [];
//--Title column details
objColumnDetails = null;
objColumnDetails = new Object();
objColumnDetails.FieldName = "Title";
objColumnDetails.FieldValue = "Amit Kumar1";
objArrColumns.push(objColumnDetails); //--Add details to column array
//--Category column details
objColumnDetails = null;
objColumnDetails = new Object();
objColumnDetails.FieldName = "Category";
objColumnDetails.FieldValue = "AngularJS";
objArrColumns.push(objColumnDetails);//--Add details to column array
objArrRows.push(objArrColumns)//--Add details to Row array
//---Second Row Details :: End::------------//
//--Sample of creating array of rows--::Start::------------//
var camlQuery = "<Batch OnError='Continue'>";
for(var i=0;i<objArrRows.length;i++)
{
camlQuery += "<Method ID='" + (i + 1) + "' Cmd='" + "New" + "'>";
for( j=0;j<objArrRows[i].length;j++)
{
console.log(objArrRows[i][j].FieldName + "***" + objArrRows[i][j].FieldValue)
camlQuery += " <Field Name='" + objArrRows[i][j].FieldName +"'>" + objArrRows[i][j].FieldValue + "</Field>";
}
camlQuery += "</Method>";
}
camlQuery += "</Batch>";
//-- Output would be
//camlQuery = "<Batch OnError='Continue'><Method ID='1' Cmd='New'> <Field Name='Title'>Amit Kumar</Field> <Field Name='Category'>SharePoint</Field></Method><Method ID='2' Cmd='New'> <Field Name='Title'>Amit Kumar1</Field> <Field Name='Category'>AngularJS</Field></Method></Batch>";
//--In simple way
/*
var camlQuery ="<Batch OnError='Continue'>" +
"<Method ID='1' Cmd='New'>" +
"<Field Name='Title'>Amit Kumar</Field>"+
"<Field Name='Category'>SharePoint</Field>" +
"</Method>" +
"<Method ID='2' Cmd='New'>" +
"<Field Name='Title'>Amit Kumar1</Field>"+
"<Field Name='Category'>AngularJS</Field>" +
"</Method>" +
"</Batch>";
*/
function AddMultipleItems (){
var objPromise = $().SPServices({
operation: "UpdateListItems",
async: false,
listName: "AmitKumar_TestList",
updates: camlQuery ,
});
return objPromise;
}
With the help of above functions, you can insert multiple items into SharePoint list or document library using SPServices JavaScript library.