Dynamic Components in Visualforce

If you are a Salesforce Developer then, you must have always thought about, can we use a dynamic label for a field? Or can we create a dynamic table with variable columns according to users? Can we create a dynamic form for, let’s say employee and client? The answer to above question is, yes, we can create such pages, using Dynamic Visualforce Components

Visualforce is primarily intended to be a static, markup-driven language that lets developers create a user interface that matches the Salesforce look-and-feel. However, there are occasions when it’s necessary to programmatically create a page. Usually, this is to achieve complicated user interface behavior that’s difficult or impossible with standard markup.

Dynamic Visualforce components offer a way to create Visualforce pages that vary the content or arrangement of the component tree according to a variety of states, such as a user’s permissions or actions, user or organization preferences, the data being displayed, and so on. Rather than using standard markup, dynamic Visualforce components are designed in Apex.

In the example, I am creating a dynamic PageBlock Section in which we are dynamically inserting InputText and Command Button and handling the logic accordingly.

Visualforce Page:

<apex:page controller="DynamicComponentExample">
    <apex:form>
        <apex:selectList size="1" value="{!selectedform}">
            <apex:selectOptions value="{!FormList}"/>
        </apex:selectList>
        <apex:commandButton action="{!changeForm}" value="Show Form"/><br/><br/>
        <apex:dynamicComponent componentValue="{!formPanel}" id="formpanel"/>
    </apex:form>
</apex:page>

Apex Code:

public class DynamicComponentExample {
     
    public string selectedform { get; set;}
    public string userId { get; set;}
     
    public DynamicComponentExample(){
        selectedform = 'client';
    }
     
    public list<SelectOption> getFormList(){
        list<SelectOption> formlist = new list<SelectOption>();
        formlist.add(new selectoption('client','Customer'));
        formlist.add(new selectoption('employee','Employees'));
        return formlist;
    }
     
    public Component.Apex.PageBlock getFormPanel(){
        Component.Apex.PageBlock pb = new Component.Apex.PageBlock();
        Component.Apex.OutputPanel op = new Component.Apex.OutputPanel();
        Component.Apex.OutputLabel OpLabel = new Component.Apex.OutputLabel();
        Component.Apex.inputText iptext = new Component.Apex.InputText();
        Component.Apex.CommandButton cmb = new Component.Apex.CommandButton();
        if (selectedform=='client') {
            OpLabel.value = 'Enter Client Id: ';
        } else if (selectedform=='employee'){
            OpLabel.value = 'Enter Employee Id: ';
        }
        OpLabel.for='idField';
         
        iptext.id = 'idField';
        iptext.expressions.value='{!userId}';
         
        if (selectedform=='client') {
            cmb.expressions.action = '{!saveClient}';
        } else if (selectedform=='employee'){
            cmb.expressions.action = '{!saveEmployee}';
        }
        cmb.value='Submit';
        pb.childComponents.add(op);
        op.childComponents.add(OpLabel);
        op.childComponents.add(iptext);
        op.childComponents.add(cmb);
        return pb;
    }
     
    public void saveClient(){
        System.debug('Client Save Action');
    }
     
    public void saveEmployee(){
        System.debug('Employee Save Action');
    }
     
    public void changeForm(){
        system.debug(selectedform);
    }
}

Output: