0

5.1

mins

left

Inline edit support in custom component in Salesforce Lightning

Inline Edit Support in Custom Component in Salesforce Lightning

If you have a situation where you need to create a custom component with inline edit functionality then this article will help you. However inline edit support in custom component is not supported so far. I have created a component to display Account with inline edit functionality.

InlineEdit1

The idea behind the inline edit is that I am rendering two fields for each field one in output format and another in input format but only one visible at a time. When the component is loaded records will be shown in the output format. When the user clicks on the pencil icon the input format component is shown, at the same time Save button is activated. The user can change field value and save the record.

Follow the below sample code -

Apex Class (LightningInlineEditCltr). This is the controller class to fetch and save the records in the database.

public with sharing class LightningInlineEditCltr {
@AuraEnabled
public static List < account > accountsToDisplay() {
List < Account > returnList = new List < Account > ();
List < Account > lstOfAccount = [select id, Name, Rating, website from account ];
for (Account acc: lstOfAccount) {
returnList.add(acc);
}
return returnList;
}
// method for update records after inline editing
@AuraEnabled
public static List < account > saveAccount(List listOfAccount) {
update listOfAccount;
return listOfAccount;
}
// method for fetch picklist values dynamic
@AuraEnabled
public static List < String > getselectOptions(sObject objObject, string fld) {
List < String > allOpts = new list < String > ();
Schema.sObjectType objType = objObject.getSObjectType();
Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
list < Schema.PicklistEntry > values = fieldMap.get(fld).getDescribe().getPickListValues();
for (Schema.PicklistEntry a: values) {
allOpts.add(a.getValue());
}
allOpts.sort();
return allOpts;
}
}

Lightning Component (ChildInlineEdit). This component displays the records in the row.











{!v.index}


{!v.singleAccount.Name}






{!v.singleAccount.Rating}





ChildInlineEditController.js

({
doInit: function(component, event, helper) {
helper.fetchPickListVal(component, 'Rating', 'ratingPicklistOpts');
},
EditName : function(component,event,helper){
component.set("v.nameEditMode", true);
setTimeout(function(){
component.find("inputId").focus();
}, 100);
},
inlineEditRating : function(component,event,helper){
component.set("v.ratingEditMode", true);
component.find("accRating").set("v.options" , component.get("v.ratingPicklistOpts"));
setTimeout(function(){
component.find("accRating").focus();
}, 100);
},
onNameChange : function(component,event,helper){
if(event.getSource().get("v.value").trim() != ''){
component.set("v.showSaveCancelBtn",true);
}
},
onRatingChange : function(component,event,helper){
component.set("v.showSaveCancelBtn",true);
},
closeNameBox : function (component, event, helper) {
component.set("v.nameEditMode", false);
if(event.getSource().get("v.value").trim() == ''){
component.set("v.showErrorClass",true);
}else{
component.set("v.showErrorClass",false);
}
},
closeRatingBox : function (component, event, helper) {
component.set("v.ratingEditMode", false);
},
})

ChildInlineEditHelper.js

({
// fetch picklist values dynamic from apex controller
fetchPickListVal: function(component, fieldName, picklistOptsAttributeName) {
var action = component.get("c.getselectOptions");
action.setParams({
"objObject": component.get("v.objInfoForPicklistValues"),
"fld": fieldName
});
var opts = [];
action.setCallback(this, function(response) {
if (response.getState() == "SUCCESS") {
var allValues = response.getReturnValue();

if (allValues != undefined && allValues.length > 0) {
opts.push({
class: "optionClass",
label: "--- None ---",
value: ""
});
}
for (var i = 0; i < allValues.length; i++) { opts.push({ class: "optionClass", label: allValues[i], value: allValues[i] }); } component.set("v." + picklistOptsAttributeName, opts); } }); $A.enqueueAction(action); }, })

Lightning Component (ParentInlineEdit). This component fetches the data from the database and passes to the child component.









S.No
Account Name
Rating


ParentInlineEditController.js-

({
getAccountsJS : function(component, event, helper) {
var action = component.get("c.accountsToDisplay");
action.setCallback(this, function(response) {
if (response.getState() === "SUCCESS" && component.isValid()) {
component.set("v.AccountList", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
SaveAccount : function(component, event, helper) {
if (helper.requiredFieldValidation(component, event)){
var action = component.get("c.saveAccount");
action.setParams({
'listOfAccount': component.get("v.AccountList")
});
action.setCallback(this, function(response) {
if (response.getState() === "SUCCESS" && component.isValid()) {
component.set("v.AccountList", response.getReturnValue());
component.set("v.showSaveCancelBtn",false);
alert('Account Updated...');
}
});
$A.enqueueAction(action);
}
},
})

ParentInlineEditHelper.js-

({
requiredFieldValidation : function(component,event) {
var allRecords = component.get("v.AccountList");
var isValid = true;
for(var i = 0; i < allRecords.length;i++){ if(allRecords[i].Name == null || allRecords[i].Name.trim() == ''){ alert('fill this field : Row No ' + (i+1) + ' Account Name is null' ); isValid = false; } } return isValid; }, })

Lightning Application (LearnLight)- Application contains the parent component to run the functionality.





InlineEdit2

Related Articles

Responses