Post
Ask Question

Create a List in SharePoint 2013 Online Using REST API

Default.aspx

Replace the contents of Default.aspx with the following:

  1. <%-- The markup and script in the following Content element will be placed in the <head>of the page --%>  
  2.   
  3.     <asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">  
  4.   
  5.         <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>  
  6.   
  7.         <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
  8.   
  9.         <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
  10.   
  11.         <!-- Add your CSS styles to the following file -->  
  12.   
  13.         <link rel="Stylesheet" type="text/css" href="../Content/App.css" />  
  14.   
  15.         <!-- Add your JavaScript to the following file -->  
  16.   
  17.         <script type="text/javascript" src="../Scripts/App.js"></script>  
  18.   
  19.     </asp:content>  
  20.   
  21.     <%-- The markup in the following Content element will be placed in the TitleArea of the page --%>  
  22.   
  23.         <asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">Page Title</asp:content>  
  24.   
  25.         <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>  
  26.   
  27.             <asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">REST API Examples</asp:content>  
  28.   
  29.             <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>  
  30.   
  31.                 <asp:content contentplaceholderid="PlaceHolderMain" runat="server">  
  32.   
  33.                     <div>  
  34.   
  35.                         <p>  
  36.   
  37.                             <b>Create List</b>  
  38.   
  39.                             <br />  
  40.   
  41.                             <input type="text" value="List Name Here" id="createlistname" />  
  42.   
  43.                             <button id="createlistbutton">Create List</button>  
  44.   
  45.                         </p>  
  46.   
  47.                     </div>  
  48.   
  49.                 </asp:content>  

App.js

Replace the contents of App.js with the following:'

  1. use strict ';  
  2.   
  3. var hostweburl;  
  4.   
  5. var appweburl;  
  6.   
  7. // Load the required SharePoint libraries.  
  8.   
  9. $(document).ready(function() {  
  10.   
  11.     //Get the URI decoded URLs.  
  12.   
  13.     hostweburl = decodeURIComponent(  
  14.   
  15.         getQueryStringParameter("SPHostUrl"));  
  16.   
  17.     appweburl = decodeURIComponent(  
  18.   
  19.         getQueryStringParameter("SPAppWebUrl"));  
  20.   
  21.     //Assign events to buttons  
  22.   
  23.     $("#createlistbutton").click(function(event) {  
  24.   
  25.         createList();  
  26.   
  27.         event.preventDefault();  
  28.   
  29.     });  
  30.   
  31.     // Resources are in URLs in the form:  
  32.   
  33.     // web_url/_layouts/15/resource  
  34.   
  35.     var scriptbase = hostweburl + "/_layouts/15/";  
  36.   
  37.     // Load the js file and continue to load the page with information about the list top level folders.  
  38.   
  39.     // SP.RequestExecutor.js to make cross-domain requests  
  40.   
  41.     $.getScript(scriptbase + "SP.RequestExecutor.js");  
  42.   
  43. });  
  44.   
  45. // Utilities  
  46.   
  47. // Retrieve a query string value.  
  48.   
  49. // For production purposes you may want to use a library to handle the query string.  
  50.   
  51. function getQueryStringParameter(paramToRetrieve) {  
  52.   
  53.     var params = document.URL.split("?")[1].split("&");  
  54.   
  55.     for (var i = 0; i < params.length; i = i + 1) {  
  56.   
  57.         var singleParam = params[i].split("=");  
  58.   
  59.         if (singleParam[0] == paramToRetrieve) return singleParam[1];  
  60.   
  61.     }  
  62.   
  63. }  
  64.   
  65. // Create a new custom list  
  66.   
  67. function createList() {  
  68.   
  69.     var listName = document.getElementById("createlistname").value;  
  70.   
  71.     var executor;  
  72.   
  73.     // Initialize the RequestExecutor with the app web URL.  
  74.   
  75.     // Content Type Header is used to tell server what format data in the body contains.  
  76.   
  77.     executor = new SP.RequestExecutor(appweburl);  
  78.   
  79.     executor.executeAsync({  
  80.   
  81.         url: appweburl + "/_api/SP.AppContextSite(@target)/web/Lists?@target='" + hostweburl + "'",  
  82.   
  83.         method: "POST",  
  84.   
  85.         body: "{ '__metadata': { 'type': 'SP.List' }, 'BaseTemplate': 100,'Description': '" + listName + "', 'Title':'" + listName + "'}",  
  86.   
  87.         headers: {  
  88.   
  89.             "content-type": "application/json; odata=verbose"  
  90.   
  91.         },  
  92.   
  93.         success: createListSuccessHandler,  
  94.   
  95.         error: createListErrorHandler  
  96.   
  97.     });  
  98.   
  99. }  
  100.   
  101. // Success Handler  
  102.   
  103. function createListSuccessHandler(data) {  
  104.   
  105.     alert("List Created successfully")  
  106.   
  107. }  
  108.   
  109. // Error Handler  
  110.   
  111. function createListErrorHandler(data, errorCode, errorMessage) {  
  112.   
  113.     alert("Could not create a new list: " + errorMessage);  
  114.   
  115. }