How to use LWC in Visualforce Page?

by

In this post, we will implement the functionality to use LWC in Visualforce Page using Lightning Out. There are many projects which are still maintained in Visualforce Page. In such projects, there are new requirements that are being developed using/in Visualforce Pages only. But after the introduction of Lightning Out, we don’t have to do it anymore. Now, we can use LWC in Visualforce Page. Let’s hop into the implementation.

Implementation

In this implementation, we will create a Lightning Web Component. Then, we will include this component in the Visualforce Page.

Create a Lightning Web Component lwcCmp and display Create Record form using lightning-record-form. This tag is part of the Lightning Data Service provided by Lightning Web Component. Check this post to know how to use Lightning Data Service in Lightning Web Component.

lwcCmp.html

<template>
    <lightning-card title="Create Record - Lightning Web Component">
        <div class="slds-p-horizontal_small">
         
            <lightning-record-form object-api-name="Account" record-id={strRecordId}
            columns="2" mode="edit" fields={arrayFields}></lightning-record-form>
        </div>
    </lightning-card>
</template>

lwcCmp.js

import { LightningElement } from 'lwc';
 
export default class LwcCmp extends LightningElement {
    strRecordId;
    arrayFields = ['Name', 'Type', 'Phone', 'AccountNumber', 'Website'];
}

Now, create a Lightning Aura Dependency App by extending ltng:outApp, and add Global access. Then, add the Aura Dependency using Lightning Web Component as a resource that we created earlier.

LightningOutApp.app

<aura:application extends="ltng:outApp" access="Global">
    <aura:dependency resource="c:lwcCmp"/> 
</aura:application>

Final step is to include LWC in Visualforce Page.

Lightning Out

To include LWC in Visualforce Page, we first need to include a Lightning Out JavaScript library using below Tag in Visualforce Page:

<apex:includeLightning />

Then, we need to use below JavaScript methods to use and create a Lightning Component in Javascript:

$Lightning.use() which takes four parameters:

  • appName: Name of our Aura Dependency app. Required.
  • callback: Callback method that will execute once the Lightning Component is loaded. Optional.
  • lightningEndPointURI: The Lightning URL of Salesforce instance. Optional.
  • authToken: The session ID or OAuth access token of an active Salesforce session. Optional.

$Lightning.createComponent() will be passed as a callback method for above method. This method accepts four parameters.

  • componentName: Name of a Lightning Component. Required.
  • attributes: To pass the attributes for the Lightning Component. If no attributes are required. Pass an empty object. Required.
  • domLocator: Id of an element or DOM element where the Lightning Component will be inserted. Required.
  • callback: Callback method that will be called once the Lightning Component is added on the page. Optional.

VfPage.page

<apex:page standardStylesheets="true" showHeader="false">
    <apex:includeLightning />
     
    <div id="LightningAppDivId">
        <!-- Lightning Web Component will be included here. -->
    </div>
 
     <script>
         $Lightning.use(
             "c:LightningOutApp", // Name of Aura Dependency app where c is namespace.
             function() { // Callback function
                 $Lightning.createComponent(
                     "c:lwcCmp", // Name of Lightning Component where c is namespace.
                     {}, // attribute parameters
                     "LightningAppDivId" // Id of the element where Lightning Component will be rendered.
                 );
             }
         );
     </script>
     
</apex:page>

That is all.

LWC in Visualforce Page

Open a Visualforce page or add it in on any Lightning Page to view the page. This is how our implementation looks like:

LWC in Visualforce
LWC in Visualforce

This is how we can implement LWC in Visualforce Page. If you don’t want to miss a new implementation, please Subscribe here.

See you in the next implementation.

Leave a Comment