Wednesday, 27 October 2021

Lightning Web Component Navigation Service

 The navigation service adds two APIs to your component's class. Since these APIs are methods on the class, invoke them from this.


1.[NavigationMixin.Navigate](pageReference,  [replace])

A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.

ex :

navigateToObjectHome() {

        // Navigate to the account object home page.

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'Account',

                actionName: 'home'

            }

        });

    }


2.[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.


ex :


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.


No comments:

Post a Comment