Thursday, August 21, 2014

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 :

save image

Once you click on Show Bottom Page Block..
save image


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:
save image



save image


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>









11 comments:

Abhishek Puri said...

awesome it is

Vasanth said...

Neatly explained with output screenshots.. Thanks for sharing

Unknown said...

Nice Explanation

sfdc consultant said...

Hi Guys, I have all latest dumps of salesforce certification (Summer ‘17) if anyone wants you can mail me at
sfdcconsultant25@gmail.com

These are original questions from the certification exam and very useful to pass the exam.
Above 90% questions come from it
I have all latest dumps of following exams

Salesforce Administrator (ADM 201)
Salesforce Sales Cloud Consultant (CON 201)
Salesforce Service Cloud Consultant
Platform Developer I
App Builder and App builder transition exam

Good Day!

SfdcSood said...

Amazing blog

Anonymous said...

frdf

Unknown said...

Thanks for choose the most easiest way to get it understood.

abhi said...

Nice blog Thank you very much for the information you shared.

Web Development Internship in Bangalore

Website Designing Internship Internship in Bangalore

Internship Program

Unknown said...

precise explanation thank you for this

Mr Rahman said...

Hey It's Really Nice Post & thanks for sharing.
Oflox Is The Best Website Designing Company In Dehradun

sanjana said...

nice article.. Have a look on Social Media Marketing Companies in Bangalore. Way to create a buzz for your website.
Visit digitalmarketingseo.in

Post a Comment

 
| ,