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)


<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}"/>

<ui:button label=”Create Account” press=”{!c.clickCreateRecord}”/>

Then in the button click we will pass this data into controller for processing


clickCreateExpense: function(component, event, helper)

and now we can use helper to do some processing.


helper.createExpense(component, account); //account is instance of account

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

</pre>
@AuraEnabled

public static List<account > getaccount()
<pre>

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

// 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);

},

We will follow this approach to pass data in apex controller

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);

},

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”

var createEvent = component.getEvent("testExpanse");

createEvent.setParams({ "account": newAccount });

createEvent.fire();

We will use fire() to fire the event and

 var newAccout = event.getParam("account"); 

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s