Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- https://sfwiseguys.wordpress.com/2020/11/15/lwc-navigation/
- Let’s jump into the code
- To use the Navigation Service in your LWC , import it in your JS file-
- 1
- import { NavigationMixin } from 'lightning/navigation';
- And apply the NavigationMixin function to your Component’s base class –
- 1
- 2
- export default class My_lwc extends NavigationMixin(LightningElement) {
- }
- The NavigationMixin adds two APIs to your component’s class. Since these APIs are methods on the class, they must be invoked with this reference.
- [NavigationMixin.Navigate](pageReference, [replace]): A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.
- [NavigationMixin.GenerateUrl](pageReference): A component calls this[NavigationMixin.GenerateUrl] to get a promise that resolves to the resulting URL. The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.
- Navigation Service Examples
- RECORD PAGES :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- // Navigate to View Account Record Page
- navigateToViewAccountPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__recordPage',
- attributes: {
- recordId: this.yourRecordId,
- objectApiName: 'Account',
- actionName: 'view'
- },
- });
- }
- // Navigate to Edit Account Record Page
- navigateToEditAccountPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__recordPage',
- attributes: {
- recordId: this.yourRecordId,
- objectApiName: 'Account',
- actionName: 'edit'
- },
- });
- }
- // Navigate to Clone Account Record Page
- navigateToCloneAccountPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__recordPage',
- attributes: {
- recordId: this.yourRecordId,
- objectApiName: 'Account',
- actionName: 'clone'
- },
- });
- }
- //Communities don’t support the actionName values clone or edit.
- 2. OBJECT PAGES –
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- // Navigate to New Account Page
- navigateToNewAccountPage() {
- this[NavigationMixin.Navigate]({
- type: "standard__objectPage",
- attributes: {
- objectApiName: "Account",
- actionName: "new"
- },
- });
- }
- // Navigation to Account List view(recent)
- navigateToAccountRecentListView() {
- this[NavigationMixin.Navigate]({
- type: "standard__objectPage",
- attributes: {
- objectApiName: "Account",
- actionName: "list"
- },
- state: {
- filterName: "Recent"
- },
- });
- }
- //filterName = StringID or developer name of object"s list view.
- // Navigate to a New Account page with default field values:
- // Name: Salesforce,
- // OwnerId: 005XXXXXXXXXXXXXXX,
- // AccountNumber: ACXXXX,
- // NumberOfEmployees: 35000
- navigateToAccountDefault() {
- this[NavigationMixin.Navigate]({
- type: “standard__objectPage”,
- attributes: {
- objectApiName: "Account",
- actionName: "new"
- },
- state: {
- defaultFieldValues = "AccountNumber=ACXXXX,Name=Salesforce,NumberOfEmployees=35000,OwnerId=005XXXXXXXXXXXXXXX",
- nooverride: "1"
- }
- });
- }
- // Navigation to Case object home page
- navigateToCaseHome() {
- this[NavigationMixin.Navigate]({
- type: "standard__objectPage",
- attributes: {
- objectApiName: "Case",
- actionName: "home"
- }
- });
- }
- //Navigate to Reports Standard Tab
- navigateToReports() {
- this[NavigationMixin.Navigate]({
- type: "standard__objectPage",
- attributes: {
- objectApiName: "Report",
- actionName: "home"
- },
- });
- }
- //Navigate to Files Home/Standard tab
- navigateToFilesHome() {
- this[NavigationMixin.Navigate]({
- type: "standard__objectPage",
- attributes: {
- objectApiName: "ContentDocument",
- actionName: "home"
- },
- });
- }
- //In communities, actionName = list and home are the same.
- //In managed package, prefix the custom object with ns__
- 3. RECORD RELATIONSHIP PAGE –
- A page that interacts with a relationship on a particular record in the org. Only related lists are supported.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- // Navigation to Contact related list of Account
- navigateToContactRelatedList() {
- this[NavigationMixin.Navigate]({
- type: 'standard__recordRelationshipPage',
- attributes: {
- recordId: this.recordId,
- objectApiName: 'Account',
- relationshipApiName: 'Contacts',
- actionName: 'view'
- },
- });
- }
- //actionName = Only view is supported.
- //relationshipApiName = The API name of the object’s relationship field.
- 4. APP PAGES –
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- //Navigate to a Standard App
- navigateToSalesApp() {
- this[NavigationMixin.Navigate]({
- type: 'standard__app',
- attributes: {
- appTarget: 'standard__Sales',
- }
- });
- }
- //Navigate to a Custom App
- navigateToMyCustomApp() {
- this[NavigationMixin.Navigate]({
- type: 'standard__app',
- attributes: {
- appTarget: 'c__MyCustomApp',
- }
- });
- }
- // Pass either the appId or appDeveloperName to the
- // appTarget. The appId is the DurableId field on the AppDefinition object.
- // For standard apps, the namespace is standard__. For custom
- // apps, it’s c__. For managed packages, it’s the namespace
- // registered for the package.
- //Navigate to App Record Page in an App
- navigateToAppRecordPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__app',
- attributes: {
- appTarget: 'standard__LightningSales',
- pageRef: {
- type: 'standard__recordPage',
- attributes: {
- recordId: '001xx000003DGg0XXX',
- objectApiName: 'Account',
- actionName: 'view'
- }
- }
- }
- });
- }
- 5. LIGHTNING COMPONENT PAGES :
- To make an addressable LWC, embed it in an Aura component that implements the lightning:isUrlAddressable interface.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- // Navigate to Lightning Component with Params
- navigateToLC() {
- this[NavigationMixin.Navigate]({
- type: "standard__component",
- attributes: {
- //Here myCustomAura is name of Aura component
- //which implements lightning:isUrlAddressable
- componentName: "c__myCustomAura"
- },
- state: {
- c__counter: '5',
- c__recId: 'XXXXXXXXXXXXXXXXXX'
- }
- });
- }
- //You can pass any key and value in the state object. The key
- //must include a namespace, and the value must be a string.
- In Aura component, retrieve the sent params using component.get in the init controller method –
- 1
- 2
- component.get("v.pageReference").state.c__counter);
- component.get("v.pageReference").state.c__recId);
- Retrieval of params in LWC is described in a detailed section below.
- 6. CUSTOM TABS :
- navItemPage – A page that displays the content mapped to a custom tab. Visualforce tabs, Web tabs, Lightning Pages, and Lightning Component tabs are supported.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- // Navigate to Custom Tab - VF tabs, Web tabs, Lightning Pages, and Lightning Component Tabs
- navigateToTab() {
- this[NavigationMixin.Navigate]({
- type: 'standard__navItemPage',
- attributes: {
- apiName: 'MyCustomTabAPIName'
- },
- state: {
- c__counter: '5',
- c__recId: this.recId
- }
- });
- }
- 7. WEB PAGES
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- // Navigate to an External URL
- navigateToWebPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__webPage',
- attributes: {
- url: 'http://salesforce.com'
- }
- });
- }
- //Navigate to a Visualforce page
- navigateToVF() {
- this[NavigationMixin.GenerateUrl]({
- type: 'standard__webPage',
- attributes: {
- url: '/apex/myVFPage?id=' + this.recId
- }
- }).then(generatedUrl => {
- window.open(generatedUrl);
- });
- }
- // Here we use NavigationMixin.GenerateUrl to form the URL and then navigate to it in the promise.
- 8. KNOWLEDGE ARTICLE :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- // Navigate to Knowledge Article record
- navigateToKnowledgeArticle() {
- this[NavigationMixin.Navigate]({
- type: 'standard__knowledgeArticlePage',
- attributes: {
- articleType: 'MyArticleType',
- urlName: 'Mar-2020'
- }
- });
- }
- //The articleType is API name of the Knowledge Article record.
- //The urlName is the article's URL.
- 9. NAMED PAGES (standard) & FILE PREVIEW
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- // Navigate to Named Pages - A standard page with a unique name.
- navigateToNamedPage() {
- this[NavigationMixin.Navigate]({
- type: 'standard__namedPage',
- attributes: {
- pageName: 'home'
- }
- });
- }
- // pageName possible Values - home , chatter, today, dataAssessment, filePreview
- // Navigate to filePreview Page
- navigateToFilePreview() {
- this[NavigationMixin.Navigate]({
- type: "standard__namedPage",
- attributes: {
- pageName: "filePreview"
- },
- state: {
- // assigning single ContentDocumentId
- selectedRecordId: this.id
- }
- });
- }
- // recordIds: '069xx0000000005AAA,069xx000000000BAAQ',
- // selectedRecordId:'069xx0000000005AAA'
- 10. NAMED PAGES & LOGIN PAGE (community)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- // Navigate to standard page used in Lightning communities
- navigateToCommPage() {
- this[NavigationMixin.Navigate]({
- type: 'comm__namedPage',
- attributes: {
- name: 'Home'
- }
- });
- }
- // Supported pages in communities - Home, Account Management, Contact Support,
- // Error, Login, My Account, Top Articles, Topic Catalog, Custom page
- // Navigate to Authentication page in Lightning communities
- navigateToLoginPage() {
- this[NavigationMixin.Navigate]({
- type: 'comm__loginPage',
- attributes: {
- actionName: 'login'
- }
- });
- }
- // Supported actionName = login, logout
- Now that we have seen what all kinds of Navigation scenarios are provided, let’s also look at another feature, which is the URL generation done by NavigationMixin.GenerateUrl , as shown below-
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- recordPageUrl; // variable to be associated to anchor tag.
- // Generate a URL to a User record page
- generateURLforLink() {
- this[NavigationMixin.GenerateUrl]({
- type: 'standard__recordPage',
- attributes: {
- recordId: '005B0000001ptf1XXX',
- actionName: 'view',
- },
- }).then(generatedUrl => {
- this.recordPageUrl = generatedUrl;
- });
- }
- // NavigationMixin.GenerateUrl returns the Generated URL in the promise.
- // We can even use this in window.open(generatedUrl) command
- Retrieving Params in LWC
- We use CurrentPageReference to get a reference to the current page in Salesforce. Page URL formats can change in future releases. Hence, to future proof your apps, use page references instead of URLs.
- 1
- 2
- 3
- import { CurrentPageReference } from 'lightning/navigation';
- @wire(CurrentPageReference)
- pageRef;
- The key-value pairs of the PageReference state property are serialized to URL query parameters.
- Example of an LWC encoding defaultFieldValues in state and then navigating to another LWC and decoding them –
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- // navSenderLWC.js
- import { LightningElement } from 'lwc';
- import { NavigationMixin } from 'lightning/navigation';
- import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';
- export default class navSenderLWC extends NavigationMixin(LightningElement) {
- navigateWithParams() {
- const encodedValues = encodeDefaultFieldValues({
- FirstName: 'Waseem',
- LastName: 'Sabeel'
- });
- this[NavigationMixin.Navigate]({
- type: 'standard__objectPage',
- attributes: {
- objectApiName: 'Contact',
- actionName: 'new'
- },
- state: {
- defaultFieldValues: encodedValues
- }
- });
- }
- }
- And we use the Wired PageReference on the navigated LWC, and decode the field values as below –
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- // navReceiverLWC.js
- import { LightningElement, wire } from 'lwc';
- import { CurrentPageReference } from 'lightning/navigation';
- import { decodeDefaultFieldValues } from 'lightning/pageReferenceUtils';
- export default class navReceiverLWC extends LightningElement {
- @wire(CurrentPageReference)
- setCurrentPageRef(pageRef) {
- if (pageRef.state.defaultFieldValues) {
- const decodedValues = decodeDefaultFieldValues(pageRef.state.defaultFieldValues);
- }
- }
- }
- Note – All encoded default field values in the state are passed as strings.
- So that was all about Lightning Navigation Scenarios and Examples.
- A Note on Limitations –
- The lightning/navigation service is supported only in Lightning Experience, Lightning communities, and the Salesforce app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce app.
- For more detailed information , kindly refer to the Official Documentation provided here –
- All PageReference Types with attribute details - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_page_reference_type
- Developer Guide - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate
- lightning-navigation Component reference - https://developer.salesforce.com/docs/component-library/bundle/lightning-navigation/documentation
- Thank You!
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement