function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SwiftguySwiftguy 

Basic navigation LWC not working

Hello All,
Implementing a basic navigation component. No error while pushing the code to the scratch org, but when i click on the navigation buttons no action. Below is the image of our component on Account Record page.

User-added image

NavigationinLWC1.html 
<template>
    <lightning-card title="Navigation Service in Lightning Web Component">
        <lightning-card title="Navigation to Record Page">
            <lightning-button-group>
                <lightning-button label="New Record Page" onclick={navigateToNewRecordPage}></lightning-button>
                <lightning-button label="Edit Record Page" onclick={navigateToEditRecordPage}></lightning-button>
                <lightning-button label="View Record Page" onclick={navigateToViewRecordPage}></lightning-button>
            </lightning-button-group>
        </lightning-card>
    </lightning-card>    
</template>

NavigationinLWC1.js 
import { LightningElement,api } from 'lwc';
import {NavigationMixin} from 'lightning/navigation'
export default class NavigationinLWC1 extends LightningElement {
    @api recordId;
    navigateToNewRecordPage(){
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attribute:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "new"
            }
        });
    }

    navigateToEditRecordPage(){
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attribute:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "edit"
            }
        });
    }

    navigateToViewRecordPage(){
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attribute:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "view"
            }
        });
    }
}

Kindly help me out.
Best Answer chosen by Swiftguy
Maharajan CMaharajan C
HI Vikram,

Your JS File have lot of small mistakes:

Just copy the below JS File code then it will work:

I have also bolded the area's in below where you have done the mistakes:


HTML:

<template>
    <lightning-card title="Navigation Service in Lightning Web Component">
        <lightning-card title="Navigation to Record Page">
            <lightning-button-group>
                <lightning-button label="New Record Page" onclick={navigateToNewRecordPage}></lightning-button>
                <lightning-button label="Edit Record Page" onclick={navigateToEditRecordPage}></lightning-button>
                <lightning-button label="View Record Page" onclick={navigateToViewRecordPage}></lightning-button>
            </lightning-button-group>
        </lightning-card>
    </lightning-card>    
</template>


JS:

/* eslint-disable no-console */
/* eslint-disable no-alert */
import { LightningElement,api } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';                             
export default class LightningNavSamples extends NavigationMixin(LightningElement) {
    @api recordId;
    navigateToNewRecordPage(){
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            }
        });
    }
    navigateToEditRecordPage(){
        console.log('Record Id ==> '+ this.recordId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "edit"
            }
        });
    }
    navigateToViewRecordPage(){
        console.log('Record Id ==> '+ this.recordId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "view"
            }
        });
    }
}


Meta-XML File:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
   <target>lightning__AppPage</target>
   <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>


Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
HI Vikram,

Your JS File have lot of small mistakes:

Just copy the below JS File code then it will work:

I have also bolded the area's in below where you have done the mistakes:


HTML:

<template>
    <lightning-card title="Navigation Service in Lightning Web Component">
        <lightning-card title="Navigation to Record Page">
            <lightning-button-group>
                <lightning-button label="New Record Page" onclick={navigateToNewRecordPage}></lightning-button>
                <lightning-button label="Edit Record Page" onclick={navigateToEditRecordPage}></lightning-button>
                <lightning-button label="View Record Page" onclick={navigateToViewRecordPage}></lightning-button>
            </lightning-button-group>
        </lightning-card>
    </lightning-card>    
</template>


JS:

/* eslint-disable no-console */
/* eslint-disable no-alert */
import { LightningElement,api } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';                             
export default class LightningNavSamples extends NavigationMixin(LightningElement) {
    @api recordId;
    navigateToNewRecordPage(){
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            }
        });
    }
    navigateToEditRecordPage(){
        console.log('Record Id ==> '+ this.recordId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "edit"
            }
        });
    }
    navigateToViewRecordPage(){
        console.log('Record Id ==> '+ this.recordId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                "recordId":this.recordId,
                "objectApiName":"Account",
                "actionName": "view"
            }
        });
    }
}


Meta-XML File:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
   <target>lightning__AppPage</target>
   <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>


Thanks,
Maharajan.C
This was selected as the best answer
SwiftguySwiftguy
Thanks Maharajan, your code sorted the problem.
 
Himanshu Mishra 2Himanshu Mishra 2
Thank you, was looking solution for Clearcycle (https://clearcycle.com)
Vivek TendulkarVivek Tendulkar
Thank you Maharajan,this helped me too.
Sprutiraj Panda 7Sprutiraj Panda 7
hi 
i implememt the above code so my code was like below 
findDelear.html
<template>
    <lightning-card title="find Delear " icon-name="utility:frozen" >
        <lightning-button-icon icon-name="utility:expand_alt" 
        slot="actions" 
        onclick={handleNavigateToRecord}></lightning-button-icon>
</lightning-card>
</template>
findDelear.js
import { LightningElement } from 'lwc';
import {NavigationMixin} from 'lightning/navigation'
import Delear_Location__c from '@salesforce/schema/Delear_Location__c'
export default class FindDelear extends NavigationMixin(LightningElement){
    recordId
    handleNavigateToRecord(){
        console.log('recordId '+ this.recordId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId: this.recordId,
                objectApiName:Delear_Location__c,
                actionName:'view'
            }
        })
    }
}
 but after that when we saw the out put its through the errror  PAGE DOESNOT EXIT (Enter a valid URL and try again).
please help me on that . 
thnaks 

 
flavia dcosta 2flavia dcosta 2
Hi Sprutiraj Panda 7,
were u able to get a resolution to the above error, if so can you please paste ur resolved code. I am facing the same error.
thanks
Flavia