2018.01.15

LightningコンポーネントをSkyVisualEditorで使用するには

みなさん、Lightningコンポーネント使っていますか?
弊社のSkyVisualEditorはVisualforceページを作る製品ですが、ひと工夫することによってLightningコンポーネントを配置することもできます。
今回はSkyVisualEditorでLightningコンポーネントを使用する方法をご紹介します。

前準備1 Lightningコンポーネントを呼び出すAppComponentの作成

まず、Lightning Out対応したLightningコンポーネントをSkyVisualEditorで使用するためのAppComponentを作成します。
<AppComponent name="MyLightningComponent">
    <Title>Lightning Out 配置用</Title>
    <Description>Lightning コンポーネントをSVEで配置</Description>
    <Layout>inline</Layout>
    <Height value="50" maxValue="100" minValue="50" resizable="false"/>
    <Width value="50" maxValue="100" minValue="50" resizable="false"/>
    <ComponentImage resourceName="LightningAppComponentIcon"/>
    <CanvasImage resourceName="LightningAppComponentIcon" stretch="Fill" />
    <PutablePlaces anyPlace="true">
    </PutablePlaces>
    <DirectComponent>
        <DirectComponentBody><![CDATA[
<div>
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("{!currentAppProperties['prop_App']}", function() {
          $Lightning.createComponent("{!currentAppProperties['prop_Component']}",
          {!currentAppProperties['prop_Params']},
          "lightning",
          function(cmp) {
          });
        });
    </script>
</div>
    ]]></DirectComponentBody>
    </DirectComponent>
        <Properties>
            <String name="prop_App" label="Application" maxLength="255" isVisible="true" isRequired="true"/>
            <String name="prop_Component" label="Component" maxLength="255" isVisible="true" isRequired="true"/>
            <String name="prop_Params" label="Paramater" maxLength="1000" isVisible="true" isRequired="true" defaultValue="{}"/>
        </Properties>
</AppComponent>
AppComponent
※作成済みのAppComponentをここからインストールできます

前準備2 LightningコンポーネントをLightning Out対応させる

Salesforceには、LightningコンポーネントをVisualforceページ上で使用するための「Lightning Out」という仕組みが用意されています。
これを利用してLightningコンポーネントをVisualforceページで使用できるようにします。

今回は例として、Salesforce標準で用意されているLightningコンポーネント「button」を呼び出し可能とするLightningアプリケーションを作成します。
1.開発者コンソールから File => New => Lightning Application を選択

2.Nameに任意の名前(今回はsampleLightningApp)を指定、Lightning Out Dependency Appにチェックを入れる

3.使用したいLightningコンポーネントをaura:dependencyのresourceとして指定する

これでLightning:buttonがVisualforceページで使用可能となりました。

実際にLightningコンポーネントを配置する

上記AppComponentをSky Visual Editor上で配置し、プロパティで
Application:「前準備2」で作成したLightning Out対応のLightningApplication。名前空間無しの場合はデフォルトの名前空間 "c" を指定
Component:LightningApp内でresourceとして指定したLightningコンポーネント
Paramater:Lightningコンポーネントに渡したいパラメータ
を指定指定します。

デプロイするとVisualforceページ内にLightningコンポーネントのボタンが作成されます。
指定したプロパティも正しく反映されています。

無論、標準コンポーネントだけでなく自作したLightningコンポーネントも使用できます。
例として、自作した「取引先を一覧表示するLightningコンポーネント」を表示してみます。

Componentに自作したLightningコンポーネント名、Paramaterにパラメータを指定しデプロイすることで

このようにVisualforceページ内に表示することができます。
SkyVisualEditorとLightningコンポーネントの組み合わせをぜひ試してみてください。

※全てのLightningコンポーネントがLightning Outで正しく動作するわけではありません。
標準のLightningコンポーネントであっても「Lightning Outはサポート対象外」と明記されているものもあります。
26 件
     
  • banner
  • banner

関連する記事