Introduction

This article introduces the creation of a SharePoint list using JQuery and SharePoint web services.

Requirement:

This is required when the client wants to customize their site and they don’t want to use the OOB options in SharePoint. So we can provide a custom page to create a SharePoint list using a custom dashboard.

Here I am providing a sample example in a SharePoint page.

Step 1: Open your SharePoint site and create a SharePoint Page in SitePages library

Step2: Download JQuery and Spservices reference files from source code of this article

Step3: Add above downloaded reference files to the created page and add the following code in body of the page.

Note: If you want more templates, please refer list given at end of this article.

  1. <p>Create SharePoint list using SPServices</p>
  2. <div>
  3. <table>
  4. <tr>
  5. <td>List Name:</td>
  6. <td><input type="text" id="txtListName" /></td>
  7. </tr>
  8. <tr>
  9. <td>Description:</td>
  10. <td><input type="text" id="txtListDesc" /></td>
  11. </tr>
  12. <tr>
  13. <td>Template:</td>
  14. <td>
  15. <select id="selTemplate">
  16. <option value="100">Custom List</option>
  17. <option value="101">Document Library</option>
  18. <option value="102">Survey</option>
  19. <option value="103">Links</option>
  20. <option value="104">Announcements</option>
  21. <option value="105">Contacts</option>
  22. <option value="106">Events</option>
  23. <option value="107">Tasks</option>
  24. <option value="108">Discussion Board</option>
  25. <option value="109">Picture Library</option>
  26. <option value="115">DForm Library</option>
  27. <option value="120">Custom List in Datasheet View</option>
  28. <option value="1100">Issues</option>
  29. <option value="110">DataSources</option>
  30. </select>
  31. </td>
  32. </tr>
  33. <tr>
  34. <td></td>
  35. <td><input type="button" id="btnCreate" value="Create List" /></td>
  36. </tr>
  37. </table>
  38. </div>
Step 4: Create a JavaScript file and write the following code,
  1. $(document).ready(function() {
  2. $('#btnCreate').click(function() {
  3. crateList();
  4. });
  5. });
  7. function crateList()
  8. {
  10. var strListName = $('#txtListName').val();
  11. var strListDesc = $('#txtListDesc').val();
  12. var strTemplate = $('#selTemplate').val();
  14. //alert('Welcome working');
  15. $().SPServices({
  16. operation: "AddList",
  17. async: false,
  18. listName: strListName,
  19. description: strListDesc,
  20. templateID: strTemplate,
  21. completefunc: function(xData, Status)
  22. {
  23. if (xData.status == 200)
  24. {
  25. alert(strListName + ' List created successfully');
  26. } else
  27. {
  28. alert(xData.status);
  29. alert(xData.responseText);
  30. }
  31. }
  32. });
  33. }
Step 5: Add above *.js file to the page and open the page in browser then the following screen will appear.

screen

Step 6: Enter List Name, Description and select the Template which you want to create as shown below.

Template

Step 7: Click on ‘Create List’ button.

button

Step 8: Go to site content and check there, you will find the new list which you have created.

columns

Step 9: Open the list and check the columns.

columns

This script can be used for SharePoint 2013 apps and mobile pages as well. It can be implemented from any external website or app also.

Please find the following are the List template Ids which I have provided in dropdown.

List template

Thanks for reading. Please comment below.