In the previous post we learn how to use client side controller in lightning. In this post we will continue this with how to take input from user and process them between controller and save user inputs.
In lightning we have some native tags to get user inputs (Same as Visualforce tag or general HTML tag)
[code language=”PHP”]
<ui:inputText aura:id="expname" label=" Account Name"
value="{!v. account.Name}" required="true"/>
<ui:inputNumber aura:id="amount" label="Amount"
value="{!v. account.Amount__c}" required="true"/>
<ui:inputDate aura:id="expdate" label="Meeting Date"
value="{!v. account.Date__c}" displayDatePicker="true"/>
<ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
value="{!v.account.Reimbursed__c}"/>
[/code]
<ui:button label=”Create Account” press=”{!c.clickCreateRecord}”/>
Then in the button click we will pass this data into controller for processing
[code language=”PHP”]
clickCreateExpense: function(component, event, helper)
[/code]
and now we can use helper to do some processing.
[code language=”PHP”]
helper.createExpense(component, account); //account is instance of account
[/code]
But now to save this we need to call apex controller. In apex we will use this format. So to call apex methods in Lightning we will follow this format
[code language=”PHP”]</pre>
@AuraEnabled
public static List<account > getaccount()
<pre>[/code]
Use @Auraenabled to access this method in Lightning. All method must be static so it’s stateless communication and faster then Visualforce Apex communication.
To get data from apex in lightning
[code language=”PHP”]
// Load expenses from Salesforce
doInit: function(component, event, helper) {
// Create the action
var action = component.get("c.getaccount");
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.account", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
},
[/code]
We will follow this approach to pass data in apex controller
[code language=”PHP”]
createAccount: function(component, account) {
var action = component.get("c.saveAccount");
action.setParams({
"account": account
});
action.setCallback(this, function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var accounts = component.get("v.accounts");
accounts.push(response.getReturnValue());
component.set("v.accounts", accounts);
}
});
$A.enqueueAction(action);
},
[/code]
Here we use setparams to pass the parameter in apex and then use them in our code. So now we have good idea of how to pass data between Lightning and apex. So the last point in our journey is Events.
Event is used to pass data between one component and another.
In the Developer Console, select File | New | Lightning Event, and name the event “testEvent”
[code language=”PHP”]
var createEvent = component.getEvent("testExpanse");
createEvent.setParams({ "account": newAccount });
createEvent.fire();
[/code]
We will use fire() to fire the event and
[code language=”PHP”] var newAccout = event.getParam("account"); [/code]
is used to catch the events.
So here we cover all basic and starting points for development in sLightning. In my next post we will cover some advance uses of Lightning.
Do you have anything to say or want to add anything useful. Please share them in comments.