Why create one more component when you can bypass it?

While navigating from one Salesforce Lightning Web Component to another Salesforce LWC, you’ll need a PageReference Object of Lightning Component Type that works only in the Salesforce Lightning Experience Salesforce Mobile App. This can be achieved by creating an additional Aura Component, but to do so you need to implement lightning:isUrlAddressable which will be added as an interface to directly navigate to Lightning Component via URL.

This blog will help you to navigate and pass values from Salesforce Lightning Web Component to another Lightning Web Component without creating an Aura Component. Let’s dive in.

Create two Salesforce Lightning Web Component,

  • sourcelwc
  • targetlwc

As the name suggests, sourcelwc will be responsible for taking user input and passing it to targetlwc. Enough talks let’s see the real magic.

Sourcelwc.html

This file has a button with the label name NAME which will navigate you to another lightning web component when you click on it.

Sourcelwc.js

The file defines the handleClick method and links it with the button in HTML markup to create a URL in the Base64 encoded form.

sourcelwc.js-meta.xml

Targetlwc

This creates is an input text field for displaying user input.

Tagerlwc.html

Tagerlwc.js

Let’s take a glimpse at the functionality.

Salesforce lwc, Salesforce lightning web component
Navigation in LWC and passing the values without using the Aura component2 1

This functionality is not only easy to implement but will also save your time and efforts required to create one more component. After all, why complicate the program with a few more lines of code?

Do try it out and let us know your thoughts on it!

Happy Coding!

Related Articles
How to Build a Real Time Chat Application Using LWC and Models API

The Models API plays a significant role in providing access to and facilitating interaction with large language models (LLMs) from various Salesforce partners such as Anthropic, Google, and OpenAI. It enables applications to leverage these models for various tasks, including text generation and other AI-powered capabilities. As a user, you can configure any Salesforce-enabled model […]

Read More
How to Integrate Salesforce Data Cloud with Amazon Redshift

Companies can finally connect Amazon Redshift to Salesforce Data Cloud without using the ordinary username & password authentication systems ever since its collaboration with AWS has happened. Business owners no longer have to be concerned about managing static credentials or breaching data security. By leveraging Salesforce IDP, companies can easily access their data lakehouse in […]

Read More
Trigger Prompt Templates Using Flow, Apex, or REST API

A prompt template is a pre-designed structure in Salesforce, specially designed to create personalized prompts by filling the substitute with particular details of customers, products, and more. This approach strengthens the creation of prompts and lets teams generate data-driven content. Every time a prompt template is used, it automatically merges the data to create a […]

Read More
Step-by-Step Guide on Adding Opportunity Team Members to Slack Channel

Salesforce allows you to improve communication by effortlessly connecting Opportunity Team Members to Slack channels. This step-by-step blog will show you how to enable Opportunity Teams, configure Slack integrations, and automate the process with Salesforce Flow. Real-time Slack notifications may help you streamline communication, increase productivity, and keep your sales team on the same page. […]

Read More
How to Use Transform Element in Salesforce Flow

Salesforce introduced the transform element in their winter ‘24 release. This feature simplifies data processing in flows by eliminating the need for loops and assignment elements. With the Transform Element, you can seamlessly map source data to target data, making your flows more efficient and easier to maintain. Transform element is available for screen flows, […]

Read More
How to Use TypeScript in Salesforce Lightning Web Components (LWC)

TypeScript is a programming language developed by Microsoft; used for enhancing JavaScript by adding different static types. With the help of TypeScript, developers can easily find errors during the development process before the execution. It also makes the code more readable and maintainable. With the successful integration of Salesforce Lightning Web Components (LWC), TypeScript improves […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818