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(this, this.onsuccess), Function.createDelegate(this, this.onfailed));
  11. }
  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. }
  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. });
  5. function btncreate() {
  6. $('#btncreate').on("click", function() {
  7. var listValue = $('#txtlistname').val();
  8. CreateList(listValue);
  9. });
  10. }
  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(this, this.onsuccess), Function.createDelegate(this, this.onfailed));
  21. }
  23. function onsuccess() {
  24. var results = list.get_title() + 'Create success';
  25. $('#results').html(results);
  26. }
  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. });
  5. function btndelete() {
  6. $('#btndelete').on("click", function() {
  7. var listValue = $('#txtlistname').val();
  8. DeleteList(listValue);
  9. });
  10. }
  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(this, this.ondeletesuccess), Function.createDelegate(this, this.ondeletefailed));
  18. }
  20. function ondeletesuccess() {
  21. $('#results').html("List deleted successfully"); // on success bind the results in HTML code
  22. }
  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