Calling Lightning Web Components in Visualforce Pages

/ apex, Salesforce / By


In Salesforce development, the integration of Lightning Web Components (LWC) into Visualforce Pages is essential for various tasks.

This integration becomes particularly critical when:

  • Ensuring uniform user experiences across both Lightning and Classic interfaces.
  • Leveraging Lightning Web Components within Force.com sites or Portals to enhance functionality.
  • Expanding the applicability of LWC components beyond the Salesforce ecosystem.

By incorporating LWC into VF pages, users can achieve a cohesive experience across Lightning and Classic interfaces, catering to a diverse user base. Additionally, this integration allows the utilization of Lightning Web Components beyond Salesforce, enabling the incorporation of external applications and services.

Steps for Invoking LWC in Visualforce Pages:

  1. Develop a Lightning Web Component:

You can use the below code for the component and deploy it to your salesforce org.
Note:- The name of my component is ‘CallingLwcInVfPages’

HTML Code:

<template>
    <lightning-card  title="Using LWC in VF Pages" icon-name="custom:custom16">
     
         <p class="slds-p-horizontal_small">I am coming from Lightning Web Component(LWC)</p>
         <p class="slds-p-horizontal_small">{note}</p> <br>
 
       <lightning-button variant="success" label="Done" title="Done"></lightning-button>
    </lightning-card>
 </template>

JS Code:

import { LightningElement,api } from ‘lwc’;

export default class CallingLwcInVfPages extends LightningElement
{
@api note;
}

Js-Meta.xml Code:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
   <isExposed>true</isExposed>
       <targets>
        <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>


Please note: You have the option to modify the target and designate the location where you want the component to be displayed, such as “lightning__AppPage.”

Subsequently, an intermediate Aura Application becomes necessary. The need for this application arises because direct utilization of LWC or AURA within Visualforce is not possible. Consequently, it is imperative to establish a dependency on the Aura Application.

  1. Develop an Aura/Lightning Component:

This Aura application will act as a container for our Lightning web component. Once the application is created, proceed to set up the dependency for our application.

Note: The designated name for my Aura Application is ‘visualforceAuraApplications.’

Aura Application:

 <aura:application extends="ltng:outApp"     implements="ltng:allowGuestAccess">
<c:callingLwcInVfComponent></c:callingLwcInVfComponent>
</aura:application>
  1. Generate a Visualforce Page:

Now, the last step involves crafting a Visualforce Page that will encompass the LWC within it.

To embed your LWC or Aura Component within the VF page, we will employ the $Lightning.use() method.

The $Lightning.use() function requires four arguments, outlined as follows:

  • appName (String): Required* (The name of our lightning dependency app, including the namespace. For instance, “c:visualforceAuraApplications”)

Note: It is imperative to adhere to the ‘Camel Case’ notation when invoking our LWC component within the Aura Application.

  • Callback (function): A function to be invoked once the Lightning Component framework and our app are completely loaded. The callback does not receive any arguments. Typically, this is where you make the call to $Lightning.createComponent() to include our app on the page.
  • lightningEndPointURL (String): Optional when used within Salesforce. It represents the URL for the Lightning domain on your Salesforce instance. For instance, https://MyDomain.lightning.force.com.
  • authToken: Optional when used within Salesforce.

VF Page Code:

<apex:page standardStylesheets="true" showHeader="false">
<apex:includeLightning />    
<div id="LwcId" />
<script>
        $Lightning.use("c:visualforceAuraApplications", function() {
        $Lightning.createComponent("c:callingLwcInVfPages",
        {
            note   : 'I am coming from VF Page', // You can pass the value to @api attributes if you have inside JavaScript Class.
            recordId : '{!$CurrentPage.parameters.id}'
        },
        "LwcId", // the Id of div tag where your component will be rendered
        function(cmp) {
            console.log('Calling the LWC Component');
        });
    });
</script>
</apex:page>
  1. Preview the Result

Now, click on “Preview” or “Preview your VF page”. Wait for a few seconds and you will observe the output as follows:

Conclusion:

By adhering to these steps, you can leverage the synergistic capabilities of Lightning Web Components and Visualforce, unlocking new possibilities in Salesforce development.

Related Posts