Exercise 3Leveraging Events and Actions

Objectives

• Use framework events to navigate to and edit a record

Step 1 - Navigate to a Similar Property

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

2. Click CONTROLLER and replace the placeholder code with:

    ({
        navToRecord : function (component, event, helper) {
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId": component.get("v.property.Id")
            });
            navEvt.fire();
        }
    })
   

3. Save the file and refresh the Property Detail page.
4. In the Similar Properties component on the page, click the name of a property to navigate to that property record page.

Step 2 - Edit a Similar Property “In Place”

1. In the Developer Console, go back to the SimilarProperty component markup.

2. Add a new line after the closing <a> tag that is wrapping the <h3> and paste the following code:

    <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
   

3. Save the file.

4. Click CONTROLLER in the side bar and add the following function (remember to add a comma to separate the functions):

    editRecord : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
   

5. Save the file.
6. Go back to the Property Detail page and refresh it.

7. In the Similar Properties component, click the edit icon for a property to edit that property in place.

   

Having issues? Check that your code looks like 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>
</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) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
})