Skip to content

Instantly share code, notes, and snippets.

@LokeshSagi

LokeshSagi/lwcNavigation.html

Last active December 12, 2024 17:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LokeshSagi/58377860737fc9a1f7f5cd7f9deb6d48 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LokeshSagi/58377860737fc9a1f7f5cd7f9deb6d48 to your computer and use it in GitHub Desktop.
Download ZIP
All types of possible navigations in LWC
Raw
lwcNavigation.html
<template>
<lightning-card title={heading}>
<lightning-layout horizontal-align="center" vertical-align="center" multiple-rows>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="LWC Practice" onclick={navigateTab} icon-name="custom:custom34">
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Account Home" onclick={navigateAccountHome} icon-name="custom:custom34">
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="All Accounts" icon-name="utility:save" onclick={navigateListView}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Record Details" variant="destructive" icon-name="utility:delete"
onclick={navigateDetails}></lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Record Relationship Page" variant="destructive" icon-position="right"
icon-name="custom:custom32" onclick={navigateRelationship}></lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Web Page" variant="brand" onclick={navigateToWebPage}
icon-name="action:web_link">
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Create Account" icon-name="action:new_account" onclick={navigateCreateAccount}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="Edit Account" icon-name="action:edit" onclick={navigateAccountEdit}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="3">
<lightning-button label="To another community page" icon-name="action:edit" onclick={navigateToPage}>
</lightning-button>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
Raw
lwcNavigation.js
/* eslint-disable no-console */
/* eslint-disable no-alert */
/* eslint-disable no-unused-vars */
import {
LightningElement,
api,
wire
} from 'lwc';
import {
NavigationMixin,
CurrentPageReference
} from 'lightning/navigation';
export default class LwcNavigation extends NavigationMixin(LightningElement) {
@api heading = "LWC Navigation";
@wire(CurrentPageReference)
pageRef;
connectedCallback() {
//alert('current = '+JSON.stringify(this.pageRef));
}
navigateTab(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
apiName: 'LWC_Practice'
}
});
}
navigateAccountHome(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'home'
}
});
}
navigateRelationship(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: "standard__recordRelationshipPage",
attributes: {
recordId: "500B0000004NCnTIAW",
objectApiName: "Case",
relationshipApiName: "CaseComments",
actionName: "view"
}
}, false);
}
navigateListView(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
},
state: {
filterName: 'AllAccounts'
}
});
}
navigateDetails(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '001B000000nTmlJIAS',
objectApiName: 'Account',
actionName: 'view'
}
}, true);
}
navigateCreateAccount(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'new'
}
});
}
navigateAccountEdit(event) {
console.log('Label = ' + event.target.label);
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: '001B000000nTmlJIAS',
objectApiName: 'Account',
actionName: 'edit'
}
});
}
navigateToWebPage() {
// Navigate to a URL
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: 'http://salesforce.com'
}
}, false);
}
navigateToPage(event) {
this[NavigationMixin.Navigate]({
type: 'comm__namedPage',
attributes: {
pageName: 'community-page-name',
},
state: {
c__recordId: 'xxxxxxxxxxxx'
}
});
}
}
@asanaDY
Copy link

asanaDY commented Dec 12, 2024

In community it doesn't work =(

@LokeshSagi
Copy link
Author

LokeshSagi commented Dec 12, 2024

navigateToPage(event) {
this[NavigationMixin.Navigate]({
type: 'comm__namedPage',
attributes: {
pageName: 'community-page-name',
},
state: {
c__recordId: 'xxxxxxxxxxxx'
}
});
}

This code will work in community as well. @asanaDY

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment