Create And Delete SharePoint List Using JSOM (JavaScript Object Model) In SharePoint Online

Open SharePoint Designer.

Create .HTML file under SiteAssets folder.

Sharepoint

Add the necessary scripts into top of HTML file to create a SharePoint list.

Add one text input box to get the list title and add one input button to create an action.

Sharepoint
Let's add some piece of code to create a list

Scripts 

  1. <script src="_layouts/15/sp.runtime.js" type="text/javascript"></script>  
  2. <script src="_layouts/15/sp.js" type="text/javascript"></script>  
  3. <script src=" /SiteAssets/JS/CRUD list.js" type="text/javas   

HTML 

  1. <div id="form">  
  2.     <table>  
  3.         <tr>  
  4.             <td>  
  5.                 <p>Enter List Name</p>  
  6.             </td>  
  7.             <td> <input type="text" id="txtlistname" /> </td>  
  8.         </tr>  
  9.         <tr>  
  10.             <td> <input type="button" id="btncreate" value="submit" /> </td>  
  11.         </tr>  
  12.     </table>  
  13. </div>  
  14. <div id="results"></div>   

CreateList.js

Create a function named btncreate.

Note 

Using this function, I will get the value of the list name from HTML input box on button click event.

Now, pass the list value into another function CreateList.

Code 

  1. function btncreate()  
  2. {  
  3.     $('#btncreate').on("click"function() {  
  4.         var listValue = $('#txtlistname').val();  
  5.         CreateList(listValue);  
  6.     });  
  7. }   

Code 

  1. function CreateList(listValue)  
  2. {  
  3.     var context = new SP.ClientContext() // Get the site collection from the context  
  4.     var web = context.get_web(); // Get all the list properties  
  5.     var listcreation = new SP.ListCreationInformation(); // Used for create a list  
  6.     listcreation.set_title(listValue); // get the title of the list  
  7.     listcreation.set_templateType(SP.ListTemplateType.genericList) // Provide the template for list ex:announcement, task in this scenario used genericlistproperty  
  8.     this.list = web.get_lists().add(listcreation); // Create a list using web property  
  9.     context.load(list); // load the values into the site context  
  10.     context.executeQueryAsync(Function.createDelegate(thisthis.onsuccess), Function.createDelegate(thisthis.onfailed));  
  11. }  
  12.   
  13. function onsuccess() {  
  14.     var results = list.get_title() + 'Create success'// if success message will be rendered into html element  
  15.     $('#results').html(results);  
  16. }  
  17.   
  18. function onfailed(sender, args) {  
  19.     alert('Creation Failed' + args.get_message() + '\n' + args.get_stackTrace()); // If failed shows error message  
  20. }   

Full code 

  1. $(function() {  
  2.     btncreate();  
  3. });  
  4.   
  5. function btncreate() {  
  6.     $('#btncreate').on("click"function() {  
  7.         var listValue = $('#txtlistname').val();  
  8.         CreateList(listValue);  
  9.     });  
  10. }  
  11.   
  12. function CreateList(listValue) {  
  13.     var context = new SP.ClientContext()  
  14.     var web = context.get_web();  
  15.     var listcreation = new SP.ListCreationInformation();  
  16.     listcreation.set_title(listValue);  
  17.     listcreation.set_templateType(SP.ListTemplateType.genericList)  
  18.     this.list = web.get_lists().add(listcreation);  
  19.     context.load(list);  
  20.     context.executeQueryAsync(Function.createDelegate(thisthis.onsuccess), Function.createDelegate(thisthis.onfailed));  
  21. }  
  22.   
  23. function onsuccess() {  
  24.     var results = list.get_title() + 'Create success';  
  25.     $('#results').html(results);  
  26. }  
  27.   
  28. function onfailed(sender, args) {  
  29.     alert('Creation Failed' + args.get_message() + '\n' + args.get_stackTrace());  
  30. }   

Final Result

Sharepoint

Sharepoint

Now, let’s go and delete a created SharePoint list.

Delete a list, using JSOM.

HTML 

  1. <div id="form">  
  2.     <table>  
  3.         <tr>  
  4.             <td>  
  5.                 <p>Enter List Name</p>  
  6.             </td>  
  7.             <td> <input type="text" id="txtlistname" /> </td>  
  8.         </tr>  
  9.         <tr>  
  10.             <td> <input type="button" id="btncreate" value="submit" /> <input type="button" id="btndelete" value="delete" /> </td>  
  11.         </tr>  
  12.     </table>  
  13. </div>  
  14. <div id="results"></div>   

Scripts 

  1. <script src="_layouts/15/sp.runtime.js" type="text/javascript"></script>  
  2. <script src="_layouts/15/sp.js" type="text/javascript"></script>  
  3. <script src=" SiteAssets/JS/DeleteList.js" type="text/javascript"></script>   

DeleteList.js 

  1. $(function() {  
  2.     btndelete()  
  3. });  
  4.   
  5. function btndelete() {  
  6.     $('#btndelete').on("click"function() {  
  7.         var listValue = $('#txtlistname').val();  
  8.         DeleteList(listValue);  
  9.     });  
  10. }  
  11.   
  12. function DeleteList(listValue) {  
  13.     var context = new SP.ClientContext();  
  14.     var web = context.get_web();  
  15.     this.list = web.get_lists().getByTitle(listValue);  
  16.     list.deleteObject(); // Delete the created list from the site  
  17.     context.executeQueryAsync(Function.createDelegate(thisthis.ondeletesuccess), Function.createDelegate(thisthis.ondeletefailed));  
  18. }  
  19.   
  20. function ondeletesuccess() {  
  21.     $('#results').html("List deleted successfully"); // on success bind the results in HTML code  
  22. }  
  23.   
  24. function ondeletefailed(sender, args) {  
  25.     alert('Delete Failed' + args.get_message() + '\n' + args.get_stackTrace()); // display the errot details if deletion failed  
  26. }   

Final result



Sharepoint

Up Next
    Ebook Download
    View all
    Learn
    View all