Use Events and Actions

Part 1: Navigate to a Similar Property

In the SimilarProperty component, the address (which is stored in the Name field) is a clickable link. The <a> element has an onclick event that fires a navToRecord function.

1. In the Developer Console, 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();
    }
})

This is a very straightforward function. It simply declares a variable that instructs the Lightning Framework, that’s the $A, to call the e.force:navigateToSObject event. The Id of the property is passed as a parameter of the event.

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.

Part 2: Edit a Similar Property “In Place”

The last little bit of functionality we add to the component is to allow a user to edit one of the properties in the similar properties list without actually navigating to it.

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}" />

Yet another Base Lightning Component, <lightning:buttonIcon>, allows us to use an icon as a button. In this case it uses the edit icon, which is a pencil, from the utility section of SLDS's icons. When the user clicks the button, the editRecord function we’re about to add will fire.

3. Save the file.
4. Click CONTROLLER in the sidebar and add the following function below the navToRecord 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 with the default pop-up modal editing box.

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