+ Start a Discussion
Aruna VasahanAruna Vasahan 

Parameter passing from lightning component to controller

Hi guys,
          I am now working with napili template. I want to know how to pass parameters from <ui:outputText> in the component area to the controller. Please help me in this. I have gone through all the possible ways but still I'm not able to pass the parameter values.
Thanks
Aruna
Best Answer chosen by Aruna Vasahan
Amit Singh 1Amit Singh 1
Aruna, Your SOQL query is returning and working well this is the Salesforce Standard that it shows this kind of pop up to show the values you need to create an attribute in component of type Account and set the value of that attribute from Controller.js and then display values in component.

Let me know if this helps :)

Thanks!

All Answers

Amit Singh 1Amit Singh 1
Hello,

Refer below link. You can pass the parameter to controller using .setParams{ "parameterName":"parameterValue"}.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_intro.htm

Let us know if this helps :)

Thanks!
Aruna VasahanAruna Vasahan
Hi Amit,
          I refeered the same post and have used the same method to pass parameters but still I am not able to pass the parameters.

client controller
var expname = nameField.get("v.value"); // fetching the parameter from component
          
   var action = component.get("c.serverEcho");

    action.setParams({  recordId : expname  });// setting the parameter to apex class method

server controller
public static String serverEcho(String recordId) {

	        return ('Hello from the server, ' + recordId);
}
Please refer my code and let me know if bug exists.
Thanks
Aruna
Amit Singh 1Amit Singh 1
Aruna,

Have you made you Server Controller method @AuraEnabled and controller in your component.

Also, could you please share complete code for controller, component and Server Controller. 

Use below code.

Component
<aura:component controller="SimpleServerSideController">
    <aura:attribute name="firstName" type="String" default="world"/>
    <ui:button label="Call server" press="{!c.echo}"/>
</aura:component>

Client Side controller.js
({
    "echo" : function(cmp) {
        // create a one-time use instance of the serverEcho action
        // in the server-side controller
        var action = cmp.get("c.serverEcho");
        action.setParams({ firstName : cmp.get("v.firstName") });

        // Create a callback that is executed after 
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            // This callback doesn’t reference cmp. If it did,
            // you should run an isValid() check
            //if (cmp.isValid() && state === "SUCCESS") {
            if (state === "SUCCESS") {
                // Alert the user with the value returned 
                // from the server
                alert("From server: " + response.getReturnValue());

                // You would typically fire a event here to trigger 
                // client-side notification that the server-side 
                // action is complete
            }
            //else if (cmp.isValid() && state === "INCOMPLETE") {
            else if (state === "INCOMPLETE") {
                // do something
            }
            //else if (cmp.isValid() && state === "ERROR") {
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        $A.enqueueAction(action);
    }
})

Server Controller Method :
public static String serverEcho(String firstName) {

	        return ('Hello from the server, ' + firstName);
}
Also, It is very difficult to debug the problem so you have to be careful while developing lighting components.

Hope this will helps :)

Thanks!

 
Aruna VasahanAruna Vasahan
Hi Amit,
         The code which you have posted is working well but can you please find the bug in my code.
   
<aura:component controller="ParamController" access="global" implements="force:lightningQuickAction,force:hasRecordId">
 
    Record Id is 

<ui:outputText aura:id="client"  
    value="{!v.recordId}" click="{!c.echo}" />

 </aura:component>
({
    echo : function(component, event, helper) {
          var nameField = component.find("client");

	       var expname = nameField.get("v.value");
      // alert(expname);
       var action = cmp.get("c.serverEcho");
        action.setParams({ recordId :"expname" });

  action.setCallback(this, function(response) {
            var state = response.getState();
           
            if (state === "SUCCESS") {
              
                alert("From server: " + response.getReturnValue());

               
            }
        
            else if (state === "INCOMPLETE") {
               
            }
          
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        $A.enqueueAction(action);
    }
})
public class ParamController {
     @AuraEnabled
public static Account serverEcho(Id recordId) {

      
  return[SELECT Type,Industry,Rating FROM Account WHERE Id=:recordId];
  
  
    }
}

Thanks
Aruna

 
Amit Singh 1Amit Singh 1
Aruna,

Seems that problem is with below line.
action.setParams({ recordId :"expname" });

You are setting "expname" hard code as accountId. Replace above line with below line.
action.setParams({ recordId : expname });
Everything seems to be working fine.
 
Let me know the outcome :)
 
Thanks!
 
Aruna VasahanAruna Vasahan
Amit,
      I tried that way too. But still it's not working. It seems like the parameter is not passing to the server side.
Thanks
Aruna
Amit Singh 1Amit Singh 1
Aruna,

Problem is with your Controller.js. You are using cmp.get which is not defined.

Use below code 
({
    echo : function(component, event, helper) {
          var nameField = component.find("client");

	       var expname = nameField.get("v.value");
      // alert(expname);
       var action = component.get("c.serverEcho");
        action.setParams({ recordId :expname });

  action.setCallback(this, function(response) {
            var state = response.getState();
           
            if (state === "SUCCESS") {
              
                alert("From server: " + response.getReturnValue());

               
            }
        
            else if (state === "INCOMPLETE") {
               
            }
          
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        $A.enqueueAction(action);
    }
})

Mark as best if this helps :)

Thanks!
Aruna VasahanAruna Vasahan
Amit,
      Thanks for showing me the bug !!. My parameter is now successfully passing to the apex controller. But my SOQL query is not working.User-added image

I have added a screenshot of it above.
Thanks
Aruna
 
Amit Singh 1Amit Singh 1
Aruna, Your SOQL query is returning and working well this is the Salesforce Standard that it shows this kind of pop up to show the values you need to create an attribute in component of type Account and set the value of that attribute from Controller.js and then display values in component.

Let me know if this helps :)

Thanks!
This was selected as the best answer
Aruna VasahanAruna Vasahan
Hi Amit,
          Thank you for the idea, I will try that way to display the details.
Thanks
Aruna