こんにちは、アンダーソンです。
今回は最近使うことがあったLightningOutの解説をしていきたいと思います。
LightningOutはLightningコンポーネントを外部で表示させる為に
使うモノみたいなんですが、
今回はVisualforce内で呼び出せるようにしていきたいと思います。
まずはLWCを準備
今回は表示用に簡単なLWCにしています。
渡ってきた値を表示させる。これだけです。
なのでLWC側ではtextという変数を@apiで公開にしておき、
外部から入力できるようにしてみました。
以下コードです。
<template>
<lightning-card title="テスト確認用">
<p>{text}</p>
</lightning-card>
</template>import { LightningElement ,api } from 'lwc';
export default class TestCmp extends LightningElement {
@api text;
}Auraアプリケーションを準備しよう
次に必要なのがAuraアプリケーションです。
このアプリケーションを通じてVFからLWCを表示させる
中継的な役目をしてくれます。
準備としては下記のように簡単でOKです。
<aura:application access="GLOBAL" extends="ltng:outApp" >
</aura:application> ltng:outAppの拡張を入れておくことでLightningOutとして呼び出すことが可能になりますので忘れないようにしましょう。
Visualforceを準備する
今回はコントローラなども無い簡単なVFを準備しますが、
もちろんコントローラや拡張コントローラのあるVFでもLightningOutは使うことができます。
LightningOutを使う際のVFの注意点は下記です。
- apex:includeLightningタグを入れる
- $Lightning.use、$Lightning.createComponentスクリプトを使う
この点を注意してVFを書いてみましょう。
<apex:page>
<apex:includeLightning />
<script>
$Lightning.use("c:LightningOutTest", function () {
$Lightning.createComponent("c:testCmp",
{text: '表示されましたよ'
},
"lightningerea1",function(cmp){});
});
</script>
<div id="lightningerea1"></div>
</apex:page>これでOKです。
c:LightningOutTestは先ほど作成したAuraアプリケーション、
それを使ってcreateComponent内で呼び出すのがc:testCmpというLWCです。
さらに2番目の引数で{}内で公開変数に対して値を入れています。
今回は直接文字列を入れていますが、コントローラからバインドされた値{!}も
入れることができます。
では結果をみてみましょう。
うまくできていますね。
すでにあるフォームなどをClassicで表示させたり、
VFしか使えないリストビューからのアクションボタンなどで
うまく使うことができると思います。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
