Create a Record Edit Form to Handle Data
In this step, we use the lightning:recordEditForm
wrapper component to create an edit layout, which allows us to update our record. The lightning:inputField
inside the lightning:recordEditForm
component is used to
create the editable fields on the layout.
- In the Developer Console, click back to the SimilarProperty component markup.
- Add the following code after the closing
</lightning:recordViewForm>
tag. - Save the file.
<lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}"> <div class="slds-media"> <div class="slds-media__figure"> <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}" /> </div> <div class="slds-media__body"> <lightning:layout> <a onclick="{!c.navToRecord}"> <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3> </a> </lightning:layout> <lightning:layout multipleRows="true"> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Beds__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Baths__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Price__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Status__c"/> </lightning:layoutItem> </lightning:layout> <lightning:layout horizontalAlign="center" class="slds-m-top_large"> <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/> <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/> </lightning:layout> </div> </div> </lightning:recordEditForm>
Next, we'll add a Helper function to our Lightning component, which allows us to toggle between the edit and view state of the custom form we’ve just created. Helper functions are local to a component, improve code reuse, and moves the heavy lifting of JavaScript logic away from the client-side controller.
- Click the Helper button to add a Helper file to the SimilarProperty component bundle.
- Rename the default function to showHide and add
component
as a parameter of the function. - Add the following to the showHide function.
- Save the file.
- Switch to the SimilarPropertyController.js file and replace the contents of the editRecord function with:
- Save the file and refresh the Property Record page.
- Click the Edit icon to show the edit form.
var editForm = component.find("editForm"); $A.util.toggleClass(editForm, "slds-hide"); var viewForm = component.find("viewForm"); $A.util.toggleClass(viewForm, "slds-hide");
helper.showHide(component);
- In the SimilarPropertyController.js file, add the following functions as follows (don’t forget the comma between the functions).
- Save the file.
- Refresh the Property Record page, then click the Edit icon for a property.
- Edit one of the items, and click Save.
- Repeat and click Cancel.
handleSuccess : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The property's info has been updated.", "type": "success" }); toastEvent.fire(); helper.showHide(component); }, handleCancel : function(component, event, helper) { helper.showHide(component); event.preventDefault(); }
Oops, I might need some help! You can check your code against the following.
SimilarProperty.cmp
<aura:component> <aura:attribute name="property" type="Property__c"/> <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c"> <div class="slds-media"> <div class="slds-media__figure"> <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/> </div> <div class="slds-media__body"> <lightning:layout class="slds-hint-parent"> <a onclick="{!c.navToRecord}"> <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3> </a> <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/> </lightning:layout> <lightning:layout multipleRows="true"> <lightning:layoutItem size="6"> <lightning:outputField fieldName="Beds__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:outputField fieldName="Baths__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:outputField fieldName="Price__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:outputField fieldName="Status__c"/> </lightning:layoutItem> </lightning:layout> </div> </div> </lightning:recordViewForm> <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}"> <div class="slds-media"> <div class="slds-media__figure"> <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/> </div> <div class="slds-media__body"> <lightning:layout> <a onclick="{!c.navToRecord}"> <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3> </a> </lightning:layout> <lightning:layout multipleRows="true"> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Beds__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Baths__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Price__c"/> </lightning:layoutItem> <lightning:layoutItem size="6"> <lightning:inputField fieldName="Status__c"/> </lightning:layoutItem> </lightning:layout> <lightning:layout horizontalAlign="center" class="slds-m-top_large"> <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/> <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/> </lightning:layout> </div> </div> </lightning:recordEditForm> </aura:component>
SimilarPropertyController.js
({ navToRecord : function (component, event, helper) { var navEvt = $A.get("e.force:navigateToSObject"); navEvt.setParams({ "recordId": component.get("v.property.Id") }); navEvt.fire(); }, editRecord : function(component, event, helper) { helper.showHide(component); }, handleSuccess : function(component, event, helper) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({"title": "Success!","message": "The property's info has been updated.","type": "success"});toastEvent.fire(); helper.showHide(component); }, handleCancel : function(component, event, helper) { helper.showHide(component); event.preventDefault(); } })
SimilarPropertyHelper.js
({ showHide : function(component) { var editForm = component.find("editForm"); $A.util.toggleClass(editForm, "slds-hide"); var viewForm = component.find("viewForm"); $A.util.toggleClass(viewForm, "slds-hide"); } })