What is the Difference Between Rendered, ReRender and RenderAs in visualforce?

What is the Difference Between Rendered, ReRender and RenderAs in visualforce?

Rendered :

A visualforce component in a VF page can be displayed or hidden by using rendered attribute. Rendered is bound to a Boolean variable in controller which can be switched between true and false making the vf component display or hide depending on Boolean value.

As an example:

Visualforce Page:

<apex:page controller="RenderedControllr">
 <!-- Rendered  Demo -->
 <apex:form >
   <apex:pageBlock >
    <apex:commandButton value="Show Bottom Page Block" action="{!ShowBlockMethod}"/>
   </apex:pageBlock>
    
   <apex:pageBlock rendered="{!ShowpageBlockFlag}">
    Account Name  :<apex:outputField value="{!accRec.name}"/>
<br/>
    Account Number :<apex:outputField value="{!accRec.accountnumber}"/>
   </apex:pageBlock>
 </apex:form>

</apex:page>

Controller : 

Public class RenderedControllr {
 Public Boolean ShowpageBlockFlag{get;set;}
 Public Account accRec{get;set;}

  Public RenderedControllr(){
   accRec = [select name,id,accountnumber from account limit 1];
   ShowpageBlockFlag = false;
  }
   
  Public void ShowBlockMethod(){
   ShowpageBlockFlag = true;
  }

}

Out put :



Once you click on Show Bottom Page Block..



Here lower page block is given rendered that is bound to a boolean variable "ShowpageBlockFlag". Initially (in constructor) this variable is set to false which hides the lower page block.

Once we click the command button, "ShowBlockMethod" method is called where this boolean is set to true and hence the lower page block gets displayed.


ReRender :
Rerender is used to refresh a particular section of the visualforce page. We have to just mention the id of the page section (in the Rerender attribute) that needs to be refreshed.

In the following example Clicking of the command button "Refresh Lower Page Block" refreshes the lower page block.

Visualforce Page:

<apex:page controller="ReRenderControllr">
 <!-- Render and Rerender Demo -->
     <apex:form >
           <apex:pageBlock >
                <apex:commandButton value="Refresh Lower Page Block" action="{!ShowBlockMethod}" rerender="pgblckID"/>
           </apex:pageBlock>
        
           <apex:pageBlock id="pgblckID">
               <b>  Output Text   : </b>   <apex:outputText value="{!OutPutString}"/>
           </apex:pageBlock>
     </apex:form>

</apex:page>


Controller Class: 

public class ReRenderControllr {

 Public string OutPutString{get;set;}
   
  Public ReRenderControllr(){
    OutPutString = 'Test value set in Constructor';
  }
   
  Public void ShowBlockMethod(){
   OutPutString = 'value set in method called by button click' ;
  }
  

}


Output:







Initially when the page is loaded the output string value is set in constructor as "Test value set in constructor".'

When the button is pressed method "ShowBlockMethod" is called where "OutPutString"  value is changed also lower page block is refreshed and hence the new value is displayed in the lower page block.

rerender="pgblckID" statement in command button indicates that the page block section with id ="pgblckID" should be refreshed when button is pressed. Only Lower page block is refreshed rest of the page remains as it is.

A single Rerender attribute could be used to refresh many sections of the page. For example: reRender= "pgblck1, pgbcl2"


RenderAs
This is used with page component and renders the page in the specified format. 

Following page will give output in pdf form /render as pdf.

Visualforce Page:

<apex:page standardController="Account" renderAs="pdf">

     <apex:pageBlock >

          <apex:outputField value="{!Account.name}"/>

          <apex:outputField value="{!Account.AccountNumber}"/>

     </apex:pageBlock>

</apex:page>

Posted in: Apex Examples,RenderAs in visualforce page,Rendered in Visualforce page,ReRender in visualforce page,Salesforce,salesforce training,Visualforce,Visualforce examples