Create A Basic SharePoint-Hosted Add-In By Using "Napa" Office 365 Development Tools

Introduction

In this article, we will learn how to create a basic SharePoint-hosted SharePoint add-in, using "Napa" Office 365 Development Tools.Sharepoint basic operations, which are used by JavaScript object model. If there are any changes, post your comments.

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

Click Create button.

Default .ASPX display, as shown above and App.Js file is shown below.

Change your code, which is based on your requirement.

Default ASPX is required to create a button to start the event.

Change the APP.js file with the code given below.

Now, click settings page to give the permission to this app.

Subsequently, publish your app.

Click Trust it option to deploy your app.

The list is created successfully.

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) {
createlist();
event.preventDefault();
});
});
function createlist() {
// Create a generic SharePoint list with the name that the user specifies.
var listCreationInfo = new SP.ListCreationInformation();
var listTitle = document.getElementById("ListOperations").value;
listCreationInfo.set_title(listTitle);
listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
lists = web.get_lists();
var newList = lists.add(listCreationInfo);
context.load(newList);
context.executeQueryAsync(onListCreationSuccess, onListCreationFail);
}
function onListCreationSuccess() {
alert('List Created Successfully');
}
function onListCreationFail(sender, args) {
alert('Failed to create the list. ' + args.get_message());
}
})();