Activity Forums Salesforce® Discussions Explain Render and Rerender in Salesforce Lightning.

  • chanchal kumar

    Member
    August 30, 2018 at 1:01 pm

    Hello Shradha,

    Rendered:

    This to rendered(ie., display) particular filed or section based on boolean value.  In the controller you need to have get method to assign the value for this variable.

    Eg:

    <apex:inputField value="{obj.Filed_C}"  Rendered="{!val == true}"/>

    controller:

    public boolean val{get;set;}

    method(){
    val = true;
    }

    ReRender:

    This is to ReReder(ie.,Reload) some fields, or sections  after some operation/change. For this you need to assign id to field, sections.

    Eg:

    <apex:actionRegion>
        <apex:inputField value=”{!test}” >
            <apex:actionSupport event=”onchange” rerender=”yrs,yrss,yrsss,nodays,nohours,nominutes” action=”{!test}” >
                <apex:param name=”Para” value=”{!rowNum}” assignTo=”{!IndexValue}” />
            </apex:actionSupport>
        </apex:inputField>
    </apex:actionRegion>
    
  • Anjali

    Member
    August 30, 2018 at 1:06 pm

    Render in lightning:To override the base render()function after component initialization,You need to call superRender()function.It returns value (DOM or NULL).Anything needs to be changed during default rendering.

    render : function(component, helper) {
    var ret = this.superRender();
    // custom rendering logic here
    return ret;
    }

    Rerender in lightning:This is triggered due to anything change to the components.Need to call superRerender()function.Generally, it does not return a value.It is triggered if anything is changed to the components just like button disable after clicked the button to show some results.

    rerender : function(component, helper){
    this.superRerender();
    // custom rerendering logic here
    }

  • shariq

    Member
    September 19, 2018 at 12:28 am

    Hi,

    Create a Custom Renderer
    The framework’s rendering service takes in-memory component state and creates and manages the DOM elements owned by the component. If you want to modify DOM elements created by the framework for a component, you can modify the DOM elements in the component’s renderer. Otherwise, the framework will override your changes when the component is rerendered.
    The DOM is the language-independent model for representing and interacting with objects in HTML and XML documents. The framework automatically renders your components so you don’t have to know anything more about rendering unless you need to customize the default rendering behavior for a component.

    Base Component Rendering
    The base component in the framework is aura:component. Every component extends this base component.

    The renderer for aura:component is in componentRenderer.js. This renderer has base implementations for the four phases of the rendering and rerendering cycles:

    render()
    rerender()
    afterRender()
    unrender()
    The framework calls these functions as part of the rendering and rerendering lifecycles and we will learn more about them soon. You can override the base rendering functions in a custom renderer.

    Hope this helps.

  • Parul

    Member
    September 28, 2018 at 5:43 pm

    rerender():
    It allows the component to update themselves, when other component updates since they were last rendered. It doesn’t return any value. It automatically called when data is updated in the component. Call superRerender() to chain rerendering to the components in body attribute.
    Example:

    rerender : function(component, helper) {
    this.superRerender();
    // Write your custom code here.
    }

  • Avnish Yadav

    Member
    September 30, 2018 at 12:28 pm

    hi,

    render

    render : function(component, helper) {
    var ret = this.superRender();
    // custom rendering logic here
    return ret;}

    rerender

    rerender : function(component, helper){
    this.superRerender();
    // custom rerendering logic here
    }

Log In to reply.

Popular Salesforce Blogs