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.

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.

A mixin is a special type of JavaScript class. Other classes can call methods in the mixin without inheriting the mixin class.

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 the lightning/navigation module.
Line 3: The ClientSideNavigation class that defines the component extends the NavigationMixin.
Lines 4–10: When the handleButtonClick method runs (after a user clicks the button), the navigation service redirects the user to the list page for the Contact object. This is achieved by calling the mixin Navigate 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:

Pro-code development:

Use the Navigation Service and Reuse Visualforce

Learning Objectives

URLFOR vs the Navigation Service

Reusing Visualforce in Lightning Experience

Rebuild vs Reuse

Wrap Up

Resources