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

  1. “<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. // Load the links on app load.

  5. $(document).ready(function()   

  6. {      

  7. hostweblink = decodeURIComponent(          

  8. getQueryStringParameter("SPHostUrl"));      

  9. applink = decodeURIComponent(          

  10. getQueryStringParameter("SPAppWebUrl"));  

  11. //Assign Click event on button     

  12. $("#deletecolumn").click(function(event)      

  13. {          

  14. deletecolumn();  

  15. event.preventDefault();      

  16. });      

  17. varscriptlink = hostweblink + "/_layouts/15/";      

  18. $.getScript(scriptlink + "SP.RequestExecutor.js");  

  19. });  

  20. //function to retrive the clean link

  21. functiongetQueryStringParameter(paramvalue)  

  22. {          

  23. varparamval = document.URL.split("?")[1].split("&");  

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

  25. {              

  26. var paramval1 = paramval[i].split("=");  

  27. if (paramval1[0] == paramvalue) return paramval1[1];          

  28. }      

  29. }  

  30. // Delete column

  31. functiondeletecolumn()  

  32. {      

  33. vardeletecolumnname = document.getElementById("deletecolumnname").value;      

  34. var play;      

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

  36. play.executeAsync      

  37. ({          

  38. url: applink + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('DevData')/fields/getbytitle('" + deletecolumnname + "')?@target='" + hostweblink + "'",          

  39. method: "POST",          

  40. headers:         

  41.  {  

  42. "IF-MATCH": "*",   "X-HTTP-Method": "DELETE"         

  43. },          

  44. success: deletecolumnsuccessful,          

  45. error: deletecolumnfail      

  46. });  

  47. }  

  48. functiondeletecolumnsuccessful(data)  

  49. {      

  50. alert("Column deleted successfully")  

  51. }  

  52. functiondeletecolumnfail(data, errorCode, errorMessage)  

  53. {      

  54. alert("Column could not be deleted, see the error here" + errorMessage);  

  55. }  


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


Read more articles on SharePoint:

Recent Posts

See All