Use CM KanbanBoard at Salesforce Classic

This document will explain how to use CM KanbanBoard for Salesforce at Salesforce Classic. By using CM KanbanBoard for Salesforce via Visualforce page, you can use Kanban created by CM KanbanBoard for Salesforce as Salesforce tab and/or create custom component that can be displayed in the home tab of each application.

Activate Developer Console

Click [Account]>[Developer Console].

Developer Console will start.

Create new Lightning App

Open Menu and Click [File] > [New] > [Lightning Application].

Dialogue will appear. Input necessary information in [Name] and [Description] and click [Submit] button.

Lightning Application is generated.

Describe as follows:

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

Save by “Ctrl+S” or so.

Create Visualforce page

Next, we will create Visualforce page. Open Developer Console and click [File] > [New] > [Visualforce Page].

Dialogue will appear. Input necessary information and click [OK] button.

Visualforce page is generated.

Input following:

<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:Your Lightning Application Name(ex.KanbanBoard_Opportunity)", function() {
              $Lightning.createComponent("cmkanban:kanbanBoardApp",
              {
                    object: "Opportunity",
                    columnField: "StageName",
                    cardTitleField: "Name",
                    cardField1: "Amount",
                    cardField2: "Owner.Name",
                    cardField3: "Account.Name",
                    query1: "All",
                    query2: "My Opportunities Closing Next Month : CloseDate = NEXT_MONTH : Amount DESC",
                    query3: "My Opportunities : : Amount DESC : mine",
                    showMaximizeButton: false,
                    startMaximized: true
              },
              "kanbanBoardDemoContainer",
              function(cmp) {
              });
        });
    </script>
</apex:page>

Save with “Ctrl+S” and you are done!

Reference: Add to Salesfore tab

Click [Setup] and input “tab” in the quick find/search. Then, click [Tabs] under [App Setup] > [Create]

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

Click [New] button at [Visualforce Tabs].

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

Select Visualforce Page created at Picklist [Visualforce page], input other necessary information, then click [Next] button.

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

This will take you to [Step2. Add to Profiles] screen. Select user profile that enable page tab to be created and click [Next] button.

Now, we are at [Step 3. Add to Custom Apps]. Select application which you want to add custom tab to be created and click [Save].

That’s all! Open newly added application and confirm the tab.