Lightning Web Components Workshop

Exercise 3Leveraging the Navigation Service

Objectives

Use the navigation service to navigate to, and edit a record

Step 1 - Navigate to a Similar Property

Switch back to similarProperty.js in VS Code.
Add wire to the import from lwc.

Add the following import on a new line on line 2:

 import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';

Apply the NavigationMixin function to your component’s base class by changing the extends to extends NavigationMixin(LightningElement).

Add the following to the SimilarProperty class:

 @wire(CurrentPageReference) pageRef;
	
 navigateToRecord() {
     this[NavigationMixin.Navigate]({
         type: 'standard__recordPage',
         attributes: {
             recordId: this.item.Id,
             objectApiName: 'Property__c',
             actionName: 'view',
         },
     });
 }

Save the file, push to your scratch org and refresh the Property Detail page.
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”

Go back to similarProperty.html.

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

 <lightning-button-icon icon-name="utility:edit"
                      class="slds-col_bump-left"
                      icon-class="slds-button__icon_hint"
                      variant="bare"
                      alternative-text="Edit Record"
                      onclick={editRecord}></lightning-button-icon>

Save the file.

In similarProperty.js, add the following method to the class:

 editRecord() {
     this[NavigationMixin.Navigate]({
         type: 'standard__recordPage',
         attributes: {
             recordId: this.item.Id,
             objectApiName: 'Property__c',
             actionName: 'edit'
         }
     });
 }

Save the file, and push to your scratch org.
Go back to the Property Detail page and refresh it.
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.html

<template>
    <div class="slds-media">
        <div class="slds-media__figure">
            <img src={item.Thumbnail__c} class="slds-avatar_large slds-avatar_circle" alt={item.Title_c} />
            </div>
            <div class="slds-media__body">
                <div class="slds-grid slds-hint-parent">
                    <a onclick={navigateToRecord}>
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{item.Name}</h3>
                    </a>
                    <lightning-button-icon icon-name="utility:edit"
                                           class="slds-col_bump-left"
                                           icon-class="slds-button__icon_hint"
                                           variant="bare"
                                           alternative-text="Edit Record"
                                           onclick={editRecord}></lightning-button-icon>
                </div>

                <lightning-record-view-form object-api-name="Property__c"
                                            record-id={item.Id}>
                    <lightning-layout multiple-rows>
                        <lightning-layout-item size="6">
                            <lightning-output-field field-name="Price__c"></lightning-output-field>
                        </lightning-layout-item>
                        <lightning-layout-item size="6">
                            <lightning-output-field field-name="Beds__c"></lightning-output-field>
                        </lightning-layout-item>
                        <lightning-layout-item size="6">
                            <lightning-output-field field-name="Baths__c"></lightning-output-field>
                        </lightning-layout-item>
                        <lightning-layout-item size="6">
                            <lightning-output-field field-name="Status__c"></lightning-output-field>
                        </lightning-layout-item>
                        <lightning-layout-item size="12">
                            <lightning-output-field field-name="Broker__c"></lightning-output-field>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-record-view-form>

            </div>
        </div>
</template>

similarProperty.js

import { LightningElement,api,wire } from 'lwc';
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';

export default class SimilarProperty extends NavigationMixin(LightningElement) {
    @api item;

    @wire(CurrentPageReference) pageRef;

    navigateToRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.item.Id,
                objectApiName: 'Property__c',
                actionName: 'view',
            },
        });
    }

    editRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.item.Id,
                objectApiName: 'Property__c',
                actionName: 'edit'
            }
        });
    }
}

Previous Next

exercises

Next Steps