LWC 안에 VFpage 임배드

https://nnn-ong.tistory.com/245

VisualforcePage 로 dataTable 그리기

지난 포스팅세어 vfpage 를 만든것을 LWC 로 임배드 해보겠다 

생각보다 간단하고, 많이 쓰는 기능이다. 

 

LWC를 먼저 생성하고 <ifram> 태그를 써서 url 호출을 해주면된다. 

아래는 LWC 코드이다 

<template>

    <lightning-card title="vfpage 임배드" icon-name="standard:report" >

        <!-- content -->

        <div class="vfContainer">

            <iframe src={vfPageUrl} class="iframView"></iframe>

        </div>

    </lightning-card>

</template>

 

JS 공유 

import { LightningElement , track} from 'lwc';

export default class EmbedVfpage extends LightningElement {

    @track vfPageUrl;

    connectedCallback(){

        console.log('#embedVfpage');

        this.vfPageUrl = '/apex/vfpageTable';

    }

}

 

VisualforcePage url 호출을 위해선 + ' /apex/페이지명 ' 을 입력한다. 

vfpage url 을 호출할때 파라미터값을 넘기고 싶으면  /apex/페이지명/param1&param2&param3  이건식으로 보내면된다. 

아래는 파람을 보냈을때 url 호출 예시이다

this.vfPageUrl = `/apex/vfpageName?recordId=${this.recordId}&selectedDate=${this.formatDate}&checkedShpId=${this.checkedShpId}`;

 

 

위와같이 적용을하면 아래와같이 LWC 안에서 VFPage가 호출된 것을 확인할 수 있다 

 

 

LWC로 만든데이터테이블과 vfpage 로 만든 데이터를 비교해보면 아래와 같다

2개 모두 테이블이 잘 노출되는 것을 확인할 수 있다.