CRUD Operations using JavaScript in SharePoint-Hosted Add-in (Web)

Below are the steps for CRUD operations using JavaScript in SharePoint-Hosted Add-In for Web.

Create a new project in Visual Studio –> Apps for SharePoint. Name it as JavaScriptCRUD.

Enter the URL of your developer site and select SharePoint-Hosted.

Expand Scripts in Solution Explorer and open Apps.js from there. Delete everything from the file.

Modify App Permissions in AppManifest.xml file. Open it in Designer mode. In Permissions tab, give Full Control access to Site Collection.

Write the below code in App.js file.

var hostWebUrl;
var appWebUrl;

$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));

    // calling Javascript function
    getWebDetails();
});

function manageQueryStringParameter(paramsToReceive) {
    var params = document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i++) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramsToReceive) {
            return singleParam[1];
        }
    }
}

There are two components in SharePoint-Hosted Add-In: Host Web and Add-In Web (previously referred as App Web).

Host Web contains the details of the site where the add-in is hosted. We can get the URL of Host Web from SPHostUrl component of query string.
Add-in web contains the components of Add-in like lists, libraries, pages etc. We get the URL of Add-in web from SPAppWebUrl component of the query.

When we use SP.ClientContext.get_current(), we get the context and URL of the Add-in and not the host web.

Below are the sample codes related to Web using JavaScript

Get all the Web Properties

function getWebDetails()
{
    var context = new SP.ClientContext(appWebUrl);
    var appContextSite = new SP.AppContextSite(context, hostWebUrl);
    var web = appContextSite.get_web();
    context.load(web);
    context.executeQueryAsync(Function.createDelegate(this, function () {
        alert(web.get_title()),
        Function.createDelegate(this, function () { alert("Fail!") })
    })); 
}

There is another way of writing code. We can write success and failure functions of executeQueryAsync separately.

Get selected Web Properties

function getSelectedWebDetails() {
    var context = new SP.ClientContext(appWebUrl);
    var appContextSite = new SP.AppContextSite(context, hostWebUrl);
    this.web1 = appContextSite.get_web();
    context.load(this.web1,'Title','Description');
    context.executeQueryAsync(Function.createDelegate(this, this.onSuccessGetWebDetails),
        Function.createDelegate(this, this.onFailGetWebDetails));
}

function onSuccessGetWebDetails()
{
    document.getElementById("message").innerHTML = "<b>Title:</b> " + this.web1.get_title() +
        " </br><b>Description:</b> " + this.web1.get_description(); }

function onFailGetWebDetails() {
    alert("Failes!");
}

Update Web Properties

function updateWebDetails() {
    var context = new SP.ClientContext(appWebUrl);
    var appContextSite = new SP.AppContextSite(context, hostWebUrl);
    this.web1 = appContextSite.get_web();
    this.web1.set_description("New Description");
    this.web1.update();
    context.load(this.web1,'Title','Description');
    context.executeQueryAsync(Function.createDelegate(this, this.onSuccessGetWebDetails),
        Function.createDelegate(this, this.onFailGetWebDetails));
}