Integrating Lightning Web Components (LWC) with Visualforce Pages in Salesforce
Integration :
In Salesforce, integrating Lightning Web Components (LWC) with Visualforce pages can enhance the user experience by leveraging the strengths of both frameworks. One common requirement is to pass data, such as Pass current record ID from LWC to Visualforce page. This allows for seamless navigation and data handling across different parts of the Salesforce application. In this guide, we will walk through the process of creating an LWC that navigates to a Visualforce page, passing the current record ID as a URL parameter. Additionally, we will demonstrate how to retrieve and use this record ID within the Visualforce page. This integration ensures that the Visualforce page can perform relevant actions or display data based on the passed record ID, thus creating a cohesive and efficient user workflow.
Source Code:
LWC -Html:
<template>
<div class=”iframe-container”>
<iframe id=”vfFrame” src={vfHost} class=”iframe” onload={handleIframeLoad}></iframe>
</div>
</template>
LWC –Js:
import { LightningElement, api } from ‘lwc’;
export default class MapContainer extends LightningElement {
@api recordId;
origin=DomainCreator.getVisualforceHostname(null);
vfHost= window.location.origin+’your_vfName’;
handleIframeLoad() {
console.log(‘iframe loaded’);
this.sendData();
}
sendData() {
this.template.querySelector(‘iframe’).contentWindow.postMessage(this.recordId,this.origin);
}
}
VisualForce Page:
<apex:page showHeader=”false” standardStylesheets=”false”>
window.addEventListener(‘message’, function(event) {
console.log(‘Received Record : ‘+ event.data);//record id from lwc
});
</apex:page>
See how FieldAx can transform your Field Operations.
Try it today! Book Demo
You are one click away from your customized FieldAx Demo!
Conclusion:
By following the steps outlined in this guide, you can successfully Pass current record ID from LWC to Visualforce page in Salesforce. This integration leverages the NavigationMix in in Lightning Web Components to navigate to a Visualforce page, passing necessary parameters through the URL. The Visualforce page, with its Apex controller, retrieves these parameters to perform relevant actions or display data. This approach not only bridges the gap between the modern Lightning Web Component framework and the traditional Visualforce pages but also enhances the functionality and user experience of your Salesforce application.
Author Bio
