Use the Navigation Service and Reuse Visualforce
Learning Objectives
After completing this unit, you’ll be able to:
- Explain how to implement navigation patterns in Lightning web components.
- Evaluate whether to move specific Visualforce functionality to Lightning or to keep it in Visualforce.
- Describe how Lightning web components can interact with Visualforce pages.
We’ve seen how to use some Visualforce concepts to understand Lightning Web Components basics. We’ve also seen how to work with Salesforce data effectively. In this unit, we cover two remaining concepts: navigation and Visualforce reuse. Finally, we wrap up this module with some recommended next steps.
URLFOR vs the Navigation Service
Patterns that perform navigation tasks are common in Visualforce. Visualforce pages often use the URLFOR
function with <apex:commandButton>
and <apex:commandLink>
tags to navigate to pages inside or outside of Salesforce. Apex controller methods also facilitate navigation by returning PageReferences
.
The preferred way to navigate programmatically from a Lightning web component to anywhere else is to use the Lightning Navigation Service. The service allows you to generate URLs, navigate to a page reference, work with URL parameters, and open files. Many page reference types, such as App, Lightning Component, Navigation Item (tab), and Record Page are supported.
The Navigation Service eliminates hardcoded URLs by using meaningful PageReference
objects to perform navigation. If Salesforce changes a specific URL, code that links to it doesn't break.
To use the Navigation Service:
- Import the
lightning/navigation
JavaScript module into the Lightning web component. - Make the Lightning web component’s class extend
NavigationMixin
. - Call the
Navigate
method, passing the page reference of the page you want to navigate to.
Consider this example, which uses the Navigation service to navigate to the contact list page.
clientSideNavigation.js
import { LightningElement } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class ClientSideNavigation extends NavigationMixin(LightningElement) { handleButtonClick() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Contact', actionName: 'list' } }); } }
Code highlights:
- Line 2: We import the
NavigationMixin
from thelightning/navigation
module. - Line 3: The
ClientSideNavigation
class that defines the component extends theNavigationMixin
. - Lines 4–10: When the
handleButtonClick
method runs (after a user clicks the button), the navigation service redirects the user to thelist
page for theContact
object. This is achieved by calling the mixinNavigate
method.
Reusing Visualforce in Lightning Experience
Suppose you want to continue using your Visualforce pages in Lightning Experience. You can do that. Visualforce pages are supported in many low-code tools, including Lightning pages, the Utility bar, and Quick Actions. The Visualforce & Lightning Experience module explains how to configure your Visualforce pages for use in Lightning Experience. Visualforce and Lightning web components can also coexist on the same page and interact.
Use the Lightning Components for Visualforce JavaScript Library when you want to include a Lightning web component in a specific location on a Visualforce page. This technique uses an iframe and gives you tools to communicate between the component and the Visualforce page.
Lightning Components for Visualforce works for both Aura components and Lightning web components.
Use Lightning Message Service to facilitate communication among Lightning components and Visualforce pages in different hierarchies of the DOM. The LWC Recipes sample app shows how you can use Lightning Message Service to publish and subscribe to messages.
Rebuild vs Reuse
As you begin developing Lightning web components, you need to decide when to reuse a Visualforce page within Lightning Experience and when to rebuild it as a Lightning web component. Seriously consider rebuilding when you want:
- A more engaging and responsive user experience.
- An experience that’s easy to optimize for multiple device form factors.
- Better performance in your app.
For new development, we always recommend using the Lightning Experience low-code tools and Lightning web components. They offer a variety of benefits and simplify the development process.
Wrap Up
Congratulations! In addition to learning about Lightning web components architecture and coding concepts, accessing data, and handling server errors, you created and deployed four Lightning web components.
Now that you know a bit about how Visualforce compares to Lightning Web Components, we hope that transitioning from Visualforce to Lightning Web Components development seems a little less daunting. Continue your journey toward Lightning Experience UI Development with these learning resources on Trailhead.
Getting started:
Low-code tools:
- Lightning App Builder
- Lightning Experience Customization
- Lightning Alternatives to JavaScript Buttons
- Salesforce Mobile App Customization
- Build Flows with Flow Builder
Pro-code development:
Resources
- Lightning Web Components Developer Guide: Composition
- Lightning Web Components Developer Guide: Public Properties
- Lightning Web Components Developer Guide: Set Properties on Child Components
- Lightning Web Components Developer Guide: Communicate with Events
- Lightning Web Components Developer Guide: Navigate to Pages, Records, and Lists
- Lightning Web Components Developer Guide: Use Components in Visualforce Pages