Check-in and Check-out Functionality For Custom List Items in SharePoint 2013 Using jQuery

Introduction

This article explains how to create check-in and check-out functionality for custom list items in SharePoint 2013 using jQuery.

Prerequisites

1. Ensure you have a SharePoint site.

Scenario

• Check in check out functionality for SharePoint list items and not for the Document Library.

Use the following procedure.

1. Create a custom list called called Test.
   
   
   
   
2. Add a field called "CheckInOut" and type to be "Choice field".
   
   
   
   
3. Now add one more field named “CheckedOutTo” and type to be “Single line of text”.
   
   
   
   
4. The basic idea of adding these two fields is to keep track of which user has checked out an item. If the radio button is set to “Check –out” then add the current logged in user name to the CheckedOutTo field or else keep it blank.
5. When the user edits an item check if the current logged in user name matches the CheckedOutTo field if the value matches then allow the user to edit the item else redirect the user to a different page.
6. Now navigate to the NewForm.aspx page.
7. Syntax: http://yoursitecollection/Lists/ListName/NewForm.aspx
   
   In our example : http://yoursitecollection/Lists/Test/NewForm.aspx
    
8. Go to settings and edit the page.
   
   
    
9. Click on Add a Webpart and add Content Editor Webpart.
   
   
    
10. Now add a reference to jQuery JavaScript Library v1.8.3 and SPServices - Version 0.7.2 jQuery file.
    

    <script type="text/javascript" src="/ sites/Devsite /SPServices.0.7.2.js"></script>
    <script type="text/javascript" src="/sites/Devsite/jqueryv1.8.3.js"></script>

11. Now add the following lines of code:
    

    <script type="text/javascript">
    var loggedInUser="";
     $(document).ready(function(){
    
         document.getElementById('CheckedOutTo_667b31de-b921-4c15-a1bf-7c1fab11441d_$TextField').disabled = true;
         var checkInOutValue=$('[name="CheckInOut_7203a35b-610b-4a6e-8a84-2e3c867f1541_$RadioButtonChoiceField"]:radio:checked').val();
         var checkedOutToValue=document.getElementById('CheckedOutTo_667b31de-b921-4c15-a1bf-7c1fab11441d_$TextField').value;
         var thisUsersValues = $().SPServices.SPGetCurrentUser({
             fieldNames: ["Name", "Title"],
             debug: false
         });
         loggedInUser=thisUsersValues.Title;
         if(checkInOutValue=="Check-Out")
         {
             if(loggedInUser!=checkedOutToValue)
             {
    //if the user doesn’t belong to the CheckedOutTo field then don’t allow the //user to edit an item .instead redirect the user to allitems.aspx page
                 $('[name="CheckInOut_7203a35b-610b-4a6e-8a84-2e3c867f1541_$RadioButtonChoiceField"]').prop('disabled',true);
                 alert("This item is checked out to: "+checkedOutToValue+". You will not be able to edit this item.");
                 window.location.href="/yoursitecollection/Lists/Test/AllItems.aspx";
             }
         }
         radioButtonChange();
    
     });
    
     function radioButtonChange()
     {
    
         $('#CheckInOut_7203a35b-610b-4a6e-8a84-2e3c867f1541_ChoiceRadioTable').change(
             function(){
                 var checkInOutValue=$('[name="CheckInOut_7203a35b-610b-4a6e-8a84-2e3c867f1541_$RadioButtonChoiceField"]:radio:checked').val();
         if(checkInOutValue=="Check-Out")
         {
             document.getElementById('CheckedOutTo_667b31de-b921-4c15-a1bf-7c1fab11441d_$TextField').value=loggedInUser;
         }
         else if(checkInOutValue=="Check-In")
         {
            document.getElementById('CheckedOutTo_667b31de-b921-4c15-a1bf-7c1fab11441d_$TextField').value="";
         }
    });

12. Note add the preceding lines of code to EditForm.aspx as well.
13. That's It. Now let's start testing.

Testing

1. Click on New item and add the data and set the CheckInOut field to Check-Out and click on the “Save” button.
   
   
   
   
2. Now log-in with a different account and try to open the same item. You will not be able to edit the item.
   
   
   

Summary

Thus in this article you saw how to create check-in and check-out functionality for custom list items in SharePoint 2013 using jQuery.