Post
Ask Question

How To Create Columns In A List Using REST API In SharePoint Online And Office 365

Welcome to an article on “How to create columns in a list using REST API in SharePoint Online and Office 365” where we will see the steps of creating an app using Napa Tool which will help us to create a column in a list using REST API.

  • Open the “NAPA” Office 365 Development Tools through your SharePoint store.

  • Click on Add New Project.

  • It will ask you, what type of app do you want to build?

    build

  • Select SharePoint Add-in and provide a name to your app and click on Create.

    type

  • You will see the screen below on the app,

    content

  • Click on Default.aspx and paste the code below under the,
    1. “<asp:ContentContentPlaceHolderID="PlaceHolderMain" runat="server">”.  
    Code:
    1. <div>  
    2.     <p>  
    3.         <b>Create List Column</b>  
    4.         <br />  
    5.         <input type="text" id="createcolumnname" />  
    6.         <button id="createcolumn">Create Column</button>  
    7.     </p>  
    8. </div> 
    Now on the navigation click on the App.js file and paste the code below removing the previous code completely.

    Code:
    1. 'use strict';  
    2. var hostweblink;  
    3. var applink;  
    4. // get the links on app load  
    5. $(document).ready(function()  
    6. {  
    7.     hostweblink = decodeURIComponent(  
    8.         getQueryStringParameter("SPHostUrl"));  
    9.     applink = decodeURIComponent(  
    10.         getQueryStringParameter("SPAppWebUrl"));  
    11.     //Define click event  
    12.     $("#createcolumn").click(function(event) {  
    13.         createcolumn();  
    14.         event.preventDefault();  
    15.     });  
    16.     var scriptlink = hostweblink + "/_layouts/15/";  
    17.     $.getScript(scriptlink + "SP.RequestExecutor.js");  
    18. });  
    19. //get the data and clear it in a function  
    20. function getQueryStringParameter(paramvalue)  
    21. {  
    22.     var paramval = document.URL.split("?")[1].split("&");  
    23.     for (var i = 0; i < paramval.length; i = i + 1)  
    24.     {  
    25.         var paramval1 = paramval[i].split("=");  
    26.         if (paramval1[0] == paramvalue) return paramval1[1];  
    27.     }  
    28. }  
    29. // Create a column in a list  
    30. function createcolumn()  
    31. {  
    32.     var columnname = document.getElementById("createcolumnname").value;  
    33.     var play;  
    34.     play = new SP.RequestExecutor(applink);  
    35.     //DevData is the name of my list where I want to create a column  
    36.     play.executeAsync({  
    37.         url: applink + "/_api/SP.AppContextSite(@target)/web/Lists/getbytitle('DevData')/fields?@target='" + hostweblink + "'",  
    38.         method: "POST",  
    39.         body: "{ '__metadata': { 'type': 'SP.Field' }, 'FieldTypeKind': 2, 'Title':'" + columnname + "'}",  
    40.         headers:  
    41.         {  
    42.             "content-type": "application/json; odata=verbose",  
    43.         },  
    44.         success: createListcolumnsuccessful,  
    45.         error: createListcolumnfailure  
    46.     });  
    47. }  
    48.   
    49. // Success Handler  
    50. function createListcolumnsuccessful(data)  
    51. {  
    52.     alert("Column Created Successfully")  
    53. }  
    54.   
    55. // Error Handler  
    56. function createListcolumnfailure(data, errorCode, errorMessage)   
    57. {  
    58.     alert("Column coud not be created, view the error: " + errorMessage);  
    59. }  
  • Click on the settings icon on the tool on the left.

    settings

  • Under the properties, select Permissions and provide full control to the app on the Site Collection level.

    Permissions

  • Click on the deploy button on the left and run the project.

    deploy

  • Click on the launch button.

    launch

  • Accept the trust and click on ‘Trust It’.

    Trust It

  • Your app will be deployed and open for you as per the following screenshot:

    create

  • Provide the name of the column you want to create and click on ‘Create Column’ button.

    Create Column

  • Once you click on the button you will receive an alert that your column has been successfully created.

  • Go to your list, you will see your created column.

    column

Here we saw today how to create a column in a list using REST API in SharePoint Online and Office 365. You will love your app. Keep reading and keep learning!

Keep reading & keep learning!

Read more articles on SharePoint:


Similar Articles