0

I've inherited an existing Lightning component with an extensive helper. Much of the helper logic is centered around checking if 10 fields are zero, null, or empty strings.

The existing helper is something like this snippet:

validateFields : function(component, detailRows){
    for (var i = 0; i < detailRows.length; i++) {
        if( //Field is blank or empty string
            ((detailRows[i].Total_Sales__c == 0 ||
              detailRows[i].Total_Sales__c == null) ||
            (typeof detailRows[i].Total_Sales__c == 'string' &&
            detailRows[i].Total_Sales__c.length == 0)) ){
            detailRows[i].SomeErrorField = 'error-empty';
        }             
        //The same is repeated for several other fields
        if( //Field is blank or empty string
            ((detailRows[i].Rate__c == 0 ||
              detailRows[i].Rate__c == null) ||
            (typeof detailRows[i].Rate__c == 'string' &&
            detailRows[i].Rate__c.length == 0)) ){
            detailRows[i].SomeRateErrorField = 'error-empty';
        }    
}

I'd like to centralize this blank-checking logic rather than repeating it. I understand that there are js options to reduce the complexity of the blank check, as noted here: https://stackoverflow.com/questions/154059/how-to-check-empty-undefined-null-string-in-javascript

However, if there were additional logic, such as value ceilings, I'd still like to centralize this logic rather than simply shortening it.

In regular javascript you'd simply make a reusable function. Something like:

function blankCheck(fieldName){
    //check for nulls, too high values, etc.
    //set a return value as needed
    return true;
}

var hasFieldError = blankCheck(fieldA);

However, it doesn't seem possible to return values between the helper functions within a Lightning helper. There is an option to pass them to the component and get them back again. But that adds 10 error flag fields to the markup, and the component set/get lines to the helper.

I did find a similar discussion here: Passing value of one variable from one method to another method in controller.js

This seems to be a way to pass a value from the foo function to the bar function. But it doesn't seem to allow bar to return a value back to foo.

foo : function(component, helper) {
  var newId = 'xxxxxxxxx';
  helper.bar(component, newId);

},

bar: function(component, tempId) {
   console.log(tempId);
}

So that's the question: What's the best way to allow helper functions to pass values between each other without involving the component view markup?

0

You simply need to use this:

foo: function(component) {
 var newId = 'xxxxxxxxx';
 this.bar(component, newId);
},
bar: function(component, tempId) {
  component.log(tempId);
}

The only time you need a reference is when you're using a callback handler, as this will be taken over in some cases:

foo: function(component) {
  var self = this;
  setTimeout(function() {
    self.bar(component);
  }, 1000); // 1 second later
},
bar: function(component) {
  console.log("async logged");
}

Edit:

TO return a value, just use the normal logic you'd do in any other JavaScript code:

add2: function(a, b) {
  return a + b;
},
foo: function(component) {
  var a = component.get("v.a");
  var b = component.get("v.b");
  var sum = this.add2(a, b);
  console.log(sum);
}
  • That seems to improve the related question I cited (getting values from foo to bar). But it doesn't answer the question of how to return bar values to foo. Sorry if my question was a bit rambling. – JimG Oct 14 '19 at 14:46
  • @JimG No worries. I went ahead and edited in an example of that as well. Also, you can use Promises or callbacks, which are covered in other answers here on SFSE, such as this one. – sfdcfox Oct 14 '19 at 14:51
  • That did the trick. Thanks! – JimG Oct 14 '19 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.