SharePoint Online - Delete Custom Action Via Rest API

In this article, we will learn how to delete SharePoint custom action via the REST API. While working on this solution, I had a requirement to delete custom action with a specific title in SPFx web part via REST API. 

 

Notes

• We will first query the user custom actions via REST API.
• Loop through each custom action and match the custom action title with a title which we wanted to delete.
• Use REST API endpoint to delete based on Custom action ID.

API Reference

• Get User Custom Actions -  /_api/site/UserCustomActions
• Delete User Custom Action -  /_api/site/UserCustomActions(@v0)/deleteObject()?@v0=guid'abcd-efgh-ijkl-mnop'

Assuming we wanted to delete Custom Action with title 'SettingHeaderFooterwithAppCustomizer', the below method can be used.

 

Below is reference screenshot which returns custom action with title 'SettingHeaderFooterwithAppCustomizer' on My Site collection 

Get UserCustomActions API call using SPInsider chrome extension.

 

protected removeCustomAction() {
 try {
   var title = 'SettingHeaderFooterwithAppCustomizer';
     this._getdigest()
       .then((digrestJson) => {
         console.log(digrestJson);
         const digest = digrestJson.FormDigestValue;
         const headers = {
             'X-RequestDigest': digest,
             "content-type": "application/json;odata=verbose",
         };
         const spOpts: ISPHttpClientOptions = {
         };
         this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/site/UserCustomActions`, SPHttpClient.configurations.v1,spOpts)
         .then((response: SPHttpClientResponse) => {

            response.json().then((responseJSON: any) => {
             console.log(responseJSON);

             responseJSON.value.forEach(element => {
             //Match custom action title
                 if(element.Title == title)
                 {

                 //found custom action, call REST API to delete object
                 this.context.spHttpClient.post(this.context.pageContext.web.absoluteUrl + "/_api/site/UserCustomActions(@v0)/deleteObject()?@v0=guid'" + element.Id + "'", SPHttpClient.configurations.v1,spOpts)
                   .then((response: SPHttpClientResponse) => {
                     console.log("I think I just deleted a custom action via REST API---");
                   });
                 }
             });
           });
          });
     });
 } catch (error) {
     console.error(error);
 }

Get digest method to retreive the digest value.

private _getdigest(): Promise<any> {
 const spOpts: ISPHttpClientOptions = {
 };
 return this.context.spHttpClient.post(this.context.pageContext.web.absoluteUrl + `/_api/contextinfo`, SPHttpClient.configurations.v1,spOpts)
   .then((response: SPHttpClientResponse) => {
     return response.json();
   });
}

This can be done vis JSOM also but I could not find any article on removing via REST API, hence I  thought of sharing.

 

Execute above function, and it will delete custom action. Below is screenshot of Get API post running the function.

 

 

Hope this helps...happy coding!!!