0

enter image description here

See above screenshot.

Questions

  1. How do I get the UPA and the list box stacked side-by-side just like the Gender field. I've also used a PageBlockSectionItem here.

  2. Also, why is the alignment off for UPA field from the rest of the fields? How do I position that under Phone field?

  3. I have a larger example (not shown here) where if I select UPA as YES, it magically displays another field. Is there a way to re-render only a "specific" field on a VF page so that you keep the aligment and the label formatting/field side-by-side. What's the best way to accomplish this?

Page

<apex:page controller="ActionFunctionController">
<apex:form >
<apex:pageBlock >

        <apex:pageBlockSection id="pbs1">

                <apex:inputfield id="acctname"  value="{!acct.name}"  required="true"  />
                <apex:inputfield id="acctphone" value="{!acct.phone}" />


            <apex:pageBlockSectionItem >

                    <apex:outputLabel value="{!$ObjectType.contact.fields.Gender__c.label}"  />
                    <apex:actionRegion >
                        <apex:inputfield id="gender" 
                                        value="{!cont.Gender__c}" 
                                        required="true" 
                                        onchange="checkGender()"/>
                        <apex:actionFunction name="checkGender" action="{!checkGender}" rerender="opc"  />
                    </apex:actionRegion>                                            
                </apex:pageBlockSectionItem>

                <apex:outputPanel id="opc">


                    <apex:pageBlockSectionItem rendered="{!showUp}">
                        <apex:outputLabel   value="UPA" for="u1" />
                        <apex:inputfield    id="u1"
                                            value="{!cont.Upanayanam__c}" 

                                            required="true" />
                    </apex:pageBlockSectionItem>

            </apex:outputPanel>

    </apex:pageBlockSection>

    </apex:pageBlock>
</apex:form>

Controller

public with sharing class ActionFunctionController {
public Account acct{get;set;}
public Contact cont{get;set;}
public boolean checkPhone{get;set;}
public boolean showUp{get;set;} 

public ActionFunctionController(){
    acct = new Account();
    cont = new Contact();
    showUp=false;
}

public void checkGender(){
    system.debug('inside checkGender');
    if (cont.gender__c == 'Male')
        showUp=true;
    else
        showUp=false;


}
}
  • If <apex:outputPanel id="opc"> and its ending tag is removed the page style will be displayed just ok. You can assign opc Id to pageBlockSectionItem. I am not sure if that will reRender correct. worth trying though. – abdn Oct 23 '15 at 16:07
0

Abdn

I'm not sure what you mean by removing the ending tag. Can you elaborate?

Is this what you're suggesting to do? If so, it wouldn't work since it would not have an element to re-render.

 <!-- apex:outputPanel id="opc" -->


                <apex:pageBlockSectionItem id="opc" rendered="{!showUp}">
                    <apex:outputLabel   value="UPA" for="u1" />
                    <apex:inputfield    id="u1"
                                        value="{!cont.Upanayanam__c}" 

                                        required="true" />
                </apex:pageBlockSectionItem>

        <!-- apex:outputPanel -->
|improve this answer|||||
  • Yes. I suggested just like that. – abdn Oct 23 '15 at 19:40
  • Abdn - It wouldn't work. You may try it on your end to verify. – JJSHHS Oct 25 '15 at 4:31
  • I verified and it is not working. you may need to change your approach and use javascript to hide/show the pageBlockSectionItem. Like onChange, call a JS function which validates the value and take the decision to hide/show. Then from the same function call an actionFunction to execute any Apex method if you need to. – abdn Oct 25 '15 at 10:16
0

I believe you can get rid of the output panel and just re-render your whole pageblock section like this:

 <apex:pageBlockSection id="pbs1">

            <apex:inputfield id="acctname"  value="{!acct.name}"  required="true"  />
            <apex:inputfield id="acctphone" value="{!acct.phone}" />


        <apex:pageBlockSectionItem >

                <apex:outputLabel value="{!$ObjectType.contact.fields.Gender__c.label}"  />
                <apex:actionRegion >
                    <apex:inputfield id="gender" 
                                    value="{!cont.Gender__c}" 
                                    required="true" 
                                    onchange="checkGender()"/>
                    <apex:actionFunction name="checkGender" action="{!checkGender}" rerender="pbs1"  />
                </apex:actionRegion>                                            
            </apex:pageBlockSectionItem>


                <apex:pageBlockSectionItem rendered="{!showUp}">
                    <apex:outputLabel   value="UPA" for="u1" />
                    <apex:inputfield    id="u1"
                                        value="{!cont.Upanayanam__c}" 

                                        required="true" />
                </apex:pageBlockSectionItem>
|improve this answer|||||
  • Jason. I tried that. However, it would refresh the values from NAME and Phone fields too. I didn't want that, hence I tried to do a partial refresh. – JJSHHS Oct 25 '15 at 4:29

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.