Open LWC Component from a VisualForce Page

Salesforce recommends using LWC to develop custom web pages / components. However, there are still use cases where the VisualForce Pages might be needed, One of the most common use case is Launching a LWC from the List View Button.

A List View button is something that is visible on the Sobject's List Views. Its primary use case is to perform a bulk action on the records. For example, download all the given records as CSV, perform a Bulk Delete on selected list view etc..

Some of the use cases might require to launch a LWC component as well. For example, user needs to download all the records as CSV and we to display fields which are different from the ones displayed on the list view. 

We need to perform following steps in order to launch a LWC from a VF Page

1. Create a LWC that will be hosted inside the VF Page.
2. Create a Aura Component that will be containing the LWC.
3. Create an Aura App that will be called from the VF Page.
4. Create a VisualForce Page and host the Aura App.
5. Create a List View Button that will be launch the VF Page or Put the VF page on the App page

1. Create an LWC Component 

/**

* @description : Sample LWC Component

* @author : Shreya Mathur

* @Component Name and type : sampleLWCComponent/LWC JS File

* Created Date : Apr 15, 2023

**/

import { LightningElement, track, api } from 'lwc';

export default class sampleLWCComponent extends NavigationMixin(LightningElement) {

saveToFile() {

saveFile({})

.then(result => {

/*Add Code Here*/

}}

<!--

* @description : Sample LWC Component

* @author : Shreya Mathur

* @Component Name and type : sampleLWCComponent/LWC XML File

* Created Date : Apr 15, 2023

-->

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>51.0</apiVersion> <description>List View Button</description> <isExposed>true</isExposed> <masterLabel>List View Button</masterLabel> <targets>

<target>lightning__AppPage</target> </targets> </LightningComponentBundle>

2. Create an Aura Component to Host the LWC Component

Aura Component CMP File

/**

* @description : Sample Aura Component to host on Aura App

* @author : Shreya Mathur

* @Component Name and type : sampleAuraComponent/Aura Component

* Created Date : Apr 15, 2023

**/

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">

<aura:attribute name="strURL" type="String"/>

<aura:attribute name="strVFButtonName" type="String"/>

<aura:attribute name="selectedCases" type="String" />

<c:sampleLWCComponent strURL="{!v.strURL}" strButtonName="{!v.strVFButtonName}">

</c:sampleLWCComponent >

</aura:component>

3. Create an Aura App to Host the LWC Component

Aura .app file called as sampleAuraApp

/**

* @description : Sample Aura App to host on VF Page

* @author : Shreya Mathur

* @Component Name and type : sampleAuraApp/Aura App

* Created Date : Apr 15, 2023

**/

<aura:application extends="ltng:outApp" access="global">

<aura:dependency resource= "c:sampleAuraComponent"/>

</aura:application>

4. Create VF Page

/**

* @description : Sample VF Page to be launched by List View Button

* @author : Shreya Mathur

* @Component Name and type : sampleVFPage/VF Page

* Created Date : Apr 15, 2023

**/

<apex:page standardController="Case" lightningStyleSheets="true" tabStyle="Case" recordSetVar="cases">

<apex:includeLightning />

<div id="compContainer" />

<script>

$Lightning.use("c:sampleAuraApp", function() {

$Lightning.createComponent("c:sampleAuraComponent",

{strURL:"{!$CurrentPage.URL}",strVFButtonName:"SampleButtonName""},

"compContainer",

function(cmp) {

console.log("c:VFPageApp loaded successfully in VF page");

}

);

});

</script>

</apex:page>

5. Put the VF Page on the App or launch it from the List View button

This VF Page can now be embedded in a Lightning app or launched from a List View.

    

)

}