Post
Ask Question

How to Get All the Top Level Folders From the List in SharePoint 2013 Online Using REST API

In this article you will see how to get all the top-level folders from the list using the REST API in SharePoint 2013 Online.

Introduction:

SharePoint 2013 introduces a Representational State Transfer (REST) service that is comparable to the existing SharePoint client object models. This allows the developers to interact remotely with SharePoint data by using any technology that supports REST web requests. This means that developers can perform Create, Read, Update and Delete (CRUD) operations from their apps for SharePoint solutions and client applications, using REST web technologies and standard Open Data Protocol (OData) syntax. In this article you will see the following:

  • Create an app using the NAPA Tool in SharePoint 2013 Online.
  • Cross-Domain Requests.
  • Get all the top level folders from the list using the REST API.

Endpoint URI:

http://sitename/_api/web/Lists/Getbytitle('documents')/rootfolder/folders

Note: If you are making cross-domain requests then you need to add SP.AppContextSite(@target) and ?@target='<host web url>' to the endpoint URI.

HTTP Request:

GET: Read a Resource.

Create an app using the NAPA Tool:

  1. Navigate to the SharePoint 2013 Online site.
  2. Click on Site Contents in the quick launch bar.
  3. Click on “Napa” Office 365 Development Tools.

  4. Click on Add New Project.

  5. Select App for SharePoint, enter the Project name and then click on Create.

Permissions

Ensure appropriate permission is provided to access the content. Click on the Properties button then click on Permissions. Set the required permission to access the content.


Default.aspx

Replace the contenst of Default.aspx with the following:

  1. <%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>  
  2. <%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>  
  3. <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  4. <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  5. <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  6.   
  7. <%-- The markup and script in the following Content element will be placed in the <head>of the page --%>  
  8. <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  
  9. <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>  
  10. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
  11. <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
  12. <!-- Add your CSS styles to the following file -->  
  13. <link rel="Stylesheet" type="text/css" href="../Content/App.css" />  
  14. <!-- Add your JavaScript to the following file -->  
  15. <script type="text/javascript" src="../Scripts/App.js"></script>  
  16. </asp:Content>  
  17. <%-- The markup in the following Content element will be placed in the TitleArea of the page --%>  
  18. <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">Page Title</asp:Content>  
  19. <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>  
  20. <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">REST API Examples</asp:Content>  
  21. <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>  
  22. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
  23. <div>  
  24. <p>  
  25. <b>Documents: Top Level Folders</b>  
  26. <br />  
  27. <select style="height:300px; width:310px" multiple="multiple" id="selectTopLevelFolders"></select>  
  28. </p>  
  29. </div>  
  30. </asp:Content> 

 

App.js

Replace the contenst of App.js with the following:

  1. 'use strict';  
  2.   
  3. var hostweburl;  
  4. var appweburl;  
  5.   
  6. // Load the required SharePoint libraries.  
  7. $(document).ready(function() {  
  8.   
  9. //Get the URI decoded URLs.  
  10. hostweburl = decodeURIComponent(  
  11. getQueryStringParameter("SPHostUrl"));  
  12. appweburl = decodeURIComponent(  
  13. getQueryStringParameter("SPAppWebUrl"));  
  14.   
  15. // Resources are in URLs in the form:  
  16. // web_url/_layouts/15/resource  
  17. var scriptbase = hostweburl + "/_layouts/15/";  
  18.   
  19. // Load the js file and continue to load the page with information about the list top level folders.  
  20. // SP.RequestExecutor.js to make cross-domain requests  
  21. $.getScript(scriptbase + "SP.RequestExecutor.js", loadPage);  
  22. });  
  23.   
  24. // Utilities  
  25. // Retrieve a query string value.  
  26. // For production purposes you may want to use a library to handle the query string.  
  27. function getQueryStringParameter(paramToRetrieve) {  
  28. var params = document.URL.split("?")[1].split("&");  
  29. for (var i = 0; i < params.length; i = i + 1) {  
  30. var singleParam = params[i].split("=");  
  31. if (singleParam[0] == paramToRetrieve) return singleParam[1];  
  32. }  
  33. }  
  34.   
  35. function loadPage() {  
  36. getListTopLevelFolders();  
  37. }  
  38.   
  39. //Retrieve all of the top level folders from list  
  40. function getListTopLevelFolders() {  
  41. var executor;  
  42.   
  43. // Initialize the RequestExecutor with the app web URL.  
  44. executor = new SP.RequestExecutor(appweburl);  
  45.   
  46. executor.executeAsync({  
  47. url: appweburl + "/_api/SP.AppContextSite(@target)/web/Lists/Getbytitle('documents')/rootfolder/folders?@target='" + hostweburl + "'",  
  48. method: "GET",  
  49. headers: {  
  50. "Accept": "application/json; odata=verbose"  
  51. },  
  52. success: getTopLevelFoldersSuccessHandler,  
  53. error: getTopLevelFoldersErrorHandler  
  54. });  
  55. }  
  56.   
  57. //Populate the selectTopLevelFolders control after retrieving all of the top level folders from list.  
  58. function getTopLevelFoldersSuccessHandler(data) {  
  59. var jsonObject = JSON.parse(data.body);  
  60. var selectTopLevelFolders = document.getElementById("selectTopLevelFolders");  
  61.   
  62. if (selectTopLevelFolders.hasChildNodes()) {  
  63. while (selectTopLevelFolders.childNodes.length >= 1) {  
  64. selectTopLevelFolders.removeChild(selectTopLevelFolders.firstChild);  
  65. }  
  66. }  
  67.   
  68. var results = jsonObject.d.results;  
  69. for (var i = 0; i < results.length; i++) {  
  70. var selectOption = document.createElement("option");  
  71. selectOption.value = results[i].Name;  
  72. selectOption.innerText = results[i].Name;  
  73. selectTopLevelFolders.appendChild(selectOption);  
  74. }  
  75. }  
  76.   
  77. function getTopLevelFoldersErrorHandler(data, errorCode, errorMessage) {  
  78. alert("Could not get the top level folders from list: " + errorMessage);  
  79. } 

Deploy the App

  1. Click on Run Project.


  2. The app will be packaged, deployed and launched.



  3. Click on “Click here to launch your app in a new window”.

  4. Click on Trust it.

  5. All top level folders from the list are displayed.

Summary:

Thus in this article you saw how to get all the top level folders from the list using the REST API in SharePoint 2013 Online.


Similar Articles