10

I feel like I am duplicating a lot of javascript code while creating helpers for different but related components. Is there a way to have like a shared helper, or maybe a global helper. What other techniques are there to share javascript code between components?

11

EDIT 3 - Even better you can now return a value from your called method! This means that the technique below is useful for ASYNC calls, but in many instances, you can skip the callback and just get the result directly into a var

EDIT 2 - Salesforce supports this - see bottom.

EDIT Added Example

I can think of one way you could achieve this.

You would create a component that you would include in your markup. This component would expose a <aura:method> that would perform your work.

Your could pass in parameters to the method like you would in any method.

For return values, you could define a callback as an attribute that would call a function defined on the parent, or you could use a component event to broadcast the result back to the parent

I have an example of how to implement the callback in an answer here

Here is how I would implement this. First define the utility component:

<aura:component >
    <aura:method name="sayHello" action="{!c.greet}" > 
        <aura:attribute name="personName" type="String" default="Doug" />
        <aura:attribute name="callBack" type="function" default="" />
    </aura:method>
</aura:component>

With the method greet being:

({
    greet : function(component, event, helper) {
        var params = event.getParam('arguments');
        if (params) {
            var personName = params.personName;
            var callBack = params.callBack;
            callBack('hello ' + personName);
        }
    }
})

Then to call the helper (and get a response) from the parent, you would do this:

<aura:application >
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <c:UtilityMethods aura:id="utilityMethods"/>
</aura:application>

And call the method on the utility object here, passing in the callback:

({
    init : function(component, event, helper) {
        var utility = component.find("utilityMethods");
        utility.sayHello("Caspar", function(result){
            alert(result);
        });
    }
})

This works well - and it's supported - see image here:

enter image description here

Note the attribute type - function. I've changed my example above to reflect this. Reference on the Salesforce Developer Relations Blog.

  • This works great. Thank you so much. I feel like using the static resource will work too, but I feel that this is an easier to use method, since you can work with the code in the same editors, and you don't have go through all the steps to re-upload a static resource each time you make a change. – Chris Mullins Sep 21 '16 at 14:53
  • 1
    I've created a more robust version of this which is similar to a Service Component. It's got a long ways to go, but it sets some of the methodology taking this to the next level: github.com/tsalb/sfdc-lightning-service-components – tsalb Nov 1 '17 at 6:27
1

So if you want to have code which is very common and could be used by various helper then one approach could be move such code into one js and upload it as static resource. That way that js could be referenced in many components (though a single js would be loaded) but you will achieve the code res-usability.

This could act as a global helper.

  • This is an interesting idea, but needs more detail to really be an answer. How and where would you incorporate the Static Resource? – Adrian Larson Sep 20 '16 at 17:51
  • 1
    I think this is a good idea. I forgot about static resources. I wonder how well this would work with helper functions which call apex controller code. The downside is that the code will be more difficult to edit I think static resources have to be uploaded as a zip file. – Chris Mullins Sep 20 '16 at 18:38
  • For the example part Praveen has given quite elaborative answer in : salesforce.stackexchange.com/questions/136760/… Yes @Chris, Agreed on the difficulty in editing part. So I think this should be used only when things are settled and you have some utility javascript methods which you don't want to repeat. – Kiran Machhewar Sep 25 '16 at 16:33

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.