How to add dynamic components to visualforce page


To create a dynamic pages and its structure, you can use ‘Dynamic Component factory’ Algorithm.
You can divide page into different blocks like here is example of FullWidgets.

Consider Objects for above example
1. IPA_Page__c (record creates a new VF Page)
2. IPA_widget__c (record creates a new Widget)
3. IPA_Page_Widget__c (Junction Object)

/* ————————- Dynamic VF page ——————————- */
<apex:page showheader=”false” standardStylesheets=”true” doctype=”html-5.0″ applyHtmlTag=”false” controller=”IPA_UI_DynamicPage”>
<apex:dynamicComponent componentValue=”{!FullWidgets}” />

/* ——————- IPA_UI_DynamicPage Controller —————————— */
public class IPA_UI_DynamicPage
private IPA_DynamicPageComponentFactory factory;
private IPA_BO_LinksManagement ipa_bo;
private IPA_DAL_DynamicPage ipa_dal;
public String pageId;
public List<IPA_Page_Widget__c> lstWidgets;

public IPA_UI_DynamicPage()
factory = new IPA_DynamicPageComponentFactory();
ipa_dal = new IPA_DAL_DynamicPage();
ipa_bo = new IPA_BO_LinksManagement();
pageId = ”;

pageId = ApexPages.currentPage().getParameters().get(‘Id’);
//Get all widgets for this page
lstWidgets = ipa_dal.returnAllWidgets(pageId);
}catch(Exception ex) {}

public Component.Apex.OutputPanel getFullWidgets()
List<IPA_Page_Widget__c> lstTmp = new List<IPA_Page_Widget__c>();
for(IPA_Page_Widget__c w: lstWidgets) {
if(w.Display_Column__c == ‘Full’) lstTmp.add(w);
return factory.createPanel(lstTmp);

/* ———————— DCF controller ——————— */
public with sharing class IPA_DynamicPageComponentFactory
private IPA_DAL_DynamicPage dal;

public IPA_DynamicPageComponentFactory()
//Initialize DAL
dal = new IPA_DAL_DynamicPage();

public Component.Apex.OutputPanel createPanel(List<IPA_Page_Widget__c> lstWidgets)
Component.Apex.OutputPanel outPanel = new Component.Apex.OutputPanel();
//Create & Add Components for each Widget
for(IPA_Page_Widget__c w: lstWidgets)
if(w.Widget__r.VisualForce_Component_Name__c == ‘IPA_EventsHolidaysComponent’)
Component.c.IPA_EventsHolidaysComponent ipaEventsHolidaysComponent = new Component.c.IPA_EventsHolidaysComponent(pageWidgetVar = w);
// add more Components with ‘if’ condition

/*—————— VF Component ——————————-*/
<apex:component controller=”IPA_EventsHolidaysComponentController”>
<apex:attribute name=”pageWidgetVar” description=”Page Widget instance the component represents.”
type=”IPA_Page_Widget__c” required=”false” assignTo=”{!pageWidgetObj}”/>

<!– Data Fetching –>

/* ———————— Component controller —————————- */
public class IPA_EventsHolidaysComponentController
public List<IPA_Articles__c> lstEvents {get; private set;}
public List<IPA_Articles__c> lstHolidays {get; private set;}
public IPA_Page_Widget__c pageWidgetObj {get; set;}
public String Widget_title {get; set;}

public void getFetchContent()
// write SOQL to display records for the Widget

/* ———————— IPA_DAL_DynamicPage apex class———————————————– */
public with sharing class IPA_DAL_DynamicPage
//get Boolean value to make sure Page mark as published or not
public Boolean returnIsPagePublished(String pageId)
boolean isPublished;
isPublished = [Select Id, Published__c from IPA_Page__c where Id =: pageId].Published__c;
return isPublished;

public List<IPA_Page_Widget__c> returnAllWidgets(String pageId)
List<IPA_Page_Widget__c> lst = new List<IPA_Page_Widget__c>();
lst = [select Id, Widget__r.VisualForce_Component_Name__c, Weight__c, Page__r.Category__c,
Page__r.Category__r.Name, Display_Label__c, Parent_Tab_Group_Widget__c, Display_Column__c
from IPA_Page_Widget__c
where Page__r.Id = : pageId and Active__c = true
and Widget__r.Active__c = true and Parent_Tab_Group_Widget__c = null
order by Weight__c];
}catch(Exception e) {}
return lst;
<apex:dynamicComponent> : This tag acts as a placeholder for your dynamic Apex components.
It has one required parameter—componentValue—which accepts the name of an Apex method that returns a dynamic component.

About the author

By kalpesh.surana