[SalesForce] Display the fields properly in output panel while using actionRegion

I am using actionRegion for to show/hide the fields based upon picklist in Opportunity. When i am selecting the Stage picklist value is Closed Lost, then 4 text fields will be displays. It works fine. but the fields will not shown properly. what is the solution for to show these fields properly as like as remaining fields. Here i am attached the image to understand clearly.

enter image description here

Here i provided my code.

        <apex:pageBlockButtons >
             <apex:commandButton value="Save" action="{!save}"/>
             <apex:commandButton value="save & New" action="{!quicksave}"/>
             <apex:commandButton value="Cancel" action="{!cancel}"/>
        </apex:pageBlockButtons>

        <apex:pageBlockSection title="Opportunity information" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel > Opportunity Owner</apex:outputLabel>
                    {!$User.FirstName} {!$User.LastName}
                </apex:pageBlockSectionItem>
                <apex:inputField value="{!opportunity.CloseDate}"/>
                <apex:inputField value="{!opportunity.Name}"/>

                <apex:pageblockSectionItem >
                <apex:outputLabel value="Stage"/>
                <apex:actionRegion >
                          <apex:inputField value="{!Opportunity.StageName}">
                              <apex:actionSupport event="onchange" reRender="ajaxrequest" />
                          </apex:inputField>
                </apex:actionRegion>
                </apex:pageblockSectionItem>

                <apex:inputField value="{!opportunity.AccountId}"/>
                <apex:inputField value="{!opportunity.Probability}"/>
                <apex:inputField value="{!opportunity.Type}"/>
                <apex:inputField value="{!opportunity.Amount}"/>
                <apex:inputField value="{!opportunity.ForecastCategoryName}"/>
                <apex:inputField value="{!opportunity.Sales_Office__c}"/>
                <apex:inputField value="{!opportunity.CampaignId}"/>
                <apex:inputField value="{!opportunity.UI_Code__c}"/>
                <apex:inputField value="{!opportunity.CurrencyIsoCode}"/>
                <apex:inputField value="{!opportunity.Jobsite_Location__c}"/>
                <apex:inputField value="{!opportunity.LeadSource}"/>

                <apex:outputPanel id="ajaxrequest">  
                  <apex:pageblockSection rendered="{!Opportunity.StageName=='Closed Lost'}" >
                    <apex:inputField value="{!opportunity.Reason_for_Loss__c}"/>
                    <apex:inputField value="{!opportunity.Lost_To_whom__c}"/>
                    <apex:inputField value="{!opportunity.Competitor_s_Price__c}"/>
                    <apex:inputField value="{!opportunity.Competitor_s_MT__c}"/>
                  </apex:pageblockSection>
                </apex:outputPanel>


        </apex:pageBlockSection>
        <apex:pageBlockSection title="Additional Information" columns="2">
            <apex:inputField value="{!opportunity.NextStep}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Description Information" columns="2">
            <apex:inputField value="{!opportunity.Description}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

Best Answer

Referring to the Reference apex:actionSupport, an example can be constructed:

For the example, make sure to give the VF Page a valid Opportunity Id like 

apex/testPage?id=006i000000NMz1k

Controller:

    public class OpportunityExtension {

    public String reasonForLoss {get;set;}
    public String lostToWhom {get;set;}
    public String competitorsPrice {get;set;}
    public String competitorsMT {get;set;}

    public Opportunity opp {get;set;}

    public OpportunityExtension(ApexPages.StandardController sCon) {
        Id oppId = sCon.getId();
        if(oppId != null){
            this.opp = [SELECT Id, Name, StageName
                        FROM Opportunity
                        WHERE Id = :sCon.getId()
                        LIMIT 1];
        }
    }


    public void updateStageLossDetail(){
        if(opp.StageName != 'Closed Lost'){
            this.reasonForLoss = '';
            this.lostToWhom = '';
            this.competitorsPrice = '';
            this.competitorsMT = '';
            return;
        }
        this.reasonForLoss = 'Whoops';
        this.lostToWhom = 'The other guy';
        this.competitorsPrice = 'Way to low';
        this.competitorsMT = ':<';
    }
}

VF Page:

<apex:page standardController="Opportunity" extensions="OpportunityExtension">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
                <apex:outputPanel >
                    <apex:inputField value="{!opp.StageName}"/>
                    <apex:actionSupport event="onchange" 
                                        action="{!updateStageLossDetail}" 
                                        rerender="StageLossDetail"/>
                </apex:outputPanel>
                <apex:outputPanel id="StageLossDetail">
                    <apex:pageBlockSection columns="2">
                        <apex:inputText value="{!reasonForLoss}"  label="Reason For Loss"/>
                        <apex:inputText value="{!lostToWhom}" label="Loss to Whom"/>
                        <apex:inputText value="{!competitorsPrice}" label="Competitor's Price"/>
                        <apex:inputText value="{!competitorsMT}" label="Competitor's MT"/>
                    </apex:pageBlockSection>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Related Topic