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:
  
  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;
  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.