How to hide approve reject workflow approval button from ribbon in SharePoint online using css?

hide approve reject workflow approval button from ribbon sharepoint
SharePoint deveopment training course

Here we will discuss how we can hide Approve/Reject workflow ribbon button in SharePoint online using CSS. Recently we were developing few workflows using visual studio 2015 as a SharePoint hosted add-in using SharePoint online.

If you are new to workflow development using visual studio 2015, you can check out the below article.

Step by step develop workflows using visual studio 2015 as an add-in and deploy to host web in SharePoint online?

For those custom development, we have custom Approve and Reject button and we have added some approval logic inside it. We do not want business users to click on the Approve/Reject button which presented inside the ribbon. This ribbon button is presented inside lists, document libraries, task forms ribbons. And based on the window size, the button also changed.

hide approve reject workflow approval button from ribbon sharepoint
hide approve reject workflow approval button from ribbon sharepoint

We can hide the ribbon button using CSS, for this we need an id and we can retrieve using any developer tool.

Below are few button ids like below for the different list, libraries or task forms.

Ribbon.Tasks.Workflow.Moderate-Large

Ribbon.ListItem.Workflow.Moderate-Small
Ribbon.ListItem.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Medium

Ribbon.Documents.Workflow.Moderate-Small
Ribbon.Documents.Workflow.Moderate-Large
Ribbon.Documents.Workflow.Moderate-Medium

Ribbon.ListForm.Display.Manage.ApproveReject-Small
Ribbon.ListForm.Display.Manage.ApproveReject-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Large

Now to hide the buttons, we have to write css file. We can edit the page and add a script editor web part or a content editor web part and you can write the below code.

<style type=”text/css”>
a[id=”Ribbon.Tasks.Workflow.Moderate-Large”]
{
display:none;
}
</style>

Based on the list or library, you can change the above id.

Also, you can add the CSS in a different file and refer it inside the master page. After this, the ribbon button will be hidden.

You may like following SharePoint designer workflow tutorials:

Hope this SharePoint 2013 customization tutorial explains how to hide approve reject workflow approval button from ribbon in SharePoint online using CSS.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →