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?
  • Select SharePoint Add-in and provide a name to your app and click on Create.
  • You will see the screen below on the app,
  • Click on Default.aspx and paste the code below under the “<asp:ContentContentPlaceHolderID=”PlaceHolderMain” runat=”server”>”.Code:
    
    3.         Delete Column
    5.         “text” id=“deletecolumnname” />
    6.         “deletecolumn”>DeleteColumn

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;
5. // Load the links on app load.
6. $(document).ready(function()
7. {
8.     hostweblink = decodeURIComponent(
9.         getQueryStringParameter(“SPHostUrl”));
10.     applink = decodeURIComponent(
11.         getQueryStringParameter(“SPAppWebUrl”));
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.
• Under the properties, select Permissions and provide full control to the app on the Site Collection level.
• Click on the deploy button on the left and run the project.
• Click on the launch button.
• Accept the trust and click on ‘Trust It’.
• Your app will be deployed and open for you as per the following screenshot:
• Provide the name of the column you want to delete and click on ‘Delete Column’ button.
• I have a field called ‘MyField’ to delete.
• Click on the button and the column is successfully deleted.
• Go to your list, you will see your column is deleted.

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.