LWCをVisualforceに表示する方法

7368 ワード
Visualforce Salesforce LightningWebComponents LightningOut lwc Salesforce テキストリンク

1.目的

Lightning Web CoponentをVisualforceに表示して見よう！！！！

2.LightningOutを使おう！！！

Salesforceの公式サイトには開発者ガイドがあります。
そこにLightningOutの使い方を記述したので、
ご参照になると思います。

3.実装例

ソース構成図

force-app
 └─main
     └─default
          ├─aura
          │  └─LWCContainer
          ├─lwc
          │  └─lightningOutDemoComponent
          └─pages
              ├─LightningOutDemo.page
              └─LightningOutDemo.page-meta.xml
Aura:LWCContainer

LWCContainer.app
<aura:application access="GLOBAL" extends="ltng:outApp">
</aura:application>
LWCContainer.app-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <description>A Lightning Application Bundle</description>
</AuraDefinitionBundle>
LWCContainerController.js
({
    myAction : function(component, event, helper) {

    }
})
LWC:lightningOutDemoComponent

lightningOutDemoComponent.html
<template>
    <div class="slds-box">
        <p>ここはLightning Web Componentです。</p>
    </div>
</template>
lightningOutDemoComponent.js
import { LightningElement } from 'lwc';

export default class LightningOutDemoComponent extends LightningElement {}
lightningOutDemoComponent.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>
pages:LightningOutDemo

LightningOutDemo.page
<apex:page standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0">
    <!-- lightning Design System -->
    <apex:includeLightning />
    <div id="lwc-container"></div>
    <script>
        $Lightning.use("c:LWCContainer", function () {//AuraAppContainer
            $Lightning.createComponent("c:lightningOutDemoComponent",//LWCコンポネント
                {},//lwcコンポネントに渡すパラメータ
                "lwc-container",//divのid
                function (cmp) {//コールバック関数
                    console.log('Load Success:' + cmp);
                }
            );
        });
    </script>
</apex:page>
LightningOutDemo.page-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<ApexPage xmlns="http://soap.sforce.com/2006/04/metadata"> 
    <apiVersion>52.0</apiVersion>
    <label>LightningOutDemo</label>
</ApexPage>

4.Salesforce側動作確認

➀Salesforce側Visualforce タブを作成

➁タブを開く

➂Classicモードで確認