+ Start a Discussion
Anand Gupta 14Anand Gupta 14 

Not able to call a helper function from a javascript controller in lightning components.

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.
 
Best Answer chosen by Anand Gupta 14
Megha JajuMegha Jaju
Hi Anand,

You have to add required parameters in downloadAccountCSV function in javacript controller.
Like this:
downloadAccountCSV: function(component,event, helper)

All Answers

Megha JajuMegha Jaju
Hi Anand,

You have to add required parameters in downloadAccountCSV function in javacript controller.
Like this:
downloadAccountCSV: function(component,event, helper)
This was selected as the best answer
Showket BhatShowket Bhat
downloadAccountCSV: function(component, event, helper)
 {
   console.log('Inside Account CSV JS controller');
   console.log('helper' +  helper);

   helper.getAccountCSVDataFromServer(component);
  }