Exercise 4Handling Data with recordEditForm

Objectives

• Use recordEditForm to create a custom form to update a record
• Understand Helper functions
• Fire a Toast

Step 1 - Create a recordEditForm

1. In the Developer Console and click back to the SimilarProperty component markup.

2. Add the following code after the closing </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>
   

3. Save the file.

Step 2 - Add a Helper Function

1. Click the Helper button to add a Helper file to the SimilarProperty component bundle.
2. Rename the default function to showHide and add component as a parameter of the function.

3. 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");
   

4. Save the file.

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

    helper.showHide(component);	
   

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

Step 3 - Handle Success and Cancel

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

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

2. Save the file.
3. Refresh the Property Record page, then click the Edit icon for a property.
4. Edit one of the items, and click Save.
5. 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");
    }
})