Populate Files With Checked Out Status Using JSOM In SharePoint

This article shows you how to list out the files from the top folder of the library with the checkout status of each files and to whom the document is checked out.

To do this, we will pass the list name as a parameter to the script.

  • Create an HTML structure.
  • Load the jQuery file. Some methods from jQuery used to generate the result in table format.
  • ExecuteOrDelayUntilScriptLoadedmethod initiate the call of JavaScript method to intiate the call to the server.
  • Get the List object based on list name using SP.Web.get_lists().get_ByTitle(<list name>).
  • Get the root folder of the list SP.List.get_rootFolder().
  • Get the files from root folder using SP.Folder.get_files().
  • Specify the following properties to retrieve the information about files.

    Property Description
    Name Name of the file.
    CheckOutType Returns the SP.CheckOutType enumeration value that specifies the type of checkout.
    CheckedOutByUser Returns the user, who checked out the file.

  • In the success method, generate the table with results.

    The type of file check out has either of the following three values,

    Value Description
    0 - Online The file checked out the server for editing.
    1 - Offline The file check-out to local computer for editing. We can edit the file in local and saved back to server later.
    2 - None The file not check-out.

HTML Snippet

  1. <!-- Style required for HTML Snippet -->  
  2. < style type = "text/css" >  
  3.     .lst - table th  
  4.     {  
  5.         background - color: #ddd;  
  6.         border: 2 px solid# fff;  
  7.         text - align: left  
  8.     }  
  9.     .lst - table td  
  10.     {  
  11.         background - color: #eee;  
  12.         border: 2 px solid# fff;  
  13.     }  
  14.     .web - heading  
  15.     {  
  16.         padding: 2 px;  
  17.     } < /style>  
  18.     <!--Include jQuery library to perform dynamic html dom manipulation -->  
  19.     < script type = "text/javascript" src = "/siteassets/jquery.js" > < /script> < div >  
  20.     < h2 class = "web-heading" > Files with checked - out Status < /h2> < div id = "fldrUrl" > < /div> < /div> < table width = "100%"  
  21.         cellpadding = "10"  
  22.         cellspacing = "2"  
  23.         id = "lstTable"  
  24.         class = "lst-table" >  
  25.     < thead >  
  26.     < tr >  
  27.     < th > File Name < /th> < th > Checked - out Status < /th> < th > Checked - out By < /th> < /tr> < /thead> < tbody > < /tbody> < /table>  
JavaScript Snippet
  1. <script type="text/javascript">  
  2.     functiongetcheckoutStatus(listname)  
  3. {  
  4.         varclientContext = SP.ClientContext.get_current();  
  5.         if (clientContext != undefined && clientContext != null)   
  6.         {  
  7.             varwebSite = clientContext.get_web();  
  8.             this.list = webSite.get_lists().getByTitle(listname);  
  9.             this.folder = this.list.get_rootFolder();  
  10.             this.files = this.folder.get_files();  
  11.             clientContext.load(this.folder);  
  12.             clientContext.load(this.files, 'Include(CheckOutType,Name,CheckedOutByUser)');  
  13.             clientContext.executeQueryAsync(Function.createDelegate(thisthis.OnLoadSuccess), Function.createDelegate(thisthis.OnLoadFailed));  
  14.         }  
  15.     }  
  16.   
  17.     functionOnLoadSuccess(sender, args)  
  18.     {  
  19.         varfilesEnumerator = this.files.getEnumerator();  
  20.         $('#fldrUrl').html("Folder URL: " + _spPageContextInfo.webAbsoluteUrl + this.folder.get_serverRelativeUrl());  
  21.         while (filesEnumerator.moveNext())  
  22.         {  
  23.             varcurrentFile = filesEnumerator.get_current();  
  24.             vartrow = "";  
  25.             trow += "<tr>";  
  26.             trow += "<td>" + currentFile.get_name() + "</td>";  
  27.             if (currentFile.get_checkOutType() < 2)   
  28.             {  
  29.                 trow += "<td>" + currentFile.get_checkOutType() + " - Yes" + "</td>";  
  30.                 trow += "<td>" + currentFile.get_checkedOutByUser().get_title() + "</td>";  
  31.             } else {  
  32.                 trow += "<td>" + currentFile.get_checkOutType() + " - No" + "</td>"  
  33.                 trow += "<td></td>";  
  34.             }  
  35.             trow += "</tr>";  
  36.             //Append each list to the table as a row   
  37.             $("#lstTabletbody").append(trow);  
  38.         }  
  39.     }  
  40.   
  41.     functionOnLoadFailed(sender, args)   
  42.     {  
  43.         try   
  44.         {  
  45.             console.log('Error: ' + args.get_message() + '\n' + args.get_stackTrace());  
  46.         } catch (err) {}  
  47.   
  48.     }  
  49.     functioninjectMethod()  
  50.     {  
  51.         getcheckoutStatus("Site Pages");  
  52.     }  
  53.     ExecuteOrDelayUntilScriptLoaded(injectMethod, "sp.js");  
  54. </script>  
Add the snippet to the content editor as I mentioned in this article. Either you can also try the code in SharePoint add-in to get the following result.

Output:

Output

Enjoy the exploring of new possibilities. 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now