Display the fields properly in output panel while using actionRegion

Question

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>

Are you rerendering the the outputPanel..?please share your code. — NullReferenceException, Aug 19, 2014 at 17:20

Scott Pelak · Accepted Answer · 2014-08-19 17:34:14Z

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>

Thanks for your reply. can you tell me one more.. In Custom VF Page for Opportunity, when selecting Stage field Probability and forecasting are not filling by default. In standard Opportunity page if we select Stage field by default Probability and Forecasting fields are filled. Is there any solution for this...? — Vijay Kumar, Aug 20, 2014 at 6:26

Jenny B · Accepted Answer · 2014-08-20 05:28:39Z

Try using the pageblocksectionitem to preserve formatting, more information can be found here.

Example:

<apex:pageBlockSectionItem >
    <apex:outputLabel value="Owner"/>
    <apex:actionRegion >
        <apex:inputField value="{!Case.OwnerId}">
             <apex:actionSupport event="onchange" rerender="comment"/>
        </apex:inputField>
    </apex:actionRegion>
</apex:pageBlockSectionItem>

Edit:

<apex:pageBlock>
            <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.CampaignId}"/>
                    <apex:inputField value="{!opportunity.LeadSource}"/>
            </apex:pageBlockSection>
            <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 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>

I am used this code for Stage field. Can you suggest the code for last four fields. my code is <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> — Vijay Kumar, Aug 20, 2014 at 3:24
Can you update your question with the formatted code, but can you include the entire page? Just that code is rendering properly for me so I'm thinking it's something further up on the page. — Jenny B, Aug 20, 2014 at 4:02
Actually, I think you just need to put columns="1" in your <apex:pageblockSection columns="1" rendered="{!Opportunity.StageName=='Closed Lost'}"> — Jenny B, Aug 20, 2014 at 4:08
i added the complete code of VF Page in question. If i put columns="1" then it shows one by one in same column. but i want left to right. Reason for loss is beside the Lead Source and Lost to home under the Lead Source etc.. — Vijay Kumar, Aug 20, 2014 at 5:13
I updated my answer with your code, but you should be able to just pull that ouputpanel out of the pageblocksection and hide the header. Basically your outputpanel is being treated as 1 item inside the outer pageblocksection. Note: I removed some of your custom fields so don't use the full code. — Jenny B, Aug 20, 2014 at 5:30

dBeltowski · Accepted Answer · 2015-04-24 02:09:17Z

Your problem is that you have one tag nested inside another tag. Try changing your Visualforce code to the following and see if this is the desired result

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


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

Derek F · Accepted Answer · 2018-05-14 12:37:07Z

-1

this is because of page blockssection in pageblock section change code

<apex:outputPanel>
    <apex:pageblocksection>
        <apex:pageblocksectionitem>
        <apex:pageblocksectionitem/>
    </apex:pageblocksection>
</apex:outputPanel>

in lasst use ur code

edited May 14, 2018 at 12:37

Derek F

49.6k13 gold badges44 silver badges77 bronze badges

answered May 14, 2018 at 7:11

Sunil Chandel

649 bronze badges

Add a comment |

Stack Exchange Network

current community

your communities

more stack exchange communities

Display the fields properly in output panel while using actionRegion

4 Answers 4

Your Answer

Not the answer you're looking for? Browse other questions tagged visualforce dynamic-visualforce actionsupport outputpanel or ask your own question.

Hot Network Questions

Display the fields properly in output panel while using actionRegion

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged visualforce dynamic-visualforce actionsupport outputpanel or ask your own question.

Related

Hot Network Questions