January 21, 2021

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

Sample Code:

Visualforce:

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

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:


No comments:

Post a Comment