Lightning Components Developer Guide
jNewer Version Available
Saving Records
You can take advantage of the built-in create and edit record pages in Salesforce for
Android, iOS, and mobile web to create or edit records via a Lightning component.
The following component contains a button that calls a client-side controller to display the
edit record page.
1<aura:component>
2 <lightning:button label="Edit Record" onclick="{!c.edit}"/>
3</aura:component>1edit : function(component, event, helper) {
2 var editRecordEvent = $A.get("e.force:editRecord");
3 editRecordEvent.setParams({
4 "recordId": component.get("v.contact.Id")
5 });
6 editRecordEvent.fire();
7}Records updated using the force:recordEdit event are persisted by default.
Saving Records using a Lightning Component
Alternatively, you might have a Lightning component that provides a custom form for users to add a record. To save the new record, wire up a client-side controller to an Apex controller. The following list shows how you can persist a record via a component and Apex controller.
Create an Apex controller to save your updates with the upsert operation. The following example is an Apex controller for upserting record data.
1@AuraEnabled
2public static Expense__c saveExpense(Expense__c expense) {
3 // Perform isUpdateable() check here
4 upsert expense;
5 return expense;
6}Call a client-side controller from your component. For example, <lightning:button label="Submit" onclick="{!c.createExpense}"/>.
In your client-side controller, provide any field validation and pass the record data to a
helper
function.
1createExpense : function(component, event, helper) {
2 // Validate form fields
3 // Pass form data to a helper function
4 var newExpense = component.get("v.newExpense");
5 helper.createExpense(component, newExpense);
6}In your component helper, get an instance of the server-side controller and set a callback.
The following example upserts a record on a custom object. Recall that setParams() sets the value of the expense argument on the server-side controller’s saveExpense()
method.
1createExpense: function(component, expense) {
2 //Save the expense and update the view
3 this.upsertExpense(component, expense, function(a) {
4 var expenses = component.get("v.expenses");
5 expenses.push(a.getReturnValue());
6 component.set("v.expenses", expenses);
7 });
8},
9upsertExpense : function(component, expense, callback) {
10 var action = component.get("c.saveExpense");
11 action.setParams({
12 "expense": expense
13 });
14 if (callback) {
15 action.setCallback(this, callback);
16 }
17 $A.enqueueAction(action);
18}