function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
hoagieryderhoagieryder 

Tabbed Visualforce Page

I want to create a visualforce page that has two tabs that when clicked display two separate visualforce pages. When the page is open the first visualforce page is display, when the tab is clicked the second page is displayed. This would work similarly to the "tabbed accounts in 30 seconds tutorial" but with visualforce pages, not standard objects. Is this possible? 

Jake GmerekJake Gmerek

Yes, there would be several ways, but the easiest way, if you have existing visualforce pages, would be iframes.  Here is a quick example:

 

 

<apex:page >

   <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">

      <apex:tab label="myPage1" >
         <iframe src="\apex\myPage1" width = "100%" height="1000px">
         </iframe>
      </apex:tab>
      
      <apex:tab label="myPage2">
         <iframe src="\apex\myPage2" width = "100%" height="1000px">
         </iframe>
      </apex:tab>
      
    </apex:tabPanel>
  
</apex:page>

 

 

You will probably have to add id parameters to the urls in order to get the tabs to display the correct records and probably write a custom controller to get those ids, but this should get you started.

 

 

Devendra NataniDevendra Natani

You can use the below code.

 

 

<apex:page >
   <apex:tabPanel switchType="client">
      <apex:tab label="tab1" >
         <apex:include pageName="Page1"/>
      </apex:tab>
      <apex:tab label="tab2">
         <apex:include pageName="Page2"/>
      </apex:tab>
    </apex:tabPanel>
</apex:page>

 

 

Please let me know if there is any issue.

 

Thanks,

Devendra Natani | Salesforce Certified Developer

Blog

ArjunDharArjunDhar

In my case Page1 & Page2 are the same, except a parameter changes the output. There seems to be no support for page params via URL or via field.

 

In my case, I want "On Click" of the Tab header, it to fetch the same URl with a difference of a param supplied to the container.

How can I achieve it? (... without iFrames ...)

 

like <url>?myparam=xyz

Jake GmerekJake Gmerek

You can still do that with the Iframes I mentioned and you may be able to do that with the Apex:include tag but I have not tested it.

 

 

</apex:tab><apex:tab label="myPage1" >
         <iframe src="\apex\myPage1?myparam=xyz" width = "100%" height="1000px">
         </iframe> 
ArjunDharArjunDhar

I found a solution to my problem (Not sure if its the best, but it works fine).'

 

1. Ensure switchType attribute of the <apex:TabPanel> is "client"

2. ontabenter="window.location='./currentPage?myParam=xyz'"

 

Note: If switchType is "server" then the window.location javascript becomes de-fiunct. Anyway the JavaScript will make it a Server call so switchType should be "client" for all we care.