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

Lightning Outを利用してVisualforceページからCM KanbanBoard for Salesforceを利用する手順について解説します。VisualforceページでCM KanbanBoard for Salesforceを利用することで、SalesforceのタブとしてCM KanbanBoard for 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>

「Ctrl+S」等で保存すれば終了です。

参考:Salesforceタブに追加する

「クイック検索」に「タブ」と入力し、「作成」>「タブ」をクリックします。

「Visualforceタブ」セクションの「新規」ボタンをクリックします

選択リスト「Visualforceページ」で作成したVisualforceページを選択し、その他必要事項を入力した上で「次へ」ボタンをクリックします。

「ステップ2 プロファイルに追加」画面に遷移しますので、作成するページタブを利用可能にするユーザープロファイルを選択し、「次へ」ボタンをクリックします。

「ステップ 3. カスタムアプリケーションに追加」画面に遷移します。作成するカスタムタブを追加するアプリケーションを選択し、「保存」ボタンをクリックして下さい。

 

以上で終了です。追加したアプリケーションに移動し、追加されていることを確認して下さい。