Introduction

In this article, we will learn how to delete a basic SharePoint-hosted SharePoint Add-in by using Napa Office 365 Development Tools. Sharepoint basic operations are used by JavaScript Object Model here. If there are any changes, post your comments here.

Develop the project using the following method in NAPA Tool.

Prerequisite

The following are important steps to be done before creating the app.

Basic and important things we want to know ,

Creating, updating, and deleting lists through the Client Object Model works similar to the Server Object Model using .NET Framework (CSOM,SSOM), but the operations do not complete until you call the executeQueryAsync (succeededCallback, failedCallback) function.

SharePoint 2013 introduces a NAPA tool service that is comparable with the existing SharePoint Client Object Models. We can use NAPA Tool to perform Create, Read, Update, and Delete (CRUD) operations from their apps for SharePoint.

By following this article, you can learn how to create a simple SharePoint-hosted SharePoint Add-in by using Napa. The add-in that you’ll create includes controls and code for managing lists and list items.

Choose the kind of add-in you want to create, name the project, and then choose the Create button.


Napa is a tool that you can use to create SharePoint-hosted SharePoint Add-ins.

We can't create a PHA (Provider Hosted APP) using NAPA tool.

Click the Create Button,


Default .aspx display like above the pic and App.Js file like,

You could add more .js files and add code to it instead of to the existing file.


Chane your code based on your requirement here,

Default aspx create Button to start this event,


Change the APP.js file with below code,

Then Click settings page to give permission to this app


Then, publish your app.


Choose the "Click here to launch your add-in in a new window" link.


Click "Trust it" option to deploy your app here. After a few seconds, your login window will popup and ask for your credentials .

Enter your credentials and click OK.




List is deleted successfully.

Here, if you want to delete a list, call the deleteObject() function in your code .

Default aspx page code

  1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  2. <div id="starter"> <input type="text" value="List name here" id="ListOperations"/><button id="createlistbutton">ListOperations</button> <p> Lists
  3. </div></asp:Content>

Source code

  1. 'use strict';
  3. var context = SP.ClientContext.get_current();
  4. var user = context.get_web().get_currentUser();
  5. var web = context.get_web();
  6. var lists = web.get_lists();
  7. var listItemCollection; // This variable is used later when you add list items.
  9. (function () {
  11. // This code runs when the DOM is ready and creates a context object which is
  12. // needed to use the SharePoint object model.
  13. $(document).ready(function () {
  15. $("#createlistbutton").click(function (event) {
  16. DeleteListItem();
  17. event.preventDefault();
  18. });
  19. });
  20. function deleteListItem() {
  21. var oList = web.get_lists().getByTitle('TaskList');
  22. this.ListItem = oList.getItemById(3);
  23. ListItem.set_item('Title', 'NewTask');
  24. ListItem.deleteObject();
  25. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  26. }
  27. function onQuerySucceeded() {
  28. alert('Item deleted!');
  29. }function onQueryFailed(sender, args) {
  30. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  31. }
  32. })();