Create a List in SharePoint 2013 Online Using REST API

Default.aspx

Replace the contents of Default.aspx with the following:

<%-- The markup and script in the following Content element will be placed in the <head>of the page --%>

    <asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">

        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>

        <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

        <script type="text/javascript" src="/_layouts/15/sp.js"></script>

        <!-- Add your CSS styles to the following file -->

        <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

        <!-- Add your JavaScript to the following file -->

        <script type="text/javascript" src="../Scripts/App.js"></script>

    </asp:content>

    <%-- The markup in the following Content element will be placed in the TitleArea of the page --%>

        <asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">Page Title</asp:content>

        <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>

            <asp:content contentplaceholderid="PlaceHolderPageTitleInTitleArea" runat="server">REST API Examples</asp:content>

            <%-- The markup and script in the following Content element will be placed in the <body>of the page --%>

                <asp:content contentplaceholderid="PlaceHolderMain" runat="server">

                    <div>

                        <p>

                            <b>Create List</b>

                            <br />

                            <input type="text" value="List Name Here" id="createlistname" />

                            <button id="createlistbutton">Create List</button>

                        </p>

                    </div>

                </asp:content>

App.js

Replace the contents of App.js with the following:'

use strict ';

var hostweburl;

var appweburl;

// Load the required SharePoint libraries.

$(document).ready(function() {

    //Get the URI decoded URLs.

    hostweburl = decodeURIComponent(

        getQueryStringParameter("SPHostUrl"));

    appweburl = decodeURIComponent(

        getQueryStringParameter("SPAppWebUrl"));

    //Assign events to buttons

    $("#createlistbutton").click(function(event) {

        createList();

        event.preventDefault();

    });

    // Resources are in URLs in the form:

    // web_url/_layouts/15/resource

    var scriptbase = hostweburl + "/_layouts/15/";

    // Load the js file and continue to load the page with information about the list top level folders.

    // SP.RequestExecutor.js to make cross-domain requests

    $.getScript(scriptbase + "SP.RequestExecutor.js");

});

// Utilities

// Retrieve a query string value.

// For production purposes you may want to use a library to handle the query string.

function getQueryStringParameter(paramToRetrieve) {

    var params = document.URL.split("?")[1].split("&");

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve) return singleParam[1];

    }

}

// Create a new custom list

function createList() {

    var listName = document.getElementById("createlistname").value;

    var executor;

    // Initialize the RequestExecutor with the app web URL.

    // Content Type Header is used to tell server what format data in the body contains.

    executor = new SP.RequestExecutor(appweburl);

    executor.executeAsync({

        url: appweburl + "/_api/SP.AppContextSite(@target)/web/Lists?@target='" + hostweburl + "'",

        method: "POST",

        body: "{ '__metadata': { 'type': 'SP.List' }, 'BaseTemplate': 100,'Description': '" + listName + "', 'Title':'" + listName + "'}",

        headers: {

            "content-type": "application/json; odata=verbose"

        },

        success: createListSuccessHandler,

        error: createListErrorHandler

    });

}

// Success Handler

function createListSuccessHandler(data) {

    alert("List Created successfully")

}

// Error Handler

function createListErrorHandler(data, errorCode, errorMessage) {

    alert("Could not create a new list: " + errorMessage);

}