Suppose a company is still using Visualforce pages in Salesforce for some old features. Now the development team wants to use Lightning Web Components (LWC) to build modern and faster UI components.
Instead of rewriting the entire Visualforce page, the developer decides to embed a Lightning Web Component inside the Visualforce page.
For example, the company has a Visualforce page to display Account details. The developer creates a Lightning Web Component to show recent Opportunities of that Account in a better UI. Then the developer loads that LWC inside the Visualforce page.
This way, the company can use modern LWC features while still keeping the existing Visualforce page.
This approach helps when:
- You want to modernize old Visualforce pages.
- You want to reuse existing Visualforce functionality.
- You want to add new Lightning features without rebuilding everything.
In this article, we will learn about how to use a Visualforce page with Lightning Web Components (LWC) in Salesforce.
Why Use LWC with Visualforce?
Before we see the implementation, let’s understand why we need to use LWC with Visualforce.
Many Salesforce organizations still use legacy Visualforce pages in production. These pages may contain important business logic and functionality.
If a developer wants to add new modern UI components, rewriting the entire Visualforce page may take a lot of time.
Instead of rebuilding everything, developers can simply embed Lightning components inside the Visualforce page.
Some common reasons include:
• Modernizing old Visualforce pages
• Reusing existing Visualforce functionality
• Adding Lightning UI features to old pages
• Gradually migrating to Lightning framework
This approach helps companies upgrade their UI without breaking existing systems.
Real-Time Scenario
Let’s understand this concept with a simple real-time example. Suppose a company has an old Visualforce page that displays Account details.
Now the development team wants to add a modern component that shows Account information in a better UI using Lightning Web Components.
Instead of recreating the whole Visualforce page, the developer decides to:
- Create a Lightning Web Component
- Wrap it inside an Aura Component
- Load that Aura component inside the Visualforce page
This allows the Visualforce page to display modern Lightning UI components.
Use Visualforce with Lightning Web Components in Salesforce
To embed a Visualforce page in a Lightning Web Component, we will first create a sample Visualforce page, which will then be embedded in a Lightning Web Component.
Create a Visualforce Page in Salesforce
If you don’t have an existing Visualforce page, follow the steps below to create a custom Visualforce page.
- Navigate to the setup page of Salesforce Lightning, and in the quick find, search and select Visualforce pages.
- We have two options for creating a Visualforce page: one from the Developer Console and another from the Visualforce Page Setup.
- In this example, we will create the Visualforce page from the Visualforce setup. To do so, click on the New button.
- In this step, enter the Label and Name for the Visualforce page. Then, select the checkbox ‘Availa