Accessing variables between helper and controller classes

Question

I have variables declared in helper class and trying to access from one function to other. But when I do so I am getting error as shown here. I have also declared attributes as seColumns and seTableConfig at component level. Here I am trying to access variables seColumns and seTableConfig from getTableDetails function to runSearcherHelp function.

How should I declare variables that accessible across the component bundle?

****Helper class*****

getTableDetails: function(component){
      var seColumns = [
       {
       'label':'Company',
       'name':'companyName',
       'type':'String'
       },
       {
       'label':'Ultimate Parent Co',
       'name':'ultimateParentName',
       'type':'String'
       },
       {
       'label':'Street',
       'name':'street1',
       'type':'String'
       }
  ];
  console.log('se columns are'+seColumns);
  var seTableConfig = {
       "massSelect":true,
       "globalAction":[
           {
           "label":"Add Task",
           "type":"button",
           "id":"addtask",
           "class":"slds-button slds-button--neutral"
           },
           {
           "label":"Complete Task",
           "type":"button",
           "id":"completetask",
           "class":"slds-button slds-button--neutral"
           }
       ]
 };

 runSearchHelper : function(component) {

    component.set("v.searching", true);
    var action = component.get("c.runCompanySearch");
    // Mark the action as abortable, this is to prevent multiple events from the keyup executing
    action.setAbortable();
    action.setParams({
        "siteID": component.get("v.siteID"),
        "searchString": component.get("v.searchString")
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state == "SUCCESS") {
            component.set("v.searching", false);
            component.set("v.SECompanies", response.getReturnValue());
            **************Here I am accessing the variable********
            component.set("v.seColumns",seColumns);
            component.find("seTable").initialize({
                    "order":[0,"desc"]
                     });
            ******************************************************       
            console.log(response.getReturnValue());
        } else if (state === "ERROR") { // Handle any error by reporting it
            var errors = response.getError();

            if (errors)  {
                if (errors[0] && errors[0].message)  {
                    this.displayToast('Error', errors[0].message);
                }
            } else {
                this.displayToast('Error', 'Unknown error.');
            }
        }
    });
    $A.enqueueAction(action);
 }

***Controller.js*****

    ({
    doInit : function(component, event, helper) {
        helper.getSites(component);
        //Column data for the table
        helper.getTableDetails(component);
        var companyID = component.get("v.selectedCompanyID");
        console.log('companyID: ' + companyID);        
    },

    runSearch : function(component, event, helper) {
        var buttonname = event.getSource().getLocalId();
        if(event.getParams().keyCode == 13 ||buttonname == "lookupbutton" || event.which == 13){ //Enter key
            var searchString = component.find("lookupinput").get("v.value");
            console.log(searchString);
            component.set("v.searchString", searchString);
            component.set("v.SECompanies", null);
        }
    }
})

Answer 1

You should return both the variables from getTableDetails function and use them. You can't access local variables outside the function.

Helper

getTableDetails: function(component){
  var seColumns = [{
  'label':'Company',
  'name':'companyName',
  'type':'String'
  },{
  'label':'Ultimate Parent Co',
  'name':'ultimateParentName',
  'type':'String'
  },{
  'label':'Street',
  'name':'street1',
  'type':'String'
  }];
  console.log('se columns are'+seColumns);
  var seTableConfig = {
  "massSelect":true,
  "globalAction":[{
      "label":"Add Task",
      "type":"button",
      "id":"addtask",
      "class":"slds-button slds-button--neutral"
      },{
      "label":"Complete Task",
      "type":"button",
      "id":"completetask",
      "class":"slds-button slds-button--neutral"
      }]};
  return {seColumns, seTableConfig};
};

And you can access this in helper like this:

/* more code */
var _this = this; /* To use this inside tha callback */
action.setCallback(this, function(response) {
    var state = response.getState();
    if (component.isValid() && state == "SUCCESS") {
      /* more code */
      component.set("v.seColumns", _this.getTableDetails().seColumns);
      /* more code */

Answer 2

Please check whether the corresponding attribute has been defined in the related component which can support the structure you have defined for "seColumns" in your helper class.

component.set("v.seColumns",seColumns): - expecting "seColumns" in your component definition. Use component.set("v.seColumns",getTableDetails().seColumns)...to set your attribute.

Answer 3

If you want to create variables in helper and use them in controller you need to set the variable to a component attribute (or return values).

For example:

**CONTROLLER

doInit : function(cmp, evt, hlp){
   helper.method1(cmp);
}

someStuff : function(cmp, evt, hlp){
   helper.method2(cmp.get("v.a"));
}

*HELPER

method1: function(component) {
   var a = "hello world";
   component.set("v.a", a);
}

method2: function(data){
   console.log(data);
}

Answer 4

You define the variable seColumns in the function getTableDetails but then use it in runSearchHelper, that's not correct. The seColumns variable only exists in the function where you defined it.