Wednesday, September 7, 2016

Hide Aprove/Reject button from the ribbon

Hi Folks,

I got a requirement to hide 'Approve/Reject' button but the ribbon in Display form. I've written a short JavaScript code to achieve the functionality.

1. Use developer tools in Chrome to get the ribbon id.



<a class="ms-cui-ctl-medium" id="Ribbon.ListForm.Display.Manage.ApproveReject-Medium" onclick="return false;" href="javascript:;" mscui:controltype="Button" aria-describedby="Ribbon.ListForm.Display.Manage.ApproveReject_ToolTip" role="button" unselectable="on"><span class="ms-cui-ctl-iconContainer" unselectable="on"><span class=" ms-cui-img-16by16 ms-cui-img-cont-float ms-cui-imageDisabled" unselectable="on"><img class="" style="top: -313px;left: -1px;" unselectable="on" src="/_layouts/15/1033/images/formatmap16x16.png?rev=44"></span></span><span class="ms-cui-ctl-mediumlabel" unselectable="on">Approve/Reject</span></a>



2. Create a custom display form for a list and add the below code.
<script type="text/javascript" src="https://accobrands.sharepoint.com/ITCompliance/SiteAssets/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://accobrands.sharepoint.com/ITCompliance/SiteAssets/sputility.min.js"></script>
<script type="text/javascript" src="https://accobrands.sharepoint.com/ITCompliance/SiteAssets/url.js"></script>
<script type="text/javascript">
    function hideEdit() {
        var edit = document.getElementById("Ribbon.ListForm.Display.Manage.ApproveReject-Medium");
        edit.style.display = "none";
    }       
    _spBodyOnLoadFunctionNames.push("hideEdit");
</script>

3. Save the form and see the result by clicking "Preview in browser".

No comments:

Post a Comment