Hiding the “Delete” and “Clone” buttons in an apex:detail

In theory components like apex:detail and apex:relatedList allow you to create custom pages that combine the default UI with your own markup. As the default UI is pretty snazzy, this seems like a good way to go. But in the few cases I’ve tried this, the lack of fine control over what these components render has made me back away from the approach.

The one case where I am using an apex:detail component I ended up combining it with this styling:

<style type="text/css">
input.btn[name="del"] {
    display: none;
input.btn[name="clone"] {
    display: none;

which leaves the “Edit” button showing but ensures that the “Delete” and “Clone” buttons are not rendered. (This will obviously break if the names of the buttons change in future versions of Visualforce.)

The CSS magic is described in e.g. W3C Selectors.

Note that you could also remove the “Delete” and “Clone” buttons from the default UI layout. But in my case I wanted those buttons displayed in the default layout page but not displayed in my custom page. And you can’t force a particular layout in apex:detail.


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