Navigation Service in LWC(Lightning Web Components)

To explore in Lightning Experience, Lightning Communities, and the Salesforce application, utilise the navigation administration, lightning/navigation.

The lightning/navigation administration is upheld just in Lightning Experience, Lightning Communities, and the Salesforce application. It isn’t upheld in different compartments, like Lightning Components for Visualforce, or Lightning Out. This is valid regardless of whether you access these holders inside Lightning Experience or the Salesforce application. We can involve navigation administrations in LWC to Navigate to Pages, Records, and Lists.

Basic Navigation

Utilise the navigation administration, lightning/navigation, to explore various page types, similar to records, list perspectives, and articles. Additionally, utilise the navigation administration to open documents.

Rather than a URL, the navigation administration utilises a PageReference. A PageReference is a JavaScript object that depicts the page type, its credits, and the condition of the page. Utilising a PageReference protects your part from future changes to URL designs. It likewise permits your part to be utilised in numerous applications, every one of which can utilise different URL designs.

Route administration utilises a PageReference. PageReference is a JavaScript object that depicts the page type, its credits, and the condition of the page.

Page type(String) and attributes(Object) are required boundaries, state(Object) is discretionary boundary.

Use Navigation Service in LWC.

Here are steps to utilise the navigation service:

Step1: Import the Navigation module:

Eg: import { NavigationMixin } from ‘lightning/navigation’;

Step2:  NavigationMixin function needs to be used in the component.

Eg: export default class MyDemoElement extends NavigationMixin(LightningElement) {}

Step3: Make a plain JavaScript PageReference object that characterises the page

Step4: To dispatch the navigation demand, consider the navigation administration’s [NavigationMixin.Navigate](pageReference, [replace])

Eg: navigateNext() {

       this[NavigationMixin.Navigate]({

           type: ‘standard__navItemPage’,

           attributes: {

               apiName: this.tabName,

           },

       });

   }

The NavigationMixin adds two APIs to your part’s class. Since these APIs are strategies on the class, they should be summoned with this reference.

  • [NavigationMixin.Navigate](pageReference, [replace]): A part calls this[NavigationMixin.Navigate] to explore one more page in the application.
  • [NavigationMixin.GenerateUrl](pageReference): A part calls this[NavigationMixin.GenerateUrl] to get a guarantee that makes plans to the subsequent URL. The part can involve the URL in the href characteristic of an anchor. It can likewise utilise the URL to open another window utilising the window.open(url) program API.

Navigate to New Record LWC

Eg: navigateToNewAccountPage() {

        this[NavigationMixin.Navigate]({

            type: ‘standard__objectPage’,

            attributes: {

                objectApiName: ‘Account’,

                actionName: ‘new’

            },

        });

    }

Navigate to View Record LWC

Eg:  navigateToViewAccountPage() {

        this[NavigationMixin.Navigate]({

            type: ‘standard__recordPage’,

            attributes: {

                recordId: this.recordId,

                objectApiName: ‘Account’,

                actionName: ‘view’

            },

        });

    }

Navigate to Lightning Component LWC

Eg: navigateToLightningComponent() {

        this[NavigationMixin.Navigate]({

            “type”: “standard__component”,

            “attributes”: {

                //Here customLabelExampleAura is name of lightning aura component

                //This aura component should implement lightning:isUrlAddressable

                “componentName”: “c__customLabelExampleAura”

            }

        });}

Navigate to Web Page LWC

Eg: // Navigation to web page

    navigateToWebPage() {

        this[NavigationMixin.Navigate]({

            “type”: “standard__webPage”,

            “attributes”: {

                “url”: “https://www.sfdcpoint.com/

            }

        });

    }

Navigate to Visualforce page LWC

Eg:  navigateToTab() {

        this[NavigationMixin.Navigate]({

            type: ‘standard__navItemPage’,

            attributes: {

                //Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs

                apiName: ‘CustomTabName’

            },

        });

    }

Step 2: – To enable or edit settings, click edit & enable Web to lead & then click on Create a web to lead.

Step 3: – Select fields that you want to show in the form, transfer them from available to selected fields, then enter Return URL according to choice and click generate.

Step 4: – Salesforce creates Html code, we too can customise as per requirement. We can duplicate that code to our website, notepad and save as type.html, at last click on finish.

Fill in the form and the new lead will be created in the Salesforce org.

The Benefit of Using Web-To-Lead for Your Website

With the least exertion, one can make the web to lead forms in Salesforce which can be utilised to assemble all the significant information of users visiting the landing pages of the website. The overall process is easy thus following the steps is not complex. Consistently storing all the leads gathered on the website on to Salesforce is possible only with the help of the Web to lead feature, making it conceivable to utilise the information.

Summary
Article Name
Navigation Service in LWC(Lightning Web Components)
Description
Website is not completed without navigation service in lightening web components, where navigation administration makes changes through javascript, instead of page URL.
Author
Publisher Name
BugendaiTech Pvt Ltd
Publisher Logo
Spread the updates

Leave a reply