Using Dynamic Visualforce Components

First thing first, what are these Dynamic Visualforce Components? Let’s say we want to show a particular column of a table under a specific condition. Option number one is using an ‘If’ expression in the rendered part of that column. But the expression tends to be complicated. Option number two is, creating the same expression in APEX as code, and then simply calling that function in the rendered attribute, which is actually the same as the first one. The third option is completely removing the column from the Visualforce code. Yes, that is what dynamic Visualforce is all about. In simple words, components are created in apex code and then displayed in the Visualforce page.

Now that we have an idea about what Dynamic Visualforce is, let’s create a visualforce page.

For this example I am going to create a page with an option to select which form we want to show, and the form itself. The form will be dynamically created inside the class.

public class DynamicComponentExample {

    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     **/
    
    public string selectedform { get; set;}
    public string userId { get; set;}
    
    public DynamicComponentExample(){
        selectedform = 'client';
    }
    
    public list getFormList(){
        list formlist = new list();
        formlist.add(new selectoption('client','Customer'));
        formlist.add(new selectoption('employee','Employees'));
        return formlist;
    }
    
    public Component.Apex.OutputPanel getFormPanel(){
        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.expressions.value='{!userId}';
        
        if (selectedform=='client') {
            cmb.expressions.action = '{!saveClient}';
        } else if (selectedform=='employee'){
            cmb.expressions.action = '{!saveEmployee}';
        }
        cmb.value='Submit';
        op.childComponents.add(OpLabel);
        op.childComponents.add(iptext);
        op.childComponents.add(cmb);
        return op;
    }
    
    public void saveClient(){
        System.debug('Client Save Action');
    }
    
    public void saveEmployee(){
        System.debug('Employee Save Action');
    }
    
    public void changeForm(){
        system.debug(selectedform);
    }
}

As we can see that the class is just like any normal class, it has a name, a constructor, getter function for select list, and three functions in the end, which are doing nothing, and are used for test purpose only. However there is one function, getFormPanel(), which actually the function responsible for constructing the form which will be displayed in the Visualforce Page.

The return type of the getFormPanel() function will be the same as the tag that we want to dynamically generate in the form. In this class we can see that the return type is Component.Apex.OutputPanel, which means that the returned tag will be <apex:outputPanel>. The class that is being used in this example is Component class. Component.apex means that the namespace of generated component will be apex. This can be used according to our need, or completely omitted. If you are using the custom component of some other developer, use their namespace here in place of apex.

Next we create a variable of the same type inside the function. We have also created an inputtext, an outputlabel and a commandbutton, which will be displayed inside the form. All the attributes of the components are directly accessible, like value or the for attribute in OpLabel. The attributes which require expression to be used, are written like cmb.expressions.action for the commandbutton action.

Once we are finished creating all the child components, we add them to the op variable with the help of op.childComponent.add(). The components will be shown in exactly the same order they were added.

Next up is creating the actual visualforce page which will be rendering the dynamic content.

<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>

Now this Visualforce page is just like any other page, except for one simple thing, it contains a tag <apex:dynamicComponent/> which is used for as a markup to set for the dynamic content which will be displayed inside the page. The value attribute of this tag is referring to the getFormPanel() in our APEX class. Now the form displayed in this page will completely depend on the selected value in select list.

Once the visualforce page is saved you can preview it to see the effects.

To check which function was called for either form, you can check the debug log, where the debug will show the name of the function called.

That’s all for using dynamic visualforce components, for any further queries feel free to add a ticket at:

https://webkul.uvdesk.com/en/customer/create-ticket/

Or let us know your views on how to make this code better, in comments section below.