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.         Delete Column
      2.         “text” id=“deletecolumnname” />
      3.         “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;
  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”“*”,
  43.             “X-HTTP-Method”“DELETE”
  44.         },
  45.         success: deletecolumnsuccessful,
  46.         error: deletecolumnfail
  47.     });
  48. }
  49. functiondeletecolumnsuccessful(data)
  50. {
  51.     alert(“Column deleted successfully”)
  52. }
  53. functiondeletecolumnfail(data, errorCode, errorMessage)
  54. {
  55.     alert(“Column could not be deleted, see the error here” + errorMessage);
  56. }
  • 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s