Build Killer Visualforce Pages with Dynamic Visualforce Components | Techila
single,single-post,postid-1015,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-9.4.2,bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive

Build Killer Visualforce Pages with Dynamic Visualforce Components


Build Killer Visualforce Pages with Dynamic Visualforce Components

About a year ago, I had read about a requirement to build a Visualforce Page that had repeating tabs in it. It was figured out that just throw a <apex:repeat> in the page and be done. Not so fast. You’d think it would be easy but it was actually impossible at the time. The code started out like this:


   <apex:tab label=”Tab 1″/>

   <apex:tab label=”Tab 2″/>

   <apex:tab label=”Tab 3″/>


Description: Standard Visualforce Tabs

BUT, I needed the tabs to be dynamic.

I needed the information on the Visualforce Page to be loaded using code in an Apex Controller. Here’s what I tried:


<apex:repeat value=”{!tabLabels}” var=”t”>

      <apex:tab label=”{!t}”></apex:tab>



Should work right? Nope! you can’t put a tab inside a “repeater”. I ended up solving this issue with some jQuery but something easy turned into something a bit difficult. At the time, I was anticipating the release of Dynamic Visualforce Components. It was announced but then pulled from the General Availability of the Summer ’11 release.

Thankfully, Dynamic Visualforce Components are now available. Here’s how I solved the example above:

The Visualforce Code becomes just one line:

<apex:dynamicComponent componentValue=”{!myTabs}”/>

Here’s the Apex to create a tabPanel dynamically:

public Component.Apex.TabPanel getMyTabs()


//create parent panelComponent.Apex.TabPanel myTabPanel = new Component.Apex.TabPanel();

for (integer i=0;i<3;i++)  //just a sample, this could easily be a SOQL loop


Component.Apex.Tab myTab = new Component.Apex.Tab();

 myTab.Label = ‘Tab ‘ + string.valueOf(i+1);

  //add child tabs to the parent



return myTabPanel;



The code above makes the following dynamic tabPanel:

Description: Dynamic Visualforce TabPanel


Author: techila

No Comments

Post A Comment