Visualforce Page in Lightning Web Component

In Salesforce LWC development, we can use the Visualforce pages inside the Lightning Web Components. For example, you have created a contact form using Visualforce pages. To use that form in LWC, we can embed that Visualforce page using the <iframe> tag and the visualforce page URL as src within the LWC.

In this Salesforce tutorial, we will learn how to use the Visualforce page in Salesforce Lightning Web components.

Why Use The Visualforce Page in Lightning Web Component?

A Visualforce page is similar to a standard Web page built using the Apex framework that includes features to access, display, and update the Salesforce organization’s data.

Using a Visualforce page in Lightning Web Component means using the Visualforce functionality in LWC, such as creating a form. Instead of defining the form from scratch in the LWC, we import it from the Visualforce pages.

This approach will increase the code reusability and allow us to import the functionalities that are easy to define in Visualforce as compared to Lightning Web Components.

Visualforce Page in a Salesforce Lightning Web Component

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 the Lightning Visualforce Page

If you don’t have an existing Visualforce page, follow the steps below to create a custom Visualforce page.

1. Navigate to the setup page of Salesforce Lighting, 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.

2. In this example, we will create the Visualforce page from the Visualforce setup. To do so, click on the New button.

3. In this step, enter the Label and Name for the Visualforce page. Then select the checkbox Available for Lightning Experience.

• In the Visualforce Markup tab, enter the code below to define the Visualforce page.

• In this, we have used the <h1> tag to define the heading and used the <apex:form> tag to define a section of a page that allows users to enter input and submit it using the <apex:commandButton>.

<apex:page>
    <h1>Welcome to the Visualforce Page</h1>
    <apex:form>
        <apex:inputText label="Enter your name:" />
        <apex:commandButton value="Submit" action="{!save}"/>
    </apex:form>
</apex:page>

In this example, the Visualforce page will display an input field to enter the name with a Submit button.

4. At last, click Save to save the Visualforce page.

With this, we have created a sample Visualforce page.

Create Lightning Web Component With Embedded Visualforce Page

Now, we will create a lightning web component in which we will embed the Visualforce page that we have created in the above steps.

Open the VS code or any other IDE integrated with your Salesforce org. Then, follow the steps below.

1. In the VS code, press the keys ctrl+shift+p to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.

2. Label the Lightning Web Component as visualForceComponent and press enter.
3. As we create the lightning web component, it will give three files in the LWC folder visualForceComponent: JS, HTML, and meta.xml.

• Enter the code below in the HTML file to embed the Visualforce page in the Lightning Web Component.
• In this template, we have used the <iframe> tag to embed the visualforce page.
• The src=”/apex/LcVisualforcePage” is the URL source of the visualforce page.

<template>
    <div class="slds-box">
        <iframe src="/apex/LcVisualforcePage" width="100%" height="600px" frameborder="0"></iframe>
    </div>
</template>

To get the source URL of the visualforce page, navigate to the Visualforce page and open it in Preview, then from the URL, copy the values after the org address.

4. To display the Visualforce page properly in the Lightning web component, create a CSS file in the same component and enter the code below.

• To create a CSS file, right-click on the LWC component folder and select New File, then enter the label as visualForceComponent.css.

.slds-box {
    padding: 20px;
    border: 1px solid #d8dde6;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16);
}

Since we are showing a basic embedding and the logic is handled in the Visualforce page, we don’t need to define anything in the JS file.

5. Enter the code below in the meta.xml file in the <LightningComponentBundle> tag to make the component accessible to the lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>

6. Navigate to the Lightning page to deploy the Lightning web component, click on the settings icon, and select Edit Page.

7. Go to the Components section in the Lightning App builder, drag and drop the Lightning web component to the page region, and save the changes.

Now, in the Lightning web component, you will see the sample form with the Name input and Submit button that we defined in the Visualforce page.

This way, we can embed a Visualforce page in the lightning web component using the <iframe> tag.

Use Existing Visualforce Page in a Salesforce Lightning Web Component

Let’s take a real-time example where we have an existing Visualforce page to create a Contact form. In the steps below, we will see how to embed this Visualforce page in the LWC.

1. To add the Visualforce page to the Lightning web component, ensure that it is accessible for the Lightning Experience.

For this, navigate to the Visualforce page setup and open the Visualforce page, then ensure that you have selected the checkbox Available for Lightning Experience, Experience Builder sites, and the mobile app.

2. Another thing that we need here is the Visual page URL that we will use to embed it in the lightning web component.

To get the Visualforce page URL, open it in Preview mode, then copy the values after the Salesforce org address from the URL.

Now, we will create a Lightning web component to add the existing Visualforce page ContactForm.

3. In the VS code, press the keys ctrl+shift+p to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.
4. Enter the lightning web component name in the camel case and press enter.
5. Now, you will see files .html, .js, and meta.xml in the new lightning web component.

The logic of embedding the Visualforce page will be handled in the HTML file. For this, we will use the <iframe> tag and URL source of the Visualforce page.

<template>
    <lightning-card title="Contact Form">
        <div class="slds-p-around_medium">
            <iframe src={vfPageUrl} width="100%" height="600px"></iframe>
        </div>
    </lightning-card>
</template>

In the above code, we have used <iframe src={vfPageUrl}> to get the URL from the JavaScript file dynamically.

6. Enter the below code in the Javascript file to define the URL source of the Visualforce page.

import { LightningElement } from 'lwc';

export default class ContactFormLWC extends LightningElement {
    vfPageUrl = '/apex/ContactForm'; 
}

7. Now, make the Lightning web component available to the Lightning pages by entering the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

8. Navigate to the lightning page and deploy the LWC component using the lightning app builder.

Now, we can see that the Visualforce page displays the Contact form inside of the LWC component.

This way, we can easily embed the Salesforce Visualforce page inside the lightning web component using the <iframe> tag.

Conclusion

In this Salesforce tutorial, we have learned how to use or embed a Visualforce page in the lightning web component. For this, we used the <iframe> tag to integrate Visualforce pages into Lightning Web Components, allowing us to display complex functionalities that can be easily implemented in Visualforce compared to LWC.

You may also like to read:

• Create Lightning Web Component In Salesforce Developer Console
• Searchable Lightning Combobox in Lightning Web Component
• How to Rename Lightning Web Component in Salesforce?
• Override Standard Button Using Lightning Web Component (LWC)
• How To Embed Lightning Web Component In Visualforce Page?

Abhijeet

Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.