There is no standard functions to refresh lightning:recordEditForm
after save record. You can use aura:if
to re-render the field section inside record edit form, after successfully saved the record.
Lightning Component:
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Attributes-->
<aura:attribute name="reloadForm" type="boolean" default="true" />
<!--Component Start-->
<div class="slds-m-around_xx-large">
<lightning:recordEditForm objectApiName="Account"
aura:id="accForm"
onload="{!c.handleOnLoad}"
onsubmit="{!c.handleOnSubmit}"
onsuccess="{!c.handleOnSuccess}"
onerror="{!c.handleOnError}">
<lightning:messages />
<aura:if isTrue="{!v.reloadForm}">
<lightning:inputField fieldName="Name"/>
<lightning:inputField fieldName="AccountNumber"/>
<lightning:inputField fieldName="Industry"/>
<lightning:inputField fieldName="Phone" />
<lightning:inputField fieldName="Website" />
<aura:set attribute="else">
Saving...
</aura:set>
</aura:if>
<lightning:button variant="brand" type="submit" name="save" label="Save" />
</lightning:recordEditForm>
</div>
<!--Component End-->
</aura:component>
Lightning JS Controller:
({
handleOnLoad : function(component, event, helper) {
},
handleOnSubmit : function(component, event, helper) {
},
handleOnSuccess : function(component, event, helper) {
component.set("v.reloadForm", false);
component.set("v.reloadForm", true);
},
handleOnError : function(component, event, helper) {
},
})
Loading...
Lightning Component:
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component Start-->
<div class="slds-m-around_xx-large">
<lightning:recordEditForm objectApiName="Account" aura:id="accForm">
<lightning:messages />
<lightning:inputField fieldName="Name"/>
<lightning:inputField fieldName="AccountNumber"/>
<lightning:inputField fieldName="Industry"/>
<lightning:inputField fieldName="Phone" />
<lightning:inputField fieldName="Website" />
</lightning:recordEditForm>
<lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{!c.handleCreateAccount}" />
</div>
<!--Component End-->
</aura:component>
Lightning JS Controller:
({
handleCreateAccount : function(component, event, helper) {
component.find("accForm").submit();
}
})
Loading...
Sometimes we can have a requirement to add or modify field values in onsubmit
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and in onsubmit event, I’m adding “Description” field value of “Lead” object.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsubmit="{!c.handleOnSubmit}">
<lightning:messages />
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="FirstName"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="LastName"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Email"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Phone"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSubmit : function(component, event, helper) {
event.preventDefault(); //Prevent default submit
var eventFields = event.getParam("fields"); //get the fields
eventFields["Description"] = 'Lead was created from Lightning RecordEditForm'; //Add Description field Value
component.find('leadCreateForm').submit(eventFields); //Submit Form
}
})
Loading...
Sometimes we can have a requirement to get field values, record Id, record type Id, child relationships information in onsuccess
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and after successfully saving the record, getting the field values in onsuccess
event.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
<lightning:messages />
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="FirstName"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="LastName"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Email"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Phone"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSuccess : function(component, event, helper) {
var param = event.getParams(); //get event params
var fields = param.response.fields; //get all field info
var childRelationships = param.response.childRelationships; //get child relationship info
var recordTypeInfo = param.response.recordTypeInfo; //get record type info
var recordId = param.response.id; //get record id
console.log('Param - ' + JSON.stringify(param));
console.log('Fields - ' + JSON.stringify(fields));
console.log('Child Relationship - ' + JSON.stringify(childRelationships));
console.log('Record Type Info - ' + JSON.stringify(recordTypeInfo));
console.log('Record Id - ' + JSON.stringify(recordId));
//get Record Edit Form Field Values
console.log('FirstName - ' + fields.FirstName.value);
console.log('LastName - ' + fields.LastName.value);
console.log('Email - ' + fields.Email.value);
console.log('Phone - ' + fields.Phone.value);
console.log('Company - ' + fields.Company.value);
}
})
Loading...
Sometimes we can have a requirement to get record Id in onsuccess
event of lightning:recordeditform
. In below example, I’m creating “Lead” object record using lightning:recordeditform
and after successfully saving the record, getting the record Id in onsuccess
event.
Lightning Component:
<!--Sample.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
<!--Component-->
<div class="slds-m-around--xx-large">
<lightning:card title="Lead" iconName="standard:lead" class="slds-p-around_medium">
<lightning:recordEditForm aura:id="leadCreateForm" objectApiName="Lead" onsuccess="{!c.handleOnSuccess}">
<lightning:messages />
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="FirstName"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="LastName"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Email"></lightning:inputField>
</div>
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Phone"></lightning:inputField>
</div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2 slds-p-around_medium">
<lightning:inputField fieldName="Company"></lightning:inputField>
</div>
</div>
<lightning:button type="submit" label="Save" variant="brand"/>
</lightning:recordEditForm>
</lightning:card>
</div>
</aura:component>
Lightning JS Controller:
({
handleOnSuccess : function(component, event, helper) {
var params = event.getParams(); //get event params
var recordId = params.response.id; //get record id
console.log('Record Id - ' + recordId);
}
})
Loading...