function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How to refresh/reload/update an individual component of a lightning app based on some action performed in a different component?[Implemented a standalone app]

I have implemented a lightning app in which I have 2 components
- A modal window component to create an opportunity record
- A summary window component which displays the total number of opportunities along with Total Amount and Expected Amount(based on probability)

Below are the two components 

**************Modal Component***************
<aura:component controller="OpportunityController">

    <!-- UpdateOpptyEvent Sender -->
    <aura:registerEvent name="UpdateOpptyEvent" type="c:UpdateOpptyEvent" />

    <!-- Component Attributes -->
    <aura:attribute name="modalSectionClass" type="String" description="This attribute is used to set class for the modal section" default="slds-modal" />
    <aura:attribute name="backgroundClass" type="String" description="This attribute is used to set class for the background section" default="slds-backdrop" />

    <aura:attribute name="newOpportunity" type="Opportunity" default="{ 'sobjectType': 'Opportunity',
                'Name': '',
                'CloseDate': '',
                'StageName': ''
                }" />

    <!-- slds-fade-in-open-->
    <div aura:id="modalSection" class="{!v.modalSectionClass}" aria-hidden="false" role="dialog">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <c:FGButton class="slds-button slds-button--icon-inverse slds-modal__close" svgXlinkHref="/resource/SLDS102/assets/icons/action-sprite/svg/symbols.svg#close" svgClass="slds-button__icon slds-button__icon--large" onclick="{!c.closeModalBox}" />
                <h2 class="slds-text-heading--medium">Create Opportunity</h2>
            <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-form--stacked">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label">Opportunity Owner</span>
                        <div class="slds-form-element__control slds-has-divider--bottom">
                            <span class="slds-form-element__static">Anand Gupta</span>
                    <div class="slds-form-element is-required">
                        <label class="slds-form-element__label" for="text-input-01">
                                              <abbr class="slds-required" title="required">*</abbr> Opportunity Name
                        <div class="slds-form-element__control">
                            <input id="text-input-01" class="slds-input" type="text" required="true" value="{!v.newOpportunity.Name}" />
                    <div class="slds-form-element is-required">
                        <label class="slds-form-element__label" for="text-input-01">Close Date</label>
                        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                            <c:FGSvg class="slds-input__icon slds-icon-text-default" xlinkHref="/resource/SLDS102/assets/icons/utility-sprite/svg/symbols.svg#event" ariaHidden="true" />
                            <input id="text-input-02" class="slds-input" type="text" value="{!v.newOpportunity.CloseDate}" />
                    <div class="slds-form-element is-required">
                        <label class="slds-form-element__label" for="select-01">
                                                  <abbr class="slds-required" title="required">*</abbr> Stage
                        <div class="slds-form-element__control">
                            <div class="slds-select_container">
                                <select id="select-01" class="slds-select">
                                        <option>Needs Analysis</option>
                                        <option>Value Proposition</option>
                                        <option>Id. Decision Maker</option>
                                        <option>Closed Won</option>
                                        <option>Closed Lost</option>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral" onclick="{!c.closeModalBox}">Cancel</button>
                <button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.Save}">Save</button>
    <!--  slds-backdropopen-->
    <div aura:id="backgroundSection" class="{!v.backgroundClass}"></div>


*******************Summary Window Component*******************
<aura:component controller="OpportunityController">
    <!-- Handle the c:OpportunityTableSummaryEvent fired by the table component-->

    <!--<aura:handler name="optSummaryEvent" event="c:OpportunityTableSummaryEvent" action="{!c.updateTheOpportunitySummaryBox}"/> -->

    <aura:handler event="c:UpdateOpptyEvent" action="{!c.UpdateOppty}" />

    <aura:attribute name="opportunitySummary" type="OpportunitySummary" />
    <aura:attribute name="numOfOpportunities" type="String" default="0" />
    <aura:attribute name="totalValue" type="String" default="0" />
    <aura:attribute name="expectedValue" type="String" default="0" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <div class="slds-box slds-theme--info slds-page-header slds-grid" role="banner">

        <div class="slds-container--left slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">

            <div class="slds-media">

                <div class="slds-media__figure">
                    <c:FGSvg class="slds-icon slds-icon--large slds-icon-standard-opportunity" xlinkHref="/resource/SLDS102/assets/icons/standard-sprite/svg/symbols.svg#opportunity" />

                <div class="slds-media__body">
                    <p class="slds-page-header__title slds-truncate slds-align-middle" title="Opportunities">Opportunities</p>
                    <p class="slds-text-heading--large slds-page-header__info slds-p-left--large">{!v.numOfOpportunities}</p>



        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">
            <p class="slds-text-heading--small slds-truncate slds-align-middle" title="TotalValue">Total Value</p>
            <p class="slds-text-heading--large slds-page-header__info">{!v.totalValue}</p>

        <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">
            <p class="slds-text-heading--small slds-truncate slds-align-middle" title="ExpectedValue">Expected Value</p>
            <p class="slds-text-heading--large slds-page-header__info">{!v.expectedValue}</p>


I have a requirement where I want to refresh/reload/update just the summary window component as soon as the user creates an opportunity record (and it is successful) using the modal component(which is implemented for record creation).

PLEASE NOTE : This is a standalone app and it is not in container. So I can't use the force:refreshView thing.  Also I don't want to refresh the whole page. Just the summary component.

As you can see I am already trying to send an application event on the click of "Save" button in Modal component and then handling it on the Summary component. But after handling it I don't know how to refresh that individual component.

Please help!!
You need to use application event. Details here:

In short you need to
1. Create an event
2. Register event in the modal component and fire it once the opportunity is successfully created
3. Register event handler in summary window component and in event handler, you can refresh component.

Anand Gupta 14Anand Gupta 14
@Sreeni Kolakan - I have already implemented event propogation. I just need to know after handling the event -

As a standalone app, if I want to refresh the component, what construct I should use.

1) I obviously cannot use  "force:refreshView" thing because it can only be used inside a lightning experience and inside Salesforce1 framework.

2) I don't want to use the javascript construct of reloading a page (window.relocation) because then it would refresh the whole page and would beat the whole point of using Lightning and designing a SPA.

Showket BhatShowket Bhat
So here we go.

Lightning components doesn't need any external custom logic to reload the components as we do in AJAX. infact it does all re-rendering by itself. all you need is to set the lightning variables with a new value and the new values will be reflected in your view. In your case when you fire an event from one component, you set its attributes say a new value for your 2nd component. inside handler of your 2nd component you can get values from the event ( event.getParam ). Set the updated value that you got from event to the 2nd components attribute that you want to update. you can see the updated value in your view once the component attribute is set on event fire. 

incase you still have doubts please respond back
In your event handler function in the summary window, call Init function or onload function of the controller. That should refresh the component. Let me know if that worked.

Anand Gupta 14Anand Gupta 14
@Showket -

Setting the attributes of the 2nd component (which I want to refresh) on the event fire of the first component would require me to again get the new values from the server (by making a call to the server method). Is my understanding correct ?

Also below is my HELPER method of my create opportunity modal component in which I am firing the update opportunity event 
	createOpportunity: function(component,StageName) {

        console.log('Inside create oppty helper function');
        console.log('StageName inside Helper function' + StageName);

        var action = component.get("c.createOpportunityServer");
        var updateFlag;
            "o" : component.get("v.newOpportunity")


            if(a.getState() == "SUCCESS")
                updateFlag = true;
            else if (a.getState() == "ERROR")
                console.log("Inside Error");
                $A.log("Errors", a.getError());
                updateFlag = false;

            console.log("updateFlag" + updateFlag);
            var appEvent = $A.get("e.c:UpdateOpptyEvent");



        //console.log("appEvent" + appEvent.get("v.updateFlag"));

Below is the my Oppty summary controller
	doInit: function(component, event, helper) {

        /*var numOfOpptys = event.getParam("numberOfOpportunities");
        var totalVal = event.getParam("totalValue");
        var ExpectedVal = event.getParam("expectedValue");

        console.log('numOfOpptys' + numOfOpptys);
        console.log('totalVal' + totalVal);
        console.log('ExpectedVal' + ExpectedVal);*/


        UpdateOppty: function(component, event, helper)
                var updFlag = event.getParam("updateFlag");

                console.log("updFlag" + updFlag);

                        //window.location.reload( );

As you can see in the clearly see in the above controller that on initialization of the component i am calling the helper.getOpportunitySummary(component) which gets the values from the server.

So in the UpdateOppty function, I should just call that function again !!(which would update the component with new values). What say ?

santosh kumar Mallasantosh kumar Malla
@Anand Do you find the solution? If yes, Can you please post solution how you resolved it. Even I want to refersh one component when an action done on another component in same app.
I just want to refresh a div if a button is clicked in lightning component . could anybody help me with that  ?
David Roberts 4David Roberts 4
Me, too!
santosh kumar Mallasantosh kumar Malla
Here we can  use Lightning Events.
If there is a relationship between componets then go with Component events else Apllication Events.