Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have a requirement to execute some JavaScript on a SFDC Standard Detail page.

Specifically we would like to remove the ability for the users to add Notes to an object, but still retain the ability to add Attachments.

You cannot remove the button from the Notes & Attachments related list via standard declrative features (Page Layouts, etc). We would like to remove the "New Note" button, as well as rename the Related List to "Attachments".

I know I could do this in JavaScript by editing the DOM. Is there a way I can run JavaScript in a standard SFDC detail page?

share|improve this question

6 Answers 6

up vote 18 down vote accepted

The only way we found to insert code directly into the DOM of any Salesforce page is via a Home Page Component (Setup > Customize > Home > Home Page Components).

Create a New Custom Component, Type = HTML Area. In the editor, check the "Show HTML" checkbox in the upper right. You can then put in arbitrary HTML and JavaScript and it can traverse the DOM.

If you just want your code on a single page, create a "Wide (Right) Column" component and add it to your page layout.

If you want the code to run on every* page in SFDC, then you'll want to put it into a "Narrow (Left) Column" (often referred to as the sidebar) component, check the Setup > Customize > User Interface > Show Custom Sidebar Components on All Pages checkbox, and finally select it in Setup > Customize > Home > Home Page Layouts > your layout.

Home Page Components don't need to have any visible UI.

  • Chatter pages don't have the sidebar, so this won't work there. The Service Cloud Console also doesn't show the sidebar and has no equivalent, so you can't do this there either.
share|improve this answer
    
Great explanation! The only things I would add would be to ensure you create a Narrow (Left) Column component, and click 'Show HTML' (top right of the Formatting Controls). –  metadaddy Aug 16 '12 at 6:47
    
Thanks for the extra clarification! We've been doing this via Eclipse/Ant for a long time now, so I forgot to include the details of doing it via the UI. –  Rajat Paharia Aug 16 '12 at 7:07
1  
"If you just want your code on a single page, create a "Wide (Right) Column" component and add it to your page layout." How does that work? I don't think a home page component can be added to a page layout for an object –  LVS Aug 29 '13 at 13:11
2  
this is not working anymore? –  Rodrigo Zurek Aug 8 '14 at 20:15
3  
this has been disabled in recent release...any workaround? –  San Tosh Sep 25 '14 at 8:25

Start by creating a VF page that includes the dialog, and uses the standard controller so you can drop it into the object's whose details your trying to add it to the page layout, since you didn't specify, I'll just use 'Account'

You need to uploaded your jQuery or whatever JS libraries your using to generate the dialog into a static resource file (as you can't remotely use a CDN on the standard details page)

<apex:page standardController="account">
<apex:includeScript value="{!URLFOR($Resource.jquery)}" />
<script type="text/javascript">
$(document).ready(function(){
    $('#open-notes-dialog).click(function(){
        alert('hello world');
    });        

});
</script>
<button id="open-notes-dialog">Add notes</button>

Add the page to the layout of your details page. Unfortunately, its kind of hard to get it to display in a correct size.

However, you will now have this VF page in an iFrame and with some creative JS can go outside of your iframe (into the parent) and rename the 'Notes & Attachments' heading, and add your dialog!

Update -- looks like you can't access static resources from the standard details page- so maybe add the javascript you need to your page statically but adding a dynamic library might be limited.

share|improve this answer

Another approach to this problem is to load your JavaScript using the {!REQUIRESCRIPT} function in a custom button/link on the page.
More info here: Changing the color of a custom button

share|improve this answer
    
I agree that this methodology works now. Just implemented it for a client. The key is that you need to have your JS in a Static Resource loaded by the {!REQUIRESCRIPT(staticresourcename)} in your custom on-click JS button, and of course that button has to be on the page layout. –  Force2b Feb 3 at 19:27

I've done this with a sidebar component. There is an almost equal howto on this subject created by another developer (theNrd):

http://www.tehnrd.com/show-and-hide-buttons-on-page-layouts/

Check this out, should get you started.

share|improve this answer

You can do this with either javascript or css. Create a visualforce page and include it as a part of the page layout. The visualforce page should contain a script or style tag to manipulate the standard page.

share|improve this answer
2  
Hmm - I just tried this out, but it fails with a JavaScript error: Unsafe JavaScript attempt to access frame with URL https://superpat-developer-edition.my.salesforce.com/0015000000VALDx from frame with URL https://superpat-developer-edition--superpat.na3.visual.force.com/servlet/servle‌​t.Integration?lid=06650000000PWUi&ic=1. Domains, protocols and ports must match. –  metadaddy Aug 16 '12 at 5:33
    
I think you have to use a static resource file in order to avoid the anti-cross domain script loading security. –  jordan.baucke Aug 16 '12 at 5:46
    
Adding it to static resources doesn't seem to be working either. –  jordan.baucke Aug 16 '12 at 5:52
    
My apologies, while you are able to execute javascript in this manner I see now you can't manipulate the of the rest of the page. In this case I would perhaps suggest not including the "Notes & Attachments" related list and instead building an Attachments related list with visualforce. –  Phil Rymek Aug 16 '12 at 6:15
    
Actually, Rajat's answer of using a sidebar component works a treat. –  metadaddy Aug 16 '12 at 6:48

I have come up with an addition to @bigassforce 's solution to running code on a page that makes it a bit neater.

  1. Define your javascript eg(this example changes the size of a custom component) (function() { var imageFrames = document.getElementsByTagName('iframe'); for (var i = 0 ; i < imageFrames.length ; i++){ if (imageFrames[i].title = 'Account Image'){ imageFrames[i].height = 120; } } }());

  2. Base64 encode this and put in button as described by @bigassforce here

  3. Make another script (this one runs on a settimeout function) that removes the button or link! (I used a link, but I don't think it matters). This means that your first block of code will run and do what you want it to do and your second block will clean up. No messy buttons left lying around or extra code in buttons that is not associated with the functionality of that button itself.

I've called the link "System Functions" so make sure you modify the code to account for whatever you call the button. This code will work for links, but you'll have to work out the structure of the html if you want to remove custom buttons.

Removal code:

setTimeout(function() {
    var table = document.getElementsByClassName('customLinks');
    if (!table.length){
        return;
    }
    var anchorTags = table[0].getElementsByTagName('a');
    for (var j = 0 ; j < anchorTags.length ; j++){
        if (anchorTags[j].innerText == "System Functions"){
            anchorTags[j].parentNode.removeChild(anchorTags[j]);
        }
    }
}, 5000);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.