+ Start a Discussion
BrianWKBrianWK 

Rerendering multiple forms and fields with outputpanels - Best Practice Question

Hey everyone! I hope I can get some thoughts on the best practice of using Outputpanels when rerendering forms and fields. I'm currently creating a form with multiple fields. As each field in the form is updated I refresh a "Warnings" area. The Warnings area is a separate form and intended to prompt the user to make corrections. It acts as an early "soft" validation rule.

 

The desired functionality is when user enters or deletes data on the field, the Warnings area is re-rendered and displays the appropriate warning messages based on the current form data. For an example: I delete the Start Date - the Warning form displays "Start Date is missing." -- I delete Total Price Paid -- The warnings displays "total price paid missing"

 

At one point I thought I had the refreshing working out great. I'm not sure what I did, but the refreshing has stopped working for most instances. I've tried a few different examples to get the refresh to work the way I intended. What frustrates me is the fields within the form being updated rerender just fine, but my Warnings form only seems to rerender when the WHOLE form should disappear. The individual fields no longer rerender.

 

 

Here's a code example using BOTH examples. This is for the warning form.

<apex:form id="WarningsForm" id="Warnings">	
	<apex:pageblock title="Warnings" id="WarningBlock" rendered="{!NewProductValidation}" >
		<table>
		<tr><td>
		<apex:outputlabel value="Date Warnings:" style="font-weight:bold;"/> <br/>
			<apex:outputpanel id="StartNull" rendered="{!NewProduct.Start_Date__c == null}">
			&nbsp; <apex:outputtext value="Start Date is Missing"  /> <br/>
			</apex:outputpanel>
			<apex:outputpanel rendered="{!NewProduct.End_Date__c == null}">
			&nbsp; <apex:outputtext value="End Date is Missing" /> <br/>
			</apex:outputpanel>
			<apex:outputpanel rendered="{!DateError}">
			&nbsp; <apex:outputtext value="End Date is less than or equal to Start Date" /> <br/>
			</apex:outputpanel>
		</td><td></td><td>
		<apex:outputlabel value="Quantity and Price Warnings:" style="font-weight:bold;"/> <br/>
			<apex:outputpanel rendered="{!NewProduct.Total_Amount_Paid__c == null && (NewProduct.Total_Amount_Paid__c >=0)==false}">
			&nbsp; <apex:outputtext value="Total Amount Paid is missing"  /> <br/>
			</apex:outputpanel>		
			<apex:outputpanel rendered="{!NewProduct.Unit_Price__c == null && (NewProduct.Unit_Price__c >=0)==false}">
			&nbsp; <apex:outputtext value="Unit Price is missing" /> <br/>
			</apex:outputpanel>		
			<apex:outputpanel rendered="{!NewProduct.Unit_Quantity__c == null && (NewProduct.Unit_Quantity__c >=0)==false}">
			&nbsp; <apex:outputtext value="Unit Quantity is missing" /> <br/>
			</apex:outputpanel>		
			<apex:outputpanel id="UnitQuantity" rendered="{!NewProduct.Unit_Quantity__c != null && NewProduct.Unit_Quantity__c < 1}">
			&nbsp; <apex:outputtext value="Unit Quantity is less than 1" /><br/>
			</apex:outputpanel>		
		</td></tr>
		</table>		 
	</apex:pageblock>	
</apex:form>

 

And here is a snippet of the form with the fields being populated by the end user:

	<apex:outputpanel id="SelectContractProducts" >
		<apex:pageblock id="ContractProductsBlock" title="Select Contract Products" rendered="{!Display}"  >
			<apex:pageblockbuttons location="bottom">
				<apex:outputpanel id="Addbuttons">
				<apex:CommandButton value="Add to Cart" action="{!AddProduct}" rerender="TheEditPage,table,SelectContractProducts,ProductList, Warnings" rendered="{!Product != '' && NewProductValidation ==false}" status="LoadStatus" /> 
				<apex:CommandButton value="Add to Cart and Default" action="{!AddProductNClear}" rerender="TheEditPage,table,SelectContractProducts,ProductList, Warnings" rendered="{!Product != '' && NewProductValidation ==false}" status="LoadStatus" /> 
				<apex:CommandButton value="Refresh"  rerender="SelectContractProducts"  rendered="false"/>
				</apex:outputpanel>
			</apex:pageblockbuttons>	
				 <apex:pageblocksectionitem >
				 	<apex:outputlabel value="Unit Quantity" />
				 	<apex:outputpanel id="UnitQuantity">
				 	<apex:inputfield value="{!NewProduct.Unit_Quantity__c}" rendered="{!Product != '' || Product != null}">
						<apex:actionsupport action="{!CalculateTotal}" event="onblur" rerender="UnitQuantity, WarningBlock, CappedAmt, Rec_Rev_Term, Addbuttons, TotalPaid, Monthly, Annual, OneTime, Discount" status="status" >
							<apex:param name="Unit_Quantity" value="Unit_Quantity" assignTo="{!UpdatedField}" />
						</apex:actionsupport>
					</apex:inputfield>			
					</apex:outputpanel>
				 </apex:pageblocksectionitem>
				<apex:pageblocksectionitem >				
					<apex:outputlabel value="Unit Price" />
					<apex:outputpanel id="UnitPrice">
					<apex:inputfield value="{!NewProduct.Unit_Price__c}" rendered="{!Product != '' || Product != null}">
						<apex:actionsupport action="{!CalculateTotal}" event="onblur" rerender="CappedAmt, Rec_Rev_Term, Addbuttons, TotalPaid, Monthly, Annual, OneTime, Discount, Warnings" status="status" >
							<apex:param name="Unit_Price" value="Unit_Price" assignTo="{!UpdatedField}" />
						</apex:actionsupport>					
					</apex:inputfield>				
					</apex:outputpanel>					
				</apex:pageblocksectionitem>
				<apex:pageblocksectionitem >				
					<apex:outputlabel value="Start Date" />
					<apex:inputfield value="{!NewProduct.Start_Date__c}" rendered="{!Product != '' || Product != null}" >
						<apex:actionsupport action="{!CalculateTotal}" event="onblur" rerender="StartNull, CappedAmt, test, Rec_Rev_Term, Addbuttons, Monthly, Annual, OneTime, Discount" status="status" >
							<apex:param name="Start_Date" value="Start_Date" assignTo="{!UpdatedField}" />
						</apex:actionsupport>
					</apex:inputfield>					
				</apex:pageblocksectionitem>	   </apex:pageblocksection>   
  </apex:pageblock>
 </apex:outputpanel> 
  	

 

 

It's a fairly long form so I didn't copy and paste everything.

 

I've tried two methods:

 

1. Outputpanel around each field. The rendered attribute is on the outputpanel. When user enters data on the form #2 it rerenders the whole form. Example of this is the "Unit Price" field

2. Outputpanel around each field. The rendered attribute and ID is on the outputpanel. When User enters data on the form #2 it rerenders the specific outputpanel. Example is the "Start Date" rerendering "StartNull"

3. Same scenario as number two but rerenders both the outputpanel and the whole form

 

Other thoughts that I've tried and didn't get to work. Outputpanel on each field. The render attribute is on these outputpanels. All outputpanels are nestled in an Outputpanel with an ID and NO render attribute. When user enter data on form #2 it rerenders the Outter Outputpanel (the one with the ID).

 

What am I doing wrong? What's the best practice I should follow when having multiple pageblocks forms and fields that I need to rerender?