2

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);
        }
    }
})

enter image description here

1
  • it would help if you shared your controller.js and component.cmp
    – glls
    Jul 21, 2017 at 11:59

4 Answers 4

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 */
3
  • Thanks for your help. This worked and I have one clarification. How do we make sure that "this" is always scoped only to getTableDetails function.
    – user28452
    Jul 21, 2017 at 15:08
  • this is not available inside the callback so we need to assign the scope in a local variable and we can use that inside the callback. like here we used var _this = this; Jul 21, 2017 at 15:14
  • Ok. I get that. How does we ensure that "this" scope is coming only for getTableDetails function. Or does "this" scope is only specifically for variables that are in return statement? return{seColumns,seTableConfig}
    – user28452
    Jul 21, 2017 at 15:22
0

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.

1
  • Yes it is been set at component. I think the problem here is var "seColumns".
    – user28452
    Jul 21, 2017 at 11:11
0

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);
}
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .