top of page
Writer's pictureManpreet Singh

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:

Delete Column        

“text” id=“deletecolumnname” />       

 “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’;varhostweblink;varapplink;

  2. // Load the links on app load.$(document).ready(function()

  3. {   

  4.  hostweblink = decodeURIComponent(       

  5.  getQueryStringParameter(“SPHostUrl”));    

  6. applink = decodeURIComponent(        

  7. getQueryStringParameter(“SPAppWebUrl”));

  8. //Assign Click event on button   

  9.  $(“# deletecolumn”).click(function(event)    

  10. {        

  11. deletecolumn(); event.preventDefault();    

  12. });    

  13. varscriptlink = hostweblink + “/_layouts/15/”;    

  14. $.getScript(scriptlink + “SP.RequestExecutor.js”);});

  15. //function to retrive the clean linkfunctiongetQueryStringParameter(paramvalue)

  16. {        

  17. varparamval = document.URL.split(“?”)[1].split(“&”);

  18. for (vari = 0; i < paramval.length; i = i + 1)        

  19. {            

  20. var paramval1 = paramval[i].split(“=”); if (paramval1[0] == paramvalue) return paramval1[1];       

  21.  }    }

  22. // Delete columnfunctiondeletecolumn()

  23. {    

  24. vardeletecolumnname = document.getElementById(“deletecolumnname”).value;    

  25. var play;    

  26. play = new SP.RequestExecutor(applink);    

  27. play.executeAsync    

  28. ({       

  29.  url: applink + “/_api/SP.AppContextSite(@target)/web/lists/getbytitle(‘DevData’)/fields/getbytitle(‘” + deletecolumnname + “‘)?@target='” + hostweblink + “‘”,        

  30. method: “POST”,        

  31. headers:        

  32. { “IF-MATCH”: “*”, “X-HTTP-Method”: “DELETE”        

  33. },        

  34. success: deletecolumnsuccessful,        

  35. error: deletecolumnfail    

  36. });}

  37. functiondeletecolumnsuccessful(data)

  38. {    

  39. alert(“Column deleted successfully”)}functiondeletecolumnfail(data, errorCode, errorMessage)

  40. {    

  41. alert(“Column could not be deleted, see the error here” + errorMessage);

  42. }


  • 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.

0 comments

Comments


bottom of page