function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vinay RamuVinay Ramu 

Visualforce conditionally render as required

Need help on how this requirement can be achieved. 
Requirement: In Contact object, custom picklist field "Primary Contact Type" having values 'Other','Home','Mobile' and 'Work'. Based on value selected that particular picklist field 'Other Phone', 'Home Phone', 'Mobile Phone' and 'Work Phone' will be rendered as required.

Visualforce Page Code:
<apex:page standardController="Contact" extensions="conExtn">
    <apex:form id="conForm">
        <apex:pageBlock id="conBlk" title="Contact Details">
            <apex:pageMessages />
                <apex:pageBlockButtons location="top">
                    <apex:commandButton action="{!QuickSave}" title="QuickSave" value="Quick Save"/>
                </apex:pageBlockButtons>
                <apex:pageBlockSection title="Header Details">
                    <apex:outputField value="{!Contact.LastName}"/>
                    <apex:outputField value="{!Contact.FirstName}"/>
                    <apex:outputField value="{!Contact.Department}"/>                    
                </apex:pageBlockSection>
                <apex:pageBlockSection title="Phone Details" id="phDtls">
                        <apex:inputField value="{!Contact.Primary_Contact_Type__c}" required="{!isPrimary}" id="pConType">
                            <apex:actionSupport action="{!callSectionRefresh}" event="onchange" reRender="phDtls" immediate="true">
                                <apex:param id="contactType" name="conType" value="{!Contact.Primary_Contact_Type__c}" assignTo="{!cType}"/>
                            </apex:actionSupport>
                        </apex:inputField>
                    <apex:inputField label="Other" value="{!Contact.OtherPhone}" rendered="{!Contact.Primary_Contact_Type__c='Other'}" required="{!isOther}"/>
                    <apex:inputField label="Mobile" value="{!Contact.MobilePhone}" rendered="{!Contact.Primary_Contact_Type__c='Mobile'}" required="{!isMobile}"/>
                    <apex:inputField label="Home" value="{!Contact.HomePhone}" rendered="{!Contact.Primary_Contact_Type__c='Home'}" required="{!isHome}"/>
                    <apex:inputField label="Work" value="{!Contact.Phone}" rendered="{!Contact.Primary_Contact_Type__c='Work'}" required="{!isWork}"/>
                </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller Extension:
public class conExtn {
    public Contact con;
    public String conType;
    public object cType {get; set;}
    public Boolean isOther {get; set;}
    public Boolean isHome {get; set;}
    public Boolean isMobile {get; set;}
    public Boolean isWork {get;set;}
    public Boolean isPrimary {get;set;}
    
    public conExtn(ApexPages.StandardController controller) {
        this.con = (Contact) controller.getRecord();
        System.debug('Record Id is ' + con.Id);
        if(con.Id != null)
            refreshSection(con.Primary_Contact_Type__c);
    }
    public void makeAllOptional(){
        isOther    = false;
        isHome     = false;
        isMobile   = false;
        isWork     = false;
        isPrimary  = true;
    }
    public void refreshSection(String conType){
        makeAllOptional();
        System.debug('Inside refreshSection conType value is ' + conType);
        if(con.Primary_Contact_Type__c == 'Other'){
            isOther = true;
        }
        else if(con.Primary_Contact_Type__c == 'Mobile'){
            isMobile = true;
        }
        else if(con.Primary_Contact_Type__c == 'Work'){
            isWork = true;
        }
        else if(con.Primary_Contact_Type__c == 'Home'){
            isHome = true;
        }
        else{
            isPrimary = true;
        }
    }

    public static void setconType(String conType){
        System.debug('Inside set conType ' + conType);
    }
    public void getconType(){
        this.conType = con.Primary_Contact_Type__c;
        System.debug('Inside get conType ' + conType);
    }
    public void callSectionRefresh(){
        System.debug('cType in callSectionRefresh is ' + (String) cType);
        conType = (String) cType;
        refreshSection(conType );
    }
}

Always controller is passed "Primary Contact Type" in database and not the value changed in UI as its not saved yet.

Thanks,
Vinay
Khan AnasKhan Anas (Salesforce Developers) 
Hi Vinay,

Greetings to you!

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.
<apex:page standardController="Contact">
    
    <apex:form id="theForm">
        
        <apex:pageBlock>
            <apex:pageblockSection>
                <apex:inputField value="{!Contact.Primary_Contact_Type__c}">
                    <apex:actionSupport event="onchange" reRender="theForm"/>
                </apex:inputField>
            </apex:pageblockSection>
        </apex:pageBlock>
        
        <apex:pageblock>
            <apex:pageblockSection rendered="{!Contact.Primary_Contact_Type__c = 'Other'}">
                <apex:inputField value="{!Contact.OtherPhone}"/>
            </apex:pageblockSection>
            
             <apex:pageblockSection rendered="{!Contact.Primary_Contact_Type__c = 'Mobile'}">
                <apex:inputField value="{!Contact.MobilePhone}"/>
            </apex:pageblockSection>
            
            <apex:pageblockSection rendered="{!Contact.Primary_Contact_Type__c = 'Home'}">
                <apex:inputField value="{!Contact.HomePhone}"/>
            </apex:pageblockSection>
            <apex:pageblockSection rendered="{!Contact.Primary_Contact_Type__c = 'Work'}">
                <apex:inputField value="{!Contact.Phone}"/>
            </apex:pageblockSection>
        </apex:pageblock>
        
    </apex:form>
    
</apex:page>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Vinay RamuVinay Ramu
Hi Khan Anas,

As per my requirement, if "Primary_Contact_Type__c" is none of those options available or null, it should be rendered as required.

Second requirement if user selects Mobile then, Mobile should be redered as required and same ways for other options as well. Mainly, I got struck with issues when for e.g., "Home" is selected then, "Home Phone" rendered as required but upon changing to "Other" it is showing "Home Phone" still as required with error to enter value. 

Please see if this can be achieved.

Thanks,
Vinay