How to show Visualforce page inside a Lightning Web Component in Salesforce?

How to show Visualforce page inside a Lightning Web Component in Salesforce?

<iframe> tag can be used to show Visualforce page inside a Lightning Web Component in Salesforce.

Check the following sample implementation for reference.

Sample Code:

Visualforce:

<apex:page >
    
    Record Id from LWC is {!$CurrentPage.parameters.recId}
    
</apex:page>

Lightning Web Component:

HTML:

<template>

    <div class="slds-box slds-theme--default">
        <iframe src={siteURL} height="100px" width="150px"></iframe>
    </div>

</template>

JavaScript:

import { LightningElement,api } from 'lwc';  

export default class SampleRecordPage extends LightningElement {

    siteURL;
    @api recordId;

    connectedCallback() {
        
        this.siteURL = '/apex/Example?recId=' + this.recordId;

    }

}

JavaScript-meta.xml:

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

Output:

Leave a Reply