Post
Ask Question

How To Delete A Column 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 delete 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 “<asp:ContentContentPlaceHolderID="PlaceHolderMain" runat="server">”.

    Code:
    1. <div>  
    2.     <p>  
    3.         <b>Delete Column</b>  
    4.         <br />  
    5.         <input type="text" id="deletecolumnname" />  
    6.         <button id="deletecolumn">DeleteColumn</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. varhostweblink;  
    3. varapplink;  
    4.   
    5. // Load the links on app load.  
    6. $(document).ready(function()   
    7. {  
    8.     hostweblink = decodeURIComponent(  
    9.         getQueryStringParameter("SPHostUrl"));  
    10.     applink = decodeURIComponent(  
    11.         getQueryStringParameter("SPAppWebUrl"));  
    12.   
    13.     //Assign Click event on button  
    14.     $("#deletecolumn").click(function(event)  
    15.     {  
    16.         deletecolumn();  
    17.         event.preventDefault();  
    18.     });  
    19.     varscriptlink = hostweblink + "/_layouts/15/";  
    20.     $.getScript(scriptlink + "SP.RequestExecutor.js");  
    21. });  
    22. //function to retrive the clean link  
    23. functiongetQueryStringParameter(paramvalue)  
    24. {  
    25.         varparamval = document.URL.split("?")[1].split("&");  
    26.         for (vari = 0; i < paramval.length; i = i + 1)  
    27.         {  
    28.             var paramval1 = paramval[i].split("=");  
    29.             if (paramval1[0] == paramvalue) return paramval1[1];  
    30.         }  
    31.     }  
    32.     // Delete column  
    33. functiondeletecolumn()  
    34. {  
    35.     vardeletecolumnname = document.getElementById("deletecolumnname").value;  
    36.     var play;  
    37.     play = new SP.RequestExecutor(applink);  
    38.     play.executeAsync  
    39.     ({  
    40.         url: applink + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('DevData')/fields/getbytitle('" + deletecolumnname + "')?@target='" + hostweblink + "'",  
    41.         method: "POST",  
    42.         headers:  
    43.         {  
    44.             "IF-MATCH": "*",  
    45.             "X-HTTP-Method": "DELETE"  
    46.         },  
    47.         success: deletecolumnsuccessful,  
    48.         error: deletecolumnfail  
    49.     });  
    50. }  
    51. functiondeletecolumnsuccessful(data)  
    52. {  
    53.     alert("Column deleted successfully")  
    54. }  
    55. functiondeletecolumnfail(data, errorCode, errorMessage)  
    56. {  
    57.     alert("Column could not be deleted, see the error here" + errorMessage);  
    58. }  
  • 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:

    delete

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

  • I have a field called ‘MyField’ to delete.

    MyField

  • Click on the button and the column is successfully deleted.

    delete

  • Go to your list, you will see your column is deleted.

    list

Here we saw today how to delete a column in a list using REST API in SharePoint Online and Office 365. You will love your app.

Read more articles on SharePoint:


Similar Articles