Create a Record Edit Form to Handle Data

Part 1: Create lightning:recordEditForm

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.

<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>

Save the file.

Part 2: Add a Helper Function

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.

var editForm = component.find("editForm");
$A.util.toggleClass(editForm, "slds-hide");
var viewForm = component.find("viewForm");
$A.util.toggleClass(viewForm, "slds-hide");

Save the file.
Switch to the SimilarPropertyController.js file and replace the contents of the editRecord function with:

helper.showHide(component);

Save the file and refresh the Property Record page.
Click the Edit icon to show the edit form.

Part 3: Handle Success and Cancel

In the SimilarPropertyController.js file, add the following functions as follows (don’t forget the comma between the functions).

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();
}

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.

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");
    }
})

Topics

Create a Record Edit Form to Handle Data

Part 1: Create lightning:recordEditForm

Part 2: Add a Helper Function

Part 3: Handle Success and Cancel