HOW TO PASS VALUE FROM LIGHTNING COMPONENT TO CLIENT-SIDE CONTROLLER AND CLIENT-SIDE CONTROLLER TO SERVER-SIDE CONTROLLER

Today i will share some simple lightning for those who are the beginner in Lightning.

I know the is a lot of stuff for apex and visualforce but there is less resource for learning lightning. So here i am sharing some basic lightning stuff with you.

After that chapter you will learn :-

-How to take the value from lightning form to client-side controller.

-How to  apply css in lightning component.

-How to create and pass the value from client-side controller to server-side(Apex) controller.

Here i will share the all the code snippet for all. Try to understand the meaning of the code if you can't able to understand please contact me or email me for any doubt.

Step 1. Create Lightning app name as SimpleForm

Step 2. Create Lightning component give the name FormComponent and paste the below code.




<aura:component controller="SimpleServerSideController">
 
 
    <div align="center" class="test">
    <label style="font-size:25px">Registration Form</label><br/><br/>
    <ui:inputText label="First Name" aura:id="fname" class="fname"/><br/>
    <ui:inputText label="Last Name" aura:id="lname" class="fname"/><br/>
    <ui:inputEmail aura:id="email" label="Email " placeholder="abc@gmail.com" class="fname"/><br/>
    <ui:inputPhone placeholder="419-144-0909" label="Phone"  aura:id="phone" class="fname"/><br/>
    <ui:inputText label="Username" aura:id="uname" class="fname"/><br/>
    <ui:inputSecret aura:id="Pass"  label="Password" class="fname"/><br/>
    <lightning:button variant="brand" label="Submit" onclick="{!c.handleClick}"/>
 
 
    </div>
 </aura:component>


Step 3. Now we will create the client side controller. It will be named as FormComponentController.js


({
handleClick : function(component, event, helper) {
var fname = component.find("fname").get("v.value");
       
        var lname = component.find("lname").get("v.value");
        var email = component.find("email").get("v.value");
        var phone = component.find("phone").get("v.value");;
        var uname =component.find("uname").get("v.value");
        var pass = component.find("Pass").get("v.value");
     
     
        //alert(fname+" "+lname+" "+email+" "+phone+" "+uname+"  "+pass);
        var action = component.get("c.serverEcho");
     
        action.setParams({ firstName : fname, lastname : lname, email : email, phone: phone, uname: uname, pass: pass });
     
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                alert("From server: " + response.getReturnValue());
}
           else if (state === "INCOMPLETE") {
                // do something
            }
           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);
     
     
}
})


Step 4 : Create the server side controller named as SimpleServerSideController


public class SimpleServerSideController {

    @AuraEnabled
    public static String serverEcho(String firstName,String lastname,String email,String phone,String uname,String pass) {
        System.debug(firstname+' '+lastname+' '+email+' '+phone+' '+uname+' '+pass);
        String p = 'Firstname = '+firstname+'Lastname = '+lastname+'Email = '+email+'Phone = '+phone+'Username = '+uname+'Password = '+pass+'';
        return p;
    }

 
}


Step 5 : CSS for the form : named as FormComponent.css


.THIS {
}

.THIS.test{
 
    font-size:25px;
    background-image:url("http://tractionondemand.com/wp-content/uploads/2014/10/Webinar-Banner.png");
 
    color:black;
}
.THIS.fname{
 
    font-size:15px;
    text-align:left;

}



Now after doing this you will understand the basic concept how the values are transferred to  view to client-side controller , client-side controller to server-side controller.


finally you form will be look like.....