+ Start a Discussion

How to display visualforce page as a custom button?

A custom button is laid out on the same level as the standard buttons in our Opportunity detail page, top and bottom. I've a VF page that creates a commandButton that does different things depending on the Opportunity specifics.


I would like this VF page to appear at the same level as the standard/custom buttons at the top and bottom of the detail. How do I do it?


Right now the only place I can put it is in the detail itself as a field and I cannot "re-use" this VF button more than once on the same page.



Edwin VijayEdwin Vijay

If i am understanding you correctly.. you have a VF page which displays a button.. on click of the button it performs various calculations...


Why dont you create a custom button.. override it with the visualforce page.. and redirect to the detail page after all procssing..


Hope this answers you..


That's not what I'm looking for exactly. I want this VF button to be the actual button and not a result of clicking the custom button.


Depending on certain conditions, this VF button will be enable or disabled. If enable, it checks for certain conditions to be met, if not, warns the user. Ultimately, this button serves to redirect the user to a different URL.


Btw, do you mean override as in the "Override" action available for standard buttons and links? I cannot override a custom button, but I can create a custom button and says the content is the VF page. But that's not what I want.



Message Edited by jlim on 07-24-2009 09:55 AM

If I understand you correctly, what you are attempting to do is not possible in the current release. Instead, use the custom button with the behavior of "Execute JavaScript." You can use the JavaScript API feature to query the database, etc as you need to, or use any sort of custom logic that you need to. It will execute faster than trying to have Visualforce on the page, as well.


The code might look like this:

results = sforce.connection.query("select id, name, annualrevenue from account where id = '{!Opportunity.AccountId}'");
iterator = new sforce.QueryResultsIterator(results);
while(iterator.hasNext()) {
account = iterator.next();
if(account.getInt('AnnualRevenue')>10000) {
window.top.location.href = 'some other website url'
// We didn't find an account (field is empty). Do something else here.


The syntax might not be 100% accurate, please check the documentation and remember to use FireBug to help you debug, but that's the basic logic for using JavaScript, including a database query, in a custom button. You can use a variety of merge fields with {! functions }.


Visualforce is designed for building Graphical User Interfaces (GUIs), not implementing custom logic that has no visual appearance. Use Visualforce when you want to display some special GUI, and use JavaScript when you want to just do some custom logic that has no visual appearance, or in places where Salesforce does not allow you to place Visualforce.


Edit: As an aside, you could have the Visualforce page embedded on the opportunity layout, and it could dynamically determine the location of the custom button and enable/disable from there. Technically not supported though, so watch out for that. Finally, you can simply use some logic in the JavaScript itself to alert the user to the fact that the function they've requested doesn't work because of some condition.



if(parseInt("{!opportunity.amount}")<10000) { alert("You can't run this button on an opportunity less than $10k.") } else { window.top.location.href = "http://www.mycompany.com/bling/youAreRich" }




Message Edited by sfdcfox on 07-24-2009 10:34 AM

Thanks for the reply. I did do it using a custom button and JS initially and got that working. But I thought it would be more secure doing it using VF as the validation are done using server side instead.


Another reason is with a VF button I can control the state of the button (enable/disabled), but with a custom button, I didn't see a way to set the button id to enable/disable later. I did a search and couldn't find any way of doing this and I end up using JS to check if all the conditions are met only after the user clicks on the button.


If there's a way to enable/disable or even hide the custom button when the page loads, then it would be an acceptable solution. Thanks.


EDIT: I also tried embedding VF page for enable and disabling the button. Since there's no ID, I use getElementsByName (checking for FF and IE quirks with this) and attempt to set it as disabled=true. I don't recall what was the problem then, but it wasn't working out.


Using the JS alert will work, but then it is less user friendly as the user is allowed to click on something which they should not be able to click on to begin with.

Message Edited by jlim on 07-24-2009 10:42 AM
Message Edited by jlim on 07-24-2009 10:44 AM
I see what you're trying to do, and unfortunately, it's not so easy as that. Maybe you could have the VF page add the button the page dynamically? That might be better solution overall. Also, if you're worried about security, you can write Apex Code and make a webservice function, which you can then call in your button's logic; it can make the callout for you and return whatever results you'd like. Let me know if these suggestions help.

How can I call the VF page twice? I would like the button appearing on the top and bottom. I understand inline with the standard/custom button is not likely, but say if I can put it below and above the standard/custom buttons at the top and bottom respectively. But when I do page layout, I can only drag and drop the VF object once. I could duplicate the VF page but it would be redundant.


Thanks for any suggestions.


Actually, I just remembered that you can't do that because of cross-domain security (adding the buttons dynamically). Maybe create two versions of the page (copy & paste), and then put them at the top/bottom? They would use the same controller and extensions, just copied so that you can use them twice...

My requirement is totally opposite.. What I want is on a standard layout of Quotes , I just want the button to be displayed on ehader and not footer of the diplay section. How to acheive this ?


Custom buttons on standard layouts will appear at both the top and bottom of the Detail section. There is no way to avoid this. You may consider making it a Custom Link instead, which allows it to be in a Custom Link section that may be positioned anywhere within the detail view.