• Anand Gupta 14
  • NEWBIE
  • 10 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 2
    Replies
I have implemented an application in which I have two different buttons.

Button One
<c:FGButton class="slds-button slds-button--small slds-button--neutral" label="Download CSV" svgXlinkHref="/resource/SLDS102/assets/icons/action-sprite/svg/symbols.svg#download" svgClass="slds-icon slds-icon--x-small slds-icon-text-default slds-m-right--small" onclick="{!c.downloadCSV}"/>
Button Two
<c:FGButton class="slds-button slds-button--small slds-button--neutral" label="Download CSV" svgXlinkHref="/resource/SLDS102/assets/icons/action-sprite/svg/symbols.svg#download" svgClass="slds-icon slds-icon--x-small slds-icon-text-default slds-m-right--small" onclick="{!c.downloadAccountCSV}"/>

I am calling two different functions on the click of these buttons. Below is my app controller which contains these functions
({
	showModalBox: function(component, event, helper) {

        var modalBoxFind = component.find("oppModalBox");
        var modalBoxLocalId = modalBoxFind.getLocalId();

        modalBoxFind.set("v.modalSectionClass","slds-modal slds-fade-in-open");
        modalBoxFind.set("v.backgroundClass","slds-backdrop slds-backdrop--open");

        /*var createOpportunityEvent = $A.get("e.force:createRecord");
        createOpportunityEvent.setParams({
            "entityApiName" : "Opportunity"
        });
        createOpportunityEvent.fire();*/

	},

    downloadCSV: function(component, event, helper)
    {

        helper.getCSVDataFromServer(component);
    },

    showAccountsPane: function(component)
    {
        var opptyPane = component.find('opportunityPanel');
        var accountsPane = component.find('accountPanel');

        $A.util.addClass(opptyPane,'slds-hide');
        $A.util.removeClass(accountsPane,'slds-hide');
    },

    showOpportunityPane: function(component)
    {
        console.log('Inside Oppty Pane JS');
        var opptyPane = component.find('opportunityPanel');
        var accountsPane = component.find('accountPanel');


        $A.util.removeClass(opptyPane,'slds-hide');
        $A.util.addClass(accountsPane,'slds-hide');

    },

    downloadAccountCSV: function(component)
    {
        console.log('Inside Account CSV JS controller');
        console.log('helper' +  helper);

        helper.getAccountCSVDataFromServer(component);
    }


})

As you can see I am calling two different helper methods from these two functions. Below are the helper methods in the helper controller of the app.
({
	getCSVDataFromServer: function(component) {

        console.log('Inside helper function')

        var action = component.get("c.getOpportunityCSV");
        var csvContent = "data:text/csv;charset=utf-8,";

        var link = document.createElement("a");

        //var csvContent = "data:text/csv";

        action.setCallback(this,function(actionResult)

        {
            csvContent = csvContent + actionResult.getReturnValue();
            var encodedUri = encodeURI(csvContent);
            //console.log('CSV String' + actionResult.getReturnValue());
            //window.open(encodedUri);

            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "Opportunities.csv");
            link.click();
        });

        $A.enqueueAction(action);
	},

    getAccountCSVDataFromServer: function(component)
    {
        /*var action = component.get("c.getAccountCSV");
        var csvContent = "data:text/csv;charset=utf-8,";

        var link = document.createElement("a");

        //var csvContent = "data:text/csv";

        action.setCallback(this,function(actionResult)

        {
            csvContent = csvContent + actionResult.getReturnValue();
            var encodedUri = encodeURI(csvContent);
            //console.log('CSV String' + actionResult.getReturnValue());
            //window.open(encodedUri);

            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "Accounts.csv");
            link.click();
        });

        $A.enqueueAction(action);*/
        console.log('inside account csv helper function');

    }
})

Button when I click the 2nd button which calls the downloadAccountCSV function

I am getting error saying that 
Helper is not defined.
 
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>
            <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!!