Navigation Service in LWC (Lightning Web Components)

-


Introduction

Navigation Service in LWC simplifies navigating between the pages within the applications. Utilizing the navigation service in LWC you can create a smooth and seamless navigation experience for users within your Salesforce application. In this blog post, we will deep dive into the steps on how to use the Navigation Service.

What is a Navigation Service?

Navigation Service is a built-in module in LWC that enables developers to navigate different pages and components within the Salesforce ecosystem. This service provides you with a set of methods that helps you navigate different web pages, record pages, or other Lightning Components. 

Using the Navigation Service

1. Import the Navigation Service from the lightning/navigation module.



2. Apply the NavigationMixin function to the base class.



3. Create a JS PageReference object that defines the page.



4. Call the navigation service's [NavigationMixin.Navigate](pageReference) to dispatch the navigation request.



5. In steps 3 and 4 we saw how to navigate to a Record Page using NavigationMixin. You can also navigate to the URL using the navigation service. You can use standard__webPage type in the navigate method and provide the URL to navigate to any specific web page.



6. In addition to URLs and Standard Record Pages, you can also navigate to custom Lightning Pages using NavigationMixin. To navigate to a custom lightning page, provide standard__navItemPage as the type and the API name of the custom lightning page to which you want to navigate.





A short Demonstration 👇








For more insight on Navigation refer to the Salesforce Official Documentation on Navigation.


Thank you and see you in the next blog. 

Comments

Post a Comment

Popular posts from this blog

Display Maps in LWC

-
Image
  In this blog, we will look at how to display Google Maps in your Lightning Web Components. Salesforce provides a lightning-map component to display a map of one or more locations, using geocoding data and mapping imagery from Google Maps.  Now, let's look at how to use this component in your Lightning Web component. HTML : Pass the location(s) that you want to display in the map-marker property. A marker contains: Location Information:   A coordinate pair of latitude and longitude, or an address composed of address elements to be geocoded. Descriptive Information:  Optional title, description, and an icon. These items are relevant to the marker but not specifically related to location. Map markers have a few more properties that can be used to customize the map display, please refer to this documentation on Maps. Display a Single Marker Let's understand how we can pass single location info in the map-marker and display it on the map. In this example, we will creat...
Read more

Calling Apex method from LWC

-
Image
  In this blog post, we will take a look at the steps to call an Apex method from our Lightning Web Component with source code and demonstration videos. There are the following ways to call an Apex method into LWC: 1. Calling an Apex method using  wire services . 2. Calling an Apex method imperatively . 3. Calling and Apex method with async and await . Now let's take a look at the steps involved in the above-mentioned ways. Calling Apex method using Wire services The wire service in LWC helps in the retrieval of data or performing any action without the need for Apex code. You can use the wire service, to wire a property or a function that will receive data when the source is updated. 1. Expose the Apex method which you want to call from LWC The Apex method should be: a. Global or Public . b. decorated with @AuraEnabled , if the method has ( cacheable=true ) after this annotation, the results are cached at the client site to improve performance. 2. Import the Apex method whic...
Read more