Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
CloudPower1CloudPower1 

Hide edit and delete button in standard detail page

Hi ,

 

I am trying to hide standard edit/delete button from standard detail page.

 

I tried using Jvascript and Jquery but none is working.

 

Javascript:

document.getElementsByName("edit").style.display='none';

 

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("input[name=edit]").hide();
});

</script>

 

Please let me know if some thing needs to be changed in the above code, or let me know if any easy solution other than record types.

 

Thanks

Prashanth

hitesh90hitesh90

Hi,

 

To hide edit and delete button from standard detail page follow the below steps.

 

step 1. Go to any record detail page for which you want to hide buttons("Edit/delete").
step 2. click on "Edit Layout" link at the upper right corner.

step 3. drag & drop standard "Edit/Delete" button to the above section.

step 4. click on save button.

 

Important :
Hit Kudos if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.

Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator & Advanced Administrator & Sales cloud consultant
My Blog:- http://mrjavascript.blogspot.in/
CloudPower1CloudPower1

Hi,

I dont want to remove it permanently,

 

want to hide edit/delete buttons on conditional basis.
kevincckevincc

If you are using the apex:detail component then you can use CSS or javascript. 

 

I found this blog post that has an example

 

http://blog.cloudclickware.com/2013/05/31/hiding-buttons-on-the-apexdetail-component/
Subramani_SFDCSubramani_SFDC
//Add jQuery from Google's secure servers
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

//Prevent conflict between jQuery and salesforce scripts
$j = jQuery.noConflict();
//This function hides the [New] button from the related list in a specific tab
$j(document).ready(function hideButton(){
    //Get the current url
    var url = window.location.href;
    //Change the value of tabUrl with the URL of your tab
    var tabUrl = "https://cs10.salesforce.com/003/o";//This is my contacts tab url
    if(url.indexOf(tabUrl) !== -1){
        $j('[name="new"]').css({"visibility":"hidden"});
    }
  
});

</script>
CloudPower1CloudPower1

Hi subra,

 

Thanks for the reply, i tried with the above code:$j('[name="edit"]').css({"visibility":"hidden"});

But this is not working in my case. Is there anything else i need to consider?

 

My requirement is to remove Edit and Delete buttons from a standard page based on some condition.

 

Thanks

Prashanth
RavIndra VemulaRavIndra Vemula
Hi @ClodPower1,

Two steps to hide Edit/Delete button:

1) First custom sidebar components enabled on all pages. To do so go to :

Setup-> User Unterface -> Show Custom Sidebar Components on All Pages

2) To create a code for hiding Edit and Delete buttons at HomePage Components. To do so go to:

Setup ->Customize ->Home -> Home Page Components -> Create a Cusom Component by clicking on 'New' button-> select 'HTML Area. as type -> select 'Narrow (Left) Column' from 'Component Position' -> check 'Show HTML' and paste the below at text area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$j = jQuery.noConflict();
$j(document).ready(function hideButton(){
var url = window.location.href;if(url != -1){
var EditBtn = $j('[name="edit"]');
EditBtn.css({"white-space":"normal","display":"none"});
var DelBtn = $j('[name="del"]');
DelBtn.css({"white-space":"normal","display":"none"});
}
})
;</script>

 -> Save. I hope, the magic hiding will works now.
Abhilasha_SinghAbhilasha_Singh
Hi,
You do not say what will cause the button to show/hide, but this should move you forward:-

<div id = "mydiv" style="display:none"> 
    <input type = "button" value = "Save and Send Update"> 
</div> 
<br><br> 

<input type = "button" value = "Show/Hide Update Button" onclick = "toggle()" > 
<script type="text/javascript"> function toggle() { var Style = document.getElementById("mydiv").style; Style.display = (Style.display
=="none")?"block" : "none"; } 
</script>

If you wish that the hidden button still occupies the same position on the page use instead:

<div id = "mydiv" style="visibility:hidden">
and change the script to
Style.visibility = (Style.visibility == "hidden") ? "visible" : "hidden";

Thanks