Introduction:-
In this blog post, I am going to explain how to use the Lightning data services in Lightning component standard action overrides. Use Lightning Data Service to load, create, edit, or delete a record in your component without requiring Apex code. Lightning Data Service handles sharing rules and field-level security for you. Lightning Data Service as the Lightning Components version of the Visualforce standard controller. To override the standard action with lightning component, the component must implements lightning:actionOverride interface.
<aura:component implements="force:appHostable,force:hasRecordId,lightning:actionOverride" access="global" >
<aura:attribute name="newWorkOrder" type="Object"/>
<aura:attribute name="newWorkOrderRecord" type="Object"/>
<aura:attribute name="newWorkOrderError" type="String"/>
<force:recordData aura:id="newWorkOrderRecordId"
layoutType="FULL"
mode="EDIT"
targetRecord="{!v.newWorkOrder}"
targetFields="{!v.newWorkOrderRecord}"
targetError="{!v.newWorkOrderError}"
/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="New WorkOrder Details ">
<lightning:card iconName="action:custom84_120" title="Create New WorkOrder">
<div class="slds-p-horizontal--large">
<lightning:input aura:id="workOrderIds" label="Status" value="{!v.newWorkOrderRecord.Status}"/>
<lightning:input aura:id="workOrderIds" label="Priority" value="{!v.newWorkOrderRecord.Priority}"/>
<lightning:input aura:id="workOrderIds" label="Subject" value="{!v.newWorkOrderRecord.Subject}"/>
<lightning:input aura:id="workOrderIds" label="Description" value="{!v.newWorkOrderRecord.Description}"/>
<br/>
<lightning:button label="Save" variant="brand" onclick="{!c.handleSave}"/>
</div>
</lightning:card>
</div>
<aura:if isTrue="{!not(empty(v.newWorkOrderError))}">
<div class="recordError">
{!v.newWorkOrderError}</div>
</aura:if>
</aura:component>
({
doInit: function(component, event, helper) {
// Prepare a new record from template
component.find("newWorkOrderRecordId").getNewRecord(
"WorkOrder", // sObject type (entityAPIName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var record = component.get("v.newWorkOrder");
var error = component.get("v.newWorkOrderError");
if(error || (record === null)) {
console.log("Error initializing record template: " + error);
}
else {
console.log("Record template initialized: " + record);
}
})
);
},
handleSave: function(component, event, helper) {
component.find("newWorkOrderRecordId").saveRecord(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// record is saved successfully
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was saved."
});
resultsToast.fire();
$A.get("e.force:refreshView").fire();
} else if (saveResult.state === "INCOMPLETE") {
// handle the incomplete state
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
// handle the error state
console.log('Problem saving contact, error: ' +
JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state +
', error: ' + JSON.stringify(saveResult.error));
}
});
}
})
Override Edit Action
To override the edit action you need to implement lightning: actionOverride interface and update the record using Lightning Data Service by calling saveRecord on the force:recordData component, and pass in a callback function to be invoked after the save operation completes.
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride">
<aura:attribute name="workorderrecord" type="Object"/>
<aura:attribute name="workordeksimpleRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<force:recordData aura:id="recordHandler"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.workorderrecord}"
targetFields="{!v.workordeksimpleRecord}"
targetError="{!v.recordError}"
mode="EDIT"
recordUpdated="{!c.handleRecordUpdated}"
/>
<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading_label">Edit Record</p>
<h1 class="slds-page-header__title slds-m-right_small
slds-truncate slds-align-left">{!v.workordeksimpleRecord.Name}</h1>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.recordError}
</ui:message>
</div>
</aura:if>
<!-- Display an editing form -->
<lightning:input aura:id="recordName" label="Status"
value="{!v.workordeksimpleRecord.Status}" />
<lightning:input aura:id="recordName" label="Description"
value="{!v.workordeksimpleRecord.Description}" />
<lightning:input aura:id="recordName" label="Subject"
value="{!v.workordeksimpleRecord.Subject}" />
<lightning:button label="Save Record" onclick="{!c.handleSaveRecord}"
variant="brand" class="slds-m-top_medium"/>
</aura:component>
({
handleSaveRecord: function(component, event, helper) {
component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
// NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful
// then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler)
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// handle component related logic in event handler
} else if (saveResult.state === "INCOMPLETE") {
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
}));
},
/**
* Control the component behavior here when record is changed (via any component)
*/
handleRecordUpdated: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType === "CHANGED") {
// get the fields that changed for this record
var changedFields = eventParams.changedFields;
console.log('Fields that are changed: ' + JSON.stringify(changedFields));
// record is changed, so refresh the component (or other component logic)
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was updated."
});
resultsToast.fire();
} else if(eventParams.changeType === "LOADED") {
// record is loaded in the cache
} else if(eventParams.changeType === "REMOVED") {
// record is deleted and removed from the cache
} else if(eventParams.changeType === "ERROR") {
// there’s an error while loading, saving or deleting the record
}
}
})
Override View Action
To override the edit action you need to implement lightning: actionOverride interface and Loading a data by using the Lightning Data Service. To load a record using Lightning Data Service, add the force:recordData tag to your component. In the force:recordDatatag, specify the ID of the record to be loaded, a list of fields, and the attribute to which to assign the loaded record.
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride">
<aura:attribute name="workOrderRec" type="Object"/>
<aura:attribute name="simpleworkOrderRec" type="Object"/>
<aura:attribute name="workOrderError" type="String"/>
<force:recordData aura:id="recordLoader"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.workOrderRec}"
targetFields="{!v.simpleworkOrderRec}"
targetError="{!v.workOrderError}"
recordUpdated="{!c.handleRecordUpdated}"
/>
<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
<h1 class="slds-page-header__title slds-m-right_small
slds-truncate slds-align-left">Work Order Details </h1>
<p class="slds-text-heading_label">{!v.simpleworkOrderRec.WorkOrderNumber}</p>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.workOrderError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.workOrderError}
</ui:message>
</div>
</aura:if>
<lightning:recordViewForm recordId="{!v.recordId}" objectApiName="WorkOrder">
<div class="slds-box slds-theme_default">
<lightning:outputField fieldName="Case"/>
<lightning:outputField fieldName="Description" />
<lightning:outputField fieldName="Duration" />
<lightning:outputField fieldName="Priority" />
<lightning:outputField fieldName="StartDate" />
<lightning:outputField fieldName="Status" />
<lightning:outputField fieldName="Subject" />
<lightning:outputField fieldName="TotalPrice" />
<lightning:outputField fieldName="EndDate" />
</div>
</lightning:recordViewForm>
</aura:component>
({
handleRecordUpdated: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType === "LOADED") {
// record is loaded (render other component which needs record data value)
console.log("Record is loaded successfully.");
} else if(eventParams.changeType === "CHANGED") {
// record is changed
} else if(eventParams.changeType === "REMOVED") {
// record is deleted
} else if(eventParams.changeType === "ERROR") {
// there’s an error while loading, saving, or deleting the record
}
}
})
Beyond Cloud 