Apex Code Development You need to sign in to do that
Don't have an account?
AGupta550 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***************
*******************Summary Window Component*******************
PLEASE NOTE : This is a standalone app and it is not in one.app 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!!
- 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>
<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>
</div>
<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
</label>
<div class="slds-form-element__control">
<input id="text-input-01" class="slds-input" type="text" required="true" value="{!v.newOpportunity.Name}" />
</div>
</div>
<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>
</div>
<div class="slds-form-element is-required">
<label class="slds-form-element__label" for="select-01">
<abbr class="slds-required" title="required">*</abbr> Stage
</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="select-01" class="slds-select">
<option>Prospecting</option>
<option>Qualification</option>
<option>Needs Analysis</option>
<option>Value Proposition</option>
<option>Id. Decision Maker</option>
<option>Closed Won</option>
<option>Closed Lost</option>
</select>
</div>
</div>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
<!-- slds-backdropopen-->
<div aura:id="backgroundSection" class="{!v.backgroundClass}"></div>
</aura:component>
*******************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>
<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>
</div>
</div>
<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>
<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>
</div>
</div>
</aura:component>
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 one.app 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!!
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.
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.
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.
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; action.setParams( { "o" : component.get("v.newOpportunity") }) action.setCallback(this,function(a) { if(a.getState() == "SUCCESS") { component.set("v.modalSectionClass","slds-modal"); component.set("v.backgroundClass","slds-backdrop"); //$A.get("e.force:refreshView").fire(); 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"); appEvent.setParams({ updateFlag:updateFlag }); appEvent.fire(); }) //$A.enqueueAction(action); $A.enqueueAction(action); //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);*/ /*component.set("v.numOfOpportunities",numOfOpptys); component.set("v.totalValue",totalVal); component.set("v.expectedValue",ExpectedVal);*/ helper.getOpportunitySummary(component); }, UpdateOppty: function(component, event, helper) { var updFlag = event.getParam("updateFlag"); console.log("updFlag" + updFlag); if(updFlag) { //window.location.reload( ); $A.get('e.force:refreshView').fire(); } else { console.log("False"); } } })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 ?
If there is a relationship between componets then go with Component events else Apllication Events.