+ Start a Discussion
VDid.ax1020VDid.ax1020 

Creating a Custom Button ON a Visual Force Page

Hi Everyone,

 

I have the need to create a custom button on a visualforce page. I have been able to find documentation on creating a custom button that points to a visualforce page but not one that actually resides on the VF page. Since I am new to this I have no idea where to begin, the VF workbook I have does not have any info. either.

 

My button is simple, it points to another object within salesforce.com. E.g. the cases object, but needs to render below the button, to where I have multiple static buttons on the top of the VF page and can click on any button and the corresponding page populates below.

 

Thanks in advance,

V

Best Answer chosen by Admin (Salesforce Developers) 
Ankit AroraAnkit Arora

You need to create an IFrame in your visualforce page and use reRender to get the value from button and open the URL in that IFrame.

 

Using IFrame : http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_iframe.htm

 

I have prepared some sample for you, please copy paste the VFP and class :

 

VFP

 

<apex:page id="pg" controller="OnLoadController">
<apex:form>

<apex:actionFunction action="{!redirect}" name="OpenPage" reRender="pb,theIframe">
    <apex:param assignTo="{!Page}" value="" name="param1"/>
</apex:actionFunction>


    <apex:pageBlock id="pb">

        <apex:pageBlockButtons>
            <apex:commandButton value="Google" onclick="OpenPage('google'); return false;"/>
            <apex:commandButton value="Ankit's Blog" onclick="OpenPage('blog'); return false;"/>
        </apex:pageBlockButtons>
        
        <apex:iframe id="theIframe" src="{!OpenPageURL}" scrolling="true"/>

    </apex:pageBlock>


</apex:form>
</apex:page>

 

Class :

 

public class OnLoadController {

    public String Page {get; set;}
    public String OpenPageURL {get; set;}
    
    public void OnLoadController()
    {
        Page = '' ;
        OpenPageURL = '' ;
    }
    
    public PageReference redirect()
    {
        if(Page == 'google')
        {
            OpenPageURL = 'http://www.google.co.in/' ;
        }
        if(Page == 'blog')
        {
            OpenPageURL = 'http://forceguru.blogspot.com/' ;
        }
        return null;
    }

}

 

I hope this will help you. Let me know if you need something else.

 

 

Thanks

Ankit Arora

Blog | Facebook | Blog Page

All Answers

joshbirkjoshbirk

Can you post the Visualforce you're using to render the current list of buttons you'd like to add to?  

VDid.ax1020VDid.ax1020

Hi Josh,

 

My code is below, what I would like to do is render the webpages that the buttons point to in the same VF page below the buttons, instead of the webpage simply opening up on the current page. I know my formatting is really bad, I am still learning :)

 

<apex:page sidebar="false">
    <apex:pageBlock title="Voice Customer Support Queues">
    </apex:pageblock>

<apex:form >
  <apex:commandButton value="eVoice Queue"
  action="https://cs2.salesforce.com/500?fcf=00BR00000017zIO" rerender="dynamic"/>
  </apex:form>

 
  <apex:form >
  <apex:commandButton value="Onebox Queue"
  action="https://cs2.salesforce.com/500?fcf=00BR00000017zXJ" rerender="dynamic"/>
  </apex:form>

 
   <apex:form >
  <apex:commandButton value="Voice Queue"
  action="https://cs2.salesforce.com/500?fcf=00BR00000017zXO&rolodexIndex=-1&page=1" rerender="dynamic"/>
  </apex:form>

  <apex:form >
  <apex:commandButton value="eReceptionist Queue"
  action="https://cs2.salesforce.com/500?fcf=00BR00000017zYC&rolodexIndex=-1&page=1"/>
  </apex:form>

 
</apex:page>

Ankit AroraAnkit Arora

You need to create an IFrame in your visualforce page and use reRender to get the value from button and open the URL in that IFrame.

 

Using IFrame : http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_iframe.htm

 

I have prepared some sample for you, please copy paste the VFP and class :

 

VFP

 

<apex:page id="pg" controller="OnLoadController">
<apex:form>

<apex:actionFunction action="{!redirect}" name="OpenPage" reRender="pb,theIframe">
    <apex:param assignTo="{!Page}" value="" name="param1"/>
</apex:actionFunction>


    <apex:pageBlock id="pb">

        <apex:pageBlockButtons>
            <apex:commandButton value="Google" onclick="OpenPage('google'); return false;"/>
            <apex:commandButton value="Ankit's Blog" onclick="OpenPage('blog'); return false;"/>
        </apex:pageBlockButtons>
        
        <apex:iframe id="theIframe" src="{!OpenPageURL}" scrolling="true"/>

    </apex:pageBlock>


</apex:form>
</apex:page>

 

Class :

 

public class OnLoadController {

    public String Page {get; set;}
    public String OpenPageURL {get; set;}
    
    public void OnLoadController()
    {
        Page = '' ;
        OpenPageURL = '' ;
    }
    
    public PageReference redirect()
    {
        if(Page == 'google')
        {
            OpenPageURL = 'http://www.google.co.in/' ;
        }
        if(Page == 'blog')
        {
            OpenPageURL = 'http://forceguru.blogspot.com/' ;
        }
        return null;
    }

}

 

I hope this will help you. Let me know if you need something else.

 

 

Thanks

Ankit Arora

Blog | Facebook | Blog Page

This was selected as the best answer
VDid.ax1020VDid.ax1020

Thank you very much Ankit.

 

I will test your solution later on today.

 

Regards,

V

joshbirkjoshbirk

A complete side note:  avoid using multiple form tags if possible (if I'm reading the original example correctly).  It will still work, but each is a different viewstate/relationship with the server and will slow down pages considerably.

VDid.ax1020VDid.ax1020

Thanks Josh! That is very good to know.

Ankit AroraAnkit Arora

Good thought Josh! I have taken care of that in my sample. This is just a sample to know how thing work, rest it depends upon the developer how they use it.

 

Thanks

Ankit Arora

Blog | Facebook | Blog Page

VDid.ax1020VDid.ax1020

Ankit and Josh.

 

I really cannot thank you both enough! My VF page is doing exactly what I need it to do.

 

Much appreciated,

V

b-liub-liu

If there are already standard buttons and custom buttons already displayed on the default detail page, how can I replicate those set of buttons on a visualforce page? I have the edit and delete button working but I am lost on the rest.

 

There has to be an easier way than using url's.

Ayushi GroverAyushi Grover

Hi Ankit

I tries to save the class that you showed in the code above. It shows an error like this. 

"[Error] Error: Compile Error: line 30:77 no viable alternative at character '"' at line 30 column 77" . 

I don't know what to do. Please explain.