Create List In SharePoint Using Sharepoint Hosted App

Steps to create list in SharePoint host web

Add HTML button, given below, in your *.aspx page-

  1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
  2.   
  3.     <div>  
  4.         <p id="message">  
  5.             <!-- The following content will be replaced with the user name when you run the app - see App.js -->  
  6.             <button type="button" id="btnCreate">Create SP List</button>  
  7.         </p>  
  8.     </div>  
  9.   
  10. </asp:Content>  
Write the code, given below, on your *.js file-
  1. //get Current Context  
  2.    var context = SP.ClientContext.get_current();  
  3.   
  4.   // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  5.    $(document).ready(function () {  
  6.        console.log("page loading...")  
  7.        $("#btnCreate").click(function () {  
  8.            createList();  
  9.        });  
  10.    });  
  11. /this method is used to create list in host web  
  12.    function createList() {  
  13.        //Get host web URL  
  14.        var hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));  
  15.        //get app context using host web url  
  16.        var appCtxSite = new SP.AppContextSite(context, hostWebUrl);  
  17.        //get current web  
  18.        var currentWEB = appCtxSite.get_web();  
  19.        //create object for list creation  
  20.        var listCreationInfo = new SP.ListCreationInformation();  
  21.        listCreationInfo.set_title("sampleList");  
  22.        //provide template type - genericList is custom list template  
  23.        listCreationInfo.set_templateType(SP.ListTemplateType.genericList);  
  24.        // add list in host web  
  25.        var list = currentWEB.get_lists().add(listCreationInfo);  
  26.        context.load(list);  
  27.        context.executeQueryAsync(function () {  
  28.            alert("Sharepoint custom list is created Successfully..")  
  29.        }, function (sender, args) {  
  30.            onfail(sender, args);  
  31.        });  
  32.    }  
  33.   
  34. / This function is executed if the above call fails  
  35.    function onfail(sender, args) {  
  36.        alert('Failed to create list. Error:' + args.get_message());  
  37.    }  
  38.   
  39.    // this method used split the query string  
  40.    function manageQueryStringParameter(paramToRetrieve) {  
  41.        var params = document.URL.split("?")[1].split("&");  
  42.        var strParams = "";  
  43.        for (var i = 0; i < params.length; i = i + 1) {  
  44.            var singleParam = params[i].split("=");  
  45.            if (singleParam[0] == paramToRetrieve) {  
  46.                return singleParam[1];  
  47.            }  
  48.        }  
  49.    }  
Note- In app manifest file, provide full control permission to the site collection, as shown below-

output

Summary

In this article, we have explored, how to create a list in SharePoint hosting Web, using JavaScript Object Model (JSOM).

 

Ebook Download
View all
Learn
View all