Lightning methods overloading (client-side) or setParams on custom component methods

Question

Is there a correct syntax to mimic the action.setParams({ serverParam: someValue } but for clientside methods?

Let's say I have the following:

component.find("myComp").fireMethod(
  "param1", 
  "param2", 
  "param3"
);

The current workaround I have if I don't need param2 is to declare it to null. Passing in params by explicitly stating them against an attribute like the below syntax from the docs doesn't work.

component.find('overlayLib').showCustomModal({
   header: "Application Confirmation",
   body: modalBody, 
   showCloseButton: true,
   cssClass: "mymodal",
   closeCallback: function() {
       alert('You closed the alert!');
   }
})

This was grabbed from the https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_lightning_overlayLibrary.htm documentation.

My end goal is to do this:

component.find("myComp").fireMethod(
 param1: "param1", 
 param3: "param3"
);

Not this, which is the current workaround for custom component methods:

component.find("myComp").fireMethod(
  param1: "param1", 
  param2: null, 
  param3: "param3"
);

What am I missing? It would be nice to have a single custom component method defined and then only pass in the necessary parameters instead of passing in null a bunch of times for optional vars.

Answer 1

You're missing the curly braces (commonly called Object Notation). Using this, you have just one parameter in your method:

 doSomething: function(component, event) {
     var params = event.getParam("arguments").params;
     if(params.param1) { ...
     ...
 }

And for your aura:method:

<aura:method name="doSomething" action="{!c.doSomething}" 
  description="Do Something Special"> 
    <aura:attribute name="params" type="Object" default="{}" /> 
</aura:method>

Which you then pass using Object Notation:

 component.find("myComp").doSomething({
     param1: "value a",
     param3: function() {
         alert("You closed the dialog!");
     }
 });

Note the "extra" { and }: this causes all of the elements within to be built as an Object.

---

Actual demonstration code:

Component

<aura:component >
    <aura:method name="displayValues" action="{!c.displayValues}">
        <aura:attribute name="params" type="Object" default="{}" />
    </aura:method>
    <aura:attribute name="paramCount" type="Integer" />
    <aura:attribute name="params" type="Object[]" />

    <p>Number of parameters: {!v.paramCount}</p>
    <p>Parameters:</p>
    <ul>
        <aura:iteration items="{!v.params}" var="param">
            <li>{!param.key}: {!param.value}</li>
        </aura:iteration>
    </ul>
</aura:component>

---

Component Controller

({
    displayValues: function(component, event) {
        var params = event.getParam("arguments").params;
        var output = [];
        component.set("v.paramCount", Object.keys(params).length);
        Object.keys(params).forEach(function(v,i,a) {
            output.push({key: v, value: params[v]});
        });
        component.set("v.params", output);
    }
})

---

Sample Application

<aura:application extends="force:slds">
    <lightning:button label="1 Param" onclick="{!c.oneparam}" />
    <lightning:button label="4 Params" onclick="{!c.fourparams}" />

    <c:q197177c aura:id="myId" />   
</aura:application>

---

Sample Application Controller

({
    oneparam: function(component, event, helper) {
        component.find("myId").displayValues({
            hello: "world"
        });
    },
    fourparams: function(component, event, helper) {
        component.find("myId").displayValues({
            param1: "four",
            param2: "different",
            param3: "values",
            param4: "provided"
        });
    }
})