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

0
123
views

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. function onsuccess() {
  13.     var results = list.get_title() + ‘Create success’// if success message will be rendered into html element
  14.     $(‘#results’).html(results);
  15. }
  16. function onfailed(sender, args) {
  17.     alert(‘Creation Failed’ + args.get_message() + ‘\n’ + args.get_stackTrace()); // If failed shows error message
  18. }

Full code

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

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

Final result

Sharepoint

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here