CRUD Operations Using SPServices (Update Operation)

SPServices is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful capabilities. It works entirely client side and requires no server install.

SPServices can be used with SharePoint 2007, 2010, and 2013, whether on premises or hosted with Office365 or others. SPServices is primarily hosted on Codeplex, with this repository mirroring most of the downloads there. With Codeplex shutting down, any new activity will happen on the NEW Github-backed site. Check out the newer location (http://sympmarc.github.io/SPServices/) for SPServices information on Github pages.

We can perform Create, Read, Update, Delete operations easily using SPServices. Let us go through one by one.

In my earlier post, we have discussed about Create Operation. Now, we will discuss about Update operation.

Basic Preparations

List Creation

We have created a custom list name "EmployeeMaster" in Sharepoint having Columns "Title", "First Name", "Last Name", "Employee ID", "Date of Joining".

Now on page we have added references of jquery and spservices files.

<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="../Scripts/jquery.SPServices-2014.02.min.js"></script>

Next, we have added some CSS.

<style type="text/css">
 table thead th,
 table tbody tr td
 {
  border:thin gray dotted;
 }
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

1. UPDATE (Update existing record of list)

For this, first we create a page having a table showing existing records and 5 boxes for load the value of record that needs to update and a button to submit the data.

For this we have added html as below-

<div id="dvResult">
 <table id="tblResult">
 </table>
</div>
<div>
 <table>
  <tr style="display:none">
   <td>
    ID
   </td>
   <td>
    <input type="text" id="txtID" title="ID">
   </td>
  </tr>
  <tr>
   <td>
    Title
   </td>
   <td>
    <input type="text" id="txtTitle" title="Title">
   </td>
  </tr>
  <tr>
   <td>
    First Name
   </td>
   <td>
    <input type="text" id="txtFirstName" title="First Name">
   </td>
  </tr>
  <tr>
   <td>
    Last Name
   </td>
   <td>
    <input type="text" id="txtLastName" title="Last Name">
   </td>
  </tr>
  <tr>
   <td>
    Employee ID
   </td>
   <td>
    <input type="text" id="txtEmployeeID" title="Employee ID">
   </td>
  </tr>
  <tr>
   <td>
    Date of Joining
   </td>
   <td>
    <input type="text" id="txtDOJ" title="Date of Joining">
   </td>
  </tr>
  <tr>
   <td colspan="2" align="center">
    <input type="button" id="btnSubmit" title="Submit" value="Submit" onclick="UpdateRecord();">
   </td>
  </tr>
 </table>
</div>

Now we have added 3 functions
1. GetRecords - To get and display all the records of list
2. LoadSingleRecord - To load single record in boxes when clicked on Edit button
3. UpdateRecord - To update the edited record back in list

<script type="text/javascript">
 $(document).ready(function()
 {
  $("#txtDOJ").datepicker();
 });

 $(document).ready(function()
 {
  GetRecords();
 });

 function GetRecords()
 {
  $().SPServices(
  {
   operation: "GetListItems",
   webURL: $(this).attr('location').origin,
   async: false,
   listName: "EmployeeMaster",
   completefunc: function (xData, Status)
   {
    if(Status == 'success')
    {
     var vrTableHTML = '';

     vrTableHTML += '<thead>' + 
          '<th>' + 'First Name' + '</th>' + 
          '<th>' + 'Last Name' + '</th>' + 
          '<th>' + 'Employee ID' + '</th>' + 
          '<th>' + 'Date Of Joining' + '</th>' + 
          '<th>' + 'Edit' + '</th>' + 
         '</thead>';

     vrTableHTML += '<tbody>';
     $(xData.responseXML).SPFilterNode("z:row").each(function()
     {debugger;
      vrTableHTML += '<tr>' + 
           '<td>' + $(this).attr("ows_First_x0020_Name") + '</td>' + 
           '<td>' + $(this).attr("ows_Last_x0020_Name") + '</td>' + 
           '<td>' + $(this).attr("ows_Employee_x0020_ID") + '</td>' + 
           '<td>' + ($(this).attr("ows_Date_x0020_Of_x0020_Joining")).split(' ')[0] + '</td>' + 
           '<td>' + '<input type="button" id="btnEdit" title="Edit" value="Edit" onclick="LoadSingleRecord(' + $(this).attr("ows_ID") + ');">' + '</td>' + 
          '</tr>';
     });
     vrTableHTML += '</tbody>';
     $('#tblResult').html(vrTableHTML);
    }
    else
    {
    }
   }
  });
 }

 function LoadSingleRecord(itemID)
 {
  $().SPServices(
  {
   operation: "GetListItems",
   webURL: $(this).attr('location').origin,
   async: false,
   listName: "EmployeeMaster",
   CAMLQuery: "<Query>" +
       "<Where>" +
        "<Eq>" +
         "<FieldRef Name=\"ID\" />" +
         "<Value Type=\"Counter\">" + itemID + "</Value>" +
        "</Eq>" +
       "</Where>" +
      "</Query>",
   completefunc: function (xData, Status)
   {
    if(Status == 'success')
    {
     $(xData.responseXML).SPFilterNode("z:row").each(function()
     {
      $('#txtID').val($(this).attr("ows_ID"));
      $('#txtTitle').val($(this).attr("ows_Title"));
      $('#txtFirstName').val($(this).attr("ows_First_x0020_Name"));
      $('#txtLastName').val($(this).attr("ows_Last_x0020_Name"));
      $('#txtEmployeeID').val($(this).attr("ows_Employee_x0020_ID"));
      $('#txtDOJ').val(formatDateMMDDYYYY($(this).attr("ows_Date_x0020_Of_x0020_Joining")));
     });
    }
    else
    {
    }
   }
  });
 }

 function UpdateRecord()
 {
  var vrID = $('#txtID').val();
  var vrTitle = $('#txtTitle').val();
  var vrFirstName = $('#txtFirstName').val();
  var vrLastName = $('#txtLastName').val();
  var vrEmployeeID = $('#txtEmployeeID').val();
  var vrDOJ = formatDate(new Date($('#txtDOJ').val()));

  $().SPServices(
  {
   operation: "UpdateListItems",
   webURL: $(this).attr('location').origin,
   async: false,
   batchCmd: "Update",
   listName: "EmployeeMaster",
   ID: vrID,
   valuepairs: [
       ["Title", vrTitle],
       ["First_x0020_Name", vrFirstName],
       ["Last_x0020_Name", vrLastName],
       ["Employee_x0020_ID", vrEmployeeID],
       ["Date_x0020_Of_x0020_Joining", vrDOJ]
      ],

   completefunc: function (xData, Status)
   {
    if(Status == "success")
    {
     alert("Record Updated Successfully");
     GetRecords();
    }
    else
    {
     alert("Error");
    }
   }
  });
 }
 
 function formatDate(date)
 {
  var d = new Date(date),
  month = '' + (d.getMonth() + 1),
  day = '' + d.getDate(),
  year = d.getFullYear();
  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  return [year, month, day].join('-');
 }
 
 function formatDateMMDDYYYY(date)
 {
  var d = new Date(date),
  month = '' + (d.getMonth() + 1),
  day = '' + d.getDate(),
  year = d.getFullYear();
  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  return [month, day, year].join('/');
 }
</script>

Let's start the process. Load the page and click on Edit button displaying ahead of any record.

We had updated Employee ID of this record.

Now click on Submit button. The record will get updated in list and the list will be refreshed on UI.