Dynamic binding of input fields in Visualforce is a flexible approach to designing forms that adapt automatically based on the fields you want to display. Instead of hard-coding each field in the Visualforce page, developers use a list of fields defined in the controller. This way, if you ever need to add, remove, or change fields, you can simply adjust the list without modifying the Visualforce page itself, making updates much easier.

This method is especially helpful when different users need to see different fields. For instance, users in sales might only need to see specific fields, while finance teams may need others. With dynamic binding, you can define which fields are visible based on user roles or permissions, so each user only sees what’s relevant to them, streamlining the experience.

Dynamic binding also keeps forms in sync with any changes made to the Salesforce object itself. If a field is added or removed from the object, the form will automatically reflect those changes, keeping the interface up-to-date without requiring extra coding. This approach helps create forms that are intuitive, relevant, and always aligned with the latest data structure.

Examples : Dynamic Binding of Input Fields in Visualforce

Visualforce Page:

<apex:page sidebar="false" standardController="Testing__c" extensions="DynamicBindingFieldsOnVFPage">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection columns="1">
                <apex:repeat value="{!fields}" var="f">
                    <apex:inputField value="{!Testing__c[f]}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:commandButton value="Insert" action="{!doSave}"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Class:

public with sharing class DynamicBindingFieldsOnVFPage {
    public DynamicBindingFieldsOnVFPage(ApexPages.StandardController controller) {
    }

    public PageReference doSave() {
        // Placeholder for save functionality; currently does nothing
        return null;
    }

    public List<String> getFields() {
        List<String> lstFields = new List<String>();
        lstFields.add('Name');
        lstFields.add('city__c');
        return lstFields;
    }
}

Explanation of Example 1

This example demonstrates dynamic binding of input fields on a Visualforce page. The apex:repeat component is used to dynamically create input fields based on a list of field names in the Testing__c object. Here’s a breakdown:

  1. Visualforce Page Structure:
  • The page uses apex:repeat to loop through each field name from the fields list.
  • For each field in the list, it renders an apex:inputField, which binds dynamically to the Testing__c object’s field (e.g., Name or city__c).
  • The apex:commandButton with action="{!doSave}" allows you to handle a custom save operation.
  1. Apex Class:
  • The class DynamicBindingFieldsOnVFPage is an extension for the Testing__c object.
  • The getFields method returns a list of field names (Name and city__c) that are used by apex:repeat for rendering dynamic input fields.
  • The doSave method is a placeholder for saving functionality (currently does nothing).

Corrected Code for Example 2: Component

Visualforce Component:

<apex:component>
    <apex:form>
        <apex:outputText value="Welcome To Hyderabad" style="color:blue;font-size:30px;" />
    </apex:form>
</apex:component>

Calling Page with Component Usage:

<apex:page sidebar="false" standardController="Testing__c" extensions="DynamicBindingFieldsOnVFPage">
    <c:componentName /> <!-- Replace 'componentName' with the actual name of your component -->

    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection columns="1">
                <apex:repeat value="{!fields}" var="f">
                    <apex:inputField value="{!Testing__c[f]}"/>
                </apex:repeat>
            </apex:pageBlockSection>
            <apex:commandButton value="Insert" action="{!doSave}"/>
        </apex:pageBlock>
    </apex:form>

    <c:componentName /> <!-- Second usage of the component, if desired -->
</apex:page>

Explanation of Example 2

This example shows how to create and use a Visualforce component within a page.

  1. Visualforce Component:
  • The component displays a message, “Welcome To Hyderabad,” styled with blue color and a font size of 30px.
  • This component can be reused multiple times on a Visualforce page.
  1. Calling the Component on a Visualforce Page:
  • The component is included in the Visualforce page with <c:componentName />, where componentName is the actual name of the component.
  • The page also includes the same apex:repeat structure as in Example 1, using apex:inputField to bind dynamically to the Testing__c object’s fields.
  • The command button, similar to Example 1, provides a way to trigger the doSave action.

Summary

  • Example 1 demonstrates how to dynamically bind fields from an object using apex:repeat, allowing flexibility in displaying input fields based on an object’s structure.
  • Example 2 demonstrates how to use a Visualforce component on a page, making it possible to reuse a block of code with consistent functionality across different parts of a page or multiple pages.

This setup is helpful when you want to dynamically control field display or reuse content consistently across different sections of a Visualforce page.