【Salesforce】VisualforceからLightning Componentを呼び出す

【Salesforce】VisualforceからLightning Componentを呼び出す

少し前に書いたように、Lightningでの開発が増えてきています。

しかし、Lightning Componentを作っても、「私のドメイン」を設定しなければLightningアプリケーションに配置できないんですよね。

そんなわけで、VisualforceからLightningコンポーネントを呼び出すことになるわけです。

https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/components_visualforce.htm

標準のLightning Componentを配置する際の例です。

まず、配置したいコンポーネントを外部で使用可能にする必要があります。

開発者コンソールから、新規にLightning Applicationを作成します。

Lightningのボタンを使用する場合です。

<aura:application access="GLOBAL" extends="ltng:outApp"> 
  <aura:dependency resource="ui:button"/>
</aura:application>

作成した「lcvfTest.app」を、VisualforceのJavaScriptで呼び出します。

<apex:page>
  
  <apex:includeLightning />

<div id="lightning" ></div>


<script>

// ページ読み込み時の処理を設定する
document.addEventListener('DOMContentLoaded', function() {

   // Lightning Componentの呼び出しを行う
   loadLightningComponent();
});

// Lightning Componentの呼び出しを行う
function loadLightningComponent(){

    // Lightning Componentを使用する準備
    $Lightning.use("c:lcvfTest", function() {

        // 準備完了時のコールバック
        // Lightning Componentのui:buttonを作成する
        createLightningButton();
    });
}

// Lightning Componentのui:buttonを作成する
function createLightningButton(){

    var element;
    var options;
    
    // Lightning Componentを作成する対象の要素を取得する
    element = document.getElementById('lightning');
    
    // ボタンに設定するオプションを設定する
    options = {};
    options.label = '保存';

    // 準備完了時のコールバック
    // Lightning Componentを呼び出す
    $Lightning.createComponent(
        "ui:button",
        options,
        element.id,
        function(cmp) {
            
            // コンポーネント作成後のコールバック
            console.log('created');
        }
    );
}
</script>

</apex:page>

$Lightning.useでlcvfTest.app内で定義したコンポーネントを使用できるようにし、$Lightning.createComponentで実際にボタンを作成しています。

「apex:includeLightning」のタグがないとエラーになるので注意してください。

自分で作成したコンポーネントにaura:attributeが設定されていれば、optionsに値を渡すことが出来ます。

idのリストを渡してコンポーネント側で読み込むことも可能です。

リストを渡す場合は配列でOKです。