Instantly share code, notes, and snippets.
Last active
December 12, 2024 17:01
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save LokeshSagi/58377860737fc9a1f7f5cd7f9deb6d48 to your computer and use it in GitHub Desktop.
All types of possible navigations in LWC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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' | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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