0

I have a formatting issue caused by an extra output panel needed for rerendering on my visualforce page. The functionality works they way I have it now, but the formatting is ugly and I want to be able to have the fields aligned correctly.

Field #2 (Is License Requested...) controls whether or not fields 3, 4, 5, and 6 display (Account String, BU String, ect.) I want to be able to keep the structure of the visualForce page, but be able to succesfully get the other fields to dynamically display.

I should note:

  • Rerendering the parent outputPanel of all of this markup works, but I'll lose my data in the top fields then.

  • Rerendering the individual outputPanel ids (acctStringId and buStringId2) doesn't work. I need to include the testMeId in order for it to show up.

enter image description here

<!--field 1-->  <apex:inputField required="{!multiLicenseActivate}" value="{!User_Support__c.Business_Unit__c}" label="Business Unit"/>
<!--field 2-->  <apex:pageBlockSectionItem>
                  <apex:outputLabel value="Is License Requested for GCO User?" for="licReqGCOid"/>
                  <apex:actionRegion>
                    <apex:inputField id="licReqGCOid" required="{! (multiLicenseActivate==true && (User_Support__c.Salesforce_License__c==true || User_Support__c.Qvidian_License__c==true)) }" value="{!User_Support__c.Is_License_Requested_for_GCO_User__c}" >
                      <apex:actionSupport status="actStatusId2" event="onchange" rerender="testMeId,acctStringId,buStringId,dcId,ouStringId"/><!--manually rerendering the individual ids (acctStringId2, buStringId2) doesn't work without the parent outputPanel (testMeId).-->
                    </apex:inputField>
                  </apex:actionRegion>
                </apex:pageBlockSectionItem>

                <apex:outputPanel id="testMeId"><!--need this to successfully rerender the outputPanel-->
<!--field 3-->      <apex:pageBlockSectionItem>
                    <apex:outputPanel rendered="{! User_Support__c.Is_License_Requested_for_GCO_User__c=='No' }" id="acctStringId">
                    <apex:outputLabel value="Account String" for="acctStringId2"/>
                    <apex:inputField id="acctStringId2" required="{! (multiLicenseActivate==true && User_Support__c.Qvidian_License__c==true) }"  value="{!User_Support__c.Account_String__c}" label="Account String"/>
                    </apex:outputPanel>
                    </apex:pageBlockSectionItem>

<!--field 4-->      <apex:pageBlockSectionItem>
                    <apex:outputPanel rendered="{! User_Support__c.Is_License_Requested_for_GCO_User__c=='No' }" id="buStringId">
                    <apex:outputLabel value="BU String" for="buStringId2"/>
                    <apex:inputField id="buStringId2" required="{! (multiLicenseActivate==true && (User_Support__c.Salesforce_License__c==true || User_Support__c.Qvidian_License__c==true)) }" label="BU String" value="{!User_Support__c.BU_String__c}"/>
                    </apex:outputPanel>
                    </apex:pageBlockSectionItem>
                </apex:outputPanel>
  • you can use <apex:panelgrid> for this type of scenarios, otherwise create a separate section to display all the fields, below to "Is License Requested for GCO User" – Santanu Boral Mar 8 '17 at 22:25
3

Unfortunately if the Section items are not rendered the first time then they will not be rendered properly.

Also note that <apex:pageBlockSectionItem> components can't be rerendered; rerender the child components instead.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSectionItem.htm

A work around is to rerender the page block itself with the downside being you will have a blank spot on the right but will get you closest to what you want would be as follows:

<apex:page standardController="Account">

    <apex:form>
        <apex:actionFunction name="rerenderMe" reRender="thePageBlock"/>

        <apex:pageBlock id="thePageBlock">

            <apex:pageBlockButtons>
                <button type="button" onclick="rerenderMe();">Click Me</button>
            </apex:pageBlockButtons>

            <apex:pageBlockSection title="The Account" columns="2">

                <apex:pageBlockSectionItem>
                    <apex:outputLabel>Account Name</apex:outputLabel>
                    <apex:inputField value="{!Account.Name}"/>
                </apex:pageBlockSectionItem>


            </apex:pageBlockSection>

            <apex:pageblockSection rendered="{!Account.Name = 'me'}">

                    <apex:pageBlockSectionItem>
                        <apex:outputLabel>Billing Street</apex:outputLabel>
                        <apex:inputField value="{!Account.BillingStreet}" />
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem>
                        <apex:outputLabel>Billing State</apex:outputLabel>
                        <apex:inputField value="{!Account.BillingState}"/>
                    </apex:pageBlockSectionItem>



            </apex:pageblockSection>
        </apex:pageBlock>

    </apex:form>


</apex:page>

This would render properly except for leaving the empty spot on the right.

On Load On Load

Enter me and click button Enter me and Click Button

If you want everything to be in that spot on the right column the a panel grid would be the way to go (per comment from Santanu Boral)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.