Update A List Item In SharePoint-Hosted Add-In By Using Napa Office 365 Development Tools And JSOM

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.

Develop the project using the following method in the NAPA Tool.

• On your Developer Site, open the "Napa" Office 365 Development Tools and then choose "Add New Project".
• Choose the app for SharePoint template, name the project, create Site and then click the "Create" button.
• Replace APP.js with the source code given in the zip file.
• Publish your app.

Prerequisites

• The following are important steps to be done before creating the app.
• Specify the permissions that your app needs as in the following.
• Choose the "Properties" button at the bottom of the page.
• In the "Properties" window, choose "Permissions".
• In the "Content" category, set the "Write" permissions for the Tenant scope.
• In the "Social" category, set the "Read" permissions for the 'User Profiles" scope.
• Close the "Properties" window.

SharePoint 2013 introduces a NAPA tool service that is comparable to the existing SharePoint client object models. We can use NAPA tools 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 click 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 displays like the above and App.Js file looks like it. You could add more .js files and add code to it instead of replacing the existing file.

Change your code based on your requirement. 

Change the APP.js file with the below code and then click "Settings" page to give permission to this app.

Publish your app.

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

Click "Trust it" option to deploy your app here.

Default aspx page code 

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

Source code 

'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var web = context.get_web();
var lists = web.get_lists();
var listItemCollection; // This variable is used later when you add list items.
(function() {
    // This code runs when the DOM is ready and creates a context object which is
    // needed to use the SharePoint object model.
    $(document).ready(function() {
        $("#createlistbutton").click(function(event) {
            updateListItem();
            event.preventDefault();
        });
    });

    function updateListItem() {
        var oList = web.get_lists().getByTitle('Test');
        this.ListItem = oList.getItemById(3);
        ListItem.set_item('Title', 'My Updated Title');
        ListItem.update();
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded() {
        alert('Item updated!');
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
})();