Insert Items Into a SharePoint Host Web List Using SharePoint Hosted APP

In this article I would like to share the code to insert items into a host web list using JavaScript.
Use the following JavaScript code to insert an Item:

  1. var hostWebUrl;  
  2. var appWebUrl;  
  3. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  4. $(document).ready(function ()   
  5. {      
  6.     hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));    
  7.     appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));  
  8.     //Insert method  
  9.     InsertItemToList();  
  10.  });  
  11.   
  12. //This function is used to get the hostweb url  
  13. function manageQueryStringParameter(paramToRetrieve)   
  14. {  
  15.     var params =  
  16.     document.URL.split("?")[1].split("&");  
  17.     var strParams = "";  
  18.     for (var i = 0; i < params.length; i = i + 1)   
  19.     {  
  20.         var singleParam = params[i].split("=");  
  21.         if (singleParam[0] == paramToRetrieve)   
  22.         {  
  23.             return singleParam[1];  
  24.         }  
  25.      }  
  26.  }  
  27.   
  28.   
  29. //Insert List Item to SP host web  
  30. function InsertItemToList()   
  31. {      
  32.    var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL  
  33.    var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);  
  34.    var web = appCtxSite.get_web(); //Get the Site   
  35.    var list = web.get_lists().getByTitle(listName); //Get the List based upon the Title  
  36.    var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List  
  37.    var listItem = list.addItem(listCreationInformation);  
  38.    listItem.set_item("Title""Title1");   
  39.    listItem.update(); //Update the List Item  
  40.    ctx.load(listItem);  
  41.    //Execute the batch Asynchronously  
  42.    ctx.executeQueryAsync(  
  43.    Function.createDelegate(this, success),  
  44.    Function.createDelegate(this, fail)  
  45.    );  
  46. }  
  47.   
  48. function success()  
  49. {  
  50.    alert("Item added successfully");  
  51. }  
  52.   
  53. function fail(sender, args)   
  54. {  
  55.    alert('Failed to get user name. Error:' + args.get_message());  
  56. }  
Note
 
In the AppManifest.xml file provide write permission to the SiteCollection.

Summary

This article explored how to insert list items into a host web list from a SharePoint Hosted app using JavaScript.

Up Next
    Ebook Download
    View all
    Learn
    View all