Lightning Outを利用してVisualforceページから利用する（開発者向け、PC向き）

Lightning Outを利用してVisualforceページからCM Kanbanboardを利用する手順について解説します。VisualforceページでCM Kanbanboardを利用することで、SalesforceのタブとしてCM Kanbanboardで作成したカンバンを利用したり、各アプリケーションのホームタブ内に配置可能なカスタムコンポーネントで利用できるようになります。

1 開発者コンソールの起動
2 新規Lightningアプリケーションを作成する
3 Visualforceページの作成
4 参考：Salesforceタブに追加する

開発者コンソールの起動

[アカウント名] ＞[開発者コンソール]をクリックします。

開発者コンソールが起動します。

新規Lightningアプリケーションを作成する

メニューから、[File] > [New] > [Lightning Application]をクリックします

ダイアログが表示されますので、NameとDescriptionに必要な内容を入力し[Submit]ボタンをクリックしてください

Lightningアプリケーションが生成されます。

下記のように記載して下さい。

<aura:application access="GLOBAL" extends="ltng:outApp">
 <aura:dependency resource="cmkanban:kanbanBoardApp"/>
</aura:application>

「Ctrl+S」等で保存して下さい。

Visualforceページの作成

続いて、Visualforceページを作成します。開発者コンソールから[File] > [New] > [Visualforce Page]をクリックしてください。

ダイアログが表示されますので、必要事項を記載して「OK」ボタンをクリックして下さい。

Visualforceページが生成されます。

下記の内容を入力して下さい。

<apex:page sidebar="false">
    <apex:includeScript value="/lightning/lightning.out.js" />
    <style type="text/css">
    @media (min-height: 601px) {
        #kanbanBoardDemoContainer{
            z-index:1;
            position:absolute;
            right:0;
            left:0;
            height:calc(100vh - 130px);
        }
    }
    </style>

    <div id="kanbanBoardDemoContainer" style="" />

    <script>
        $Lightning.use("c:KanbanBoardDemo", function() {
              $Lightning.createComponent("cmkanban:kanbanBoardApp",
              {
                    object: "Opportunity",
                    columnField: "StageName",
                    cardTitleField: "Name",
                    cardField1: "Amount",
                    cardField2: "Owner.Name",
                    cardField3: "Account.Name",
                    query1: "全ての商談",
                    query2: "来週クローズする商談 : CloseDate = NEXT_MONTH : Amount DESC",
                    query3: "私の商談 : : Amount DESC : mine",
                    showMaximizeButton: false,
                    startMaximized: true
              },
              "kanbanBoardDemoContainer",
              function(cmp) {
              });
        });
    </script>
</apex:page>