CM KanbanBoard Sampleについて

CM KanbanBoardのできることや、その設定とコードサンプルの提供のため、「CM KanbanBoard Sample」と名付けた非管理パッケージを作成しました。

本パッケージを任意のセールスフォース組織にインストールすることで、カンバンでできることの大半をお客様の本番組織やサンドボックス組織で体感できる他、コンポーネントの設定やソースコードを確認することができます。

インストール及び設定方法

こちらをご覧ください ⇨ CM KanbanBoard Sampleの利用手順

CM KanbanBoard Sampleの概要

CM KanbanBoard SampleはCM KanbanBoardのサンプル集です。対象となるオブジェクトはToDoと商談のみですが、Lightning ExperienceとSalesforce Classicの各ページへの配置パターンを大体網羅しています。

タブ全体にカンバン表示しているものや、レコードページ内に絞り込んだ情報をカンバン表示するものなど、CM KanbanBoard の活用方法を想像しやすいサンプルを揃えているつもりです。是非お試し下さい。

Lightning Experience用のサンプルのご紹介

アプリケーション「CM KanbanBoard Sample Lightning」

Lightninng Experience用のサンプルはこの「CM KanbanBoard Sample Lightning」内で一通り確認できるようになっています。アプリケーションのタブ、下部のユーティリティバーからKanbanBoardのサンプルの動作を試すことができます。

CM KanbanBoard Sampleのインストール後にアプリケーションランチャーから「CM KanbanBoard Sample Lightning」を選択することで利用可能です。

アプリケーションページ/タブ

１タブ内に一つのKanbanBoardを配置している最もシンプルなCM KanbanBoardの利用方法です。

  • 「Kanban – ToDo（Lightninng）」タブ
  • 「Kanban – 商談（Lightninng）」タブ

「Kanban – ToDo（Lightninng）」及び「Kanban – 商談（Lightninng）」タブは、Lightningアプリケーションビルダーを用いて各KanbanBoard用のアプリケーションページを作成したものです。設定内容はタブを開いた状態で、「右上の歯車アイコン」⇒「編集ページ」をクリックすることで確認することができます。

レコードページ

CM KanbanBoardをレコードページ内に配置して利用する場合のサンプルです。取引先と商談のレコードページに配置しており、「取引先に関連する商談」と「商談に関連するToDo」をそれぞれのレコードページ内のKanbanBoardで参照することができます。

  • 取引先レコードページ内に配置「Kanban – この取引先の商談」
  • 商談レコードページ内に配置「Kanban – この商談のToDo」

レコードページ内でどのようにCM KanbanBoardが設定されているかは、アプリケーションページど同様に「右上の歯車アイコン」⇒「編集ページ」をクリックすることで確認することができます。

参照しているレコードに絞り込んだ表示を行う設定はCM KanbanBoardのプロパティ「Filter 1」や「Filter 2」に記載されており、例えば「Kanban – この取引先の商談」の場合だと下記のように記載しています。

この取引先の全ての商談 : AccountId = THIS_RECORD_ID : Amount DESC

この中の「THIS_RECORD_ID」がレコードIDを取得するための記載です。CM KanbanBoardの各プロパティの設定内容については、ナレッジベースの「CM KanbanBoardコンポーネントリファレンス」をご覧ください。

ユーティリティーバー

Lightning Experienceは、全体的にブラウザの画面更新なしで様々な操作ができるような設計になっていますが、このユーティリティバーもその代表的な機能です。このユーティリティバーには各種Lightningコンポーネントを配置することができ、CM KanbanBoardも配置することが可能です。

  • ユーティリティバーに配置しているKanbanBoard
    • Kanban – ToDo
    • Kanban – 商談

このユーティリティバーに配置しているKanbanBoardは、その内容は「3.2 アプリケーションページ/タブ 」に配置しているものと同じですが、こちらはCM KanbanBoardの設定を埋め込んだカスタムLightningコンポーネントを別途作成した上で配置しています。

CM KanbanBoardのナレッジベースの「Lightningコンポーネントで使用する（開発者向け）」に記載されている利用方法です。その手順についてはナレッジベースをご覧いただければと思いますが、こちらにはそれぞれのカスタムコンポーネントのソースコードを記載しておきます。

「Kanban – ToDo」で利用しているカスタムコンポーネント「CM_KanbanBoard_Sample_ToDo.cmp」

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
 <cmkanban:kanbanBoardApp object="Task"
 columnField="Status"
 cardTitleField="Subject"
 cardField1="ActivityDate"
 cardField2="Who.Name"
 cardField3="What.Name"
 query1="本日までの私のToDo : ActivityDate &lt;= TODAY : ActivityDate DESC : mine"
 query2="今週中の私のToDo : ActivityDate &lt;= THIS_WEEK : ActivityDate DESC : mine"
 query3="すべての私のToDo : : ActivityDate DESC: mine"
 query4="本日までのすべてのToDo : ActivityDate &lt;= TODAY : ActivityDate DESC : Everything"
 query5="今週中のすべてのToDo : ActivityDate &lt;= THIS_WEEK : ActivityDate DESC : Everything"
 query6="すべてのToDo : : ActivityDate DESC: Everything"
 showMaximizeButton="false"
 startMaximized="false"
 /> 
</aura:component>

「Kanban – 商談」で利用しているカスタムコンポーネント「CM_KanbanBoard_Sample_Opportunity.cmp」

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
 <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="false"
 /> 
</aura:component>

上記を作成することで、下図のように「設定（Lightninng）」⇒「プラットフォームツール」⇒「アプリケーション」⇒「アプリケーションマネージャー」からアプリケーション種別が「Lightninng」であるアプリケーションを編集し、ユーティリティバーを設定する際にカスタムコンポーネントを利用できるようになります（Lightningアプリケーションビルダーでも利用可能です）。

Salesforce Classic用のサンプルのご紹介

現在（2017.7.26時点）のCM KanbanBoardのお客様の大半はSalesforce Classicでご利用していただいています。「Lightning ExperienceのリストビューのKanban ViewのようなことをSalesforce Classiceでもやりたい」といったニーズにうまく当てはまっているようです。

Salesforce Classic上でのLightningコンポーネントの利用方法は、Lightning Expericenceで利用する方法と比べると多少複雑ですが、Lightning Experienceと同様にタブへの埋め込みやレコードページ内に配置したりと、概ね同じような使い方が可能です。

タブ/VisualForceタブ

アプリケーション内のタブごとに１つのKanbanBoardを配置する最も一般的な利用方法です。「CM KanbanBoard Sample」では２つのタブを用意しています。

  • 「Kanban – 商談（Classic）」タブ
  • 「Kanban – ToDo（Classic）」タブ

Salesforce ClassicのタブでCM KanbanBoardを利用する場合は、カンバンを表示するためのVisualforceページを作成した上でVisualforceタブを作成して利用します。

Visualforceページ上でCM KanbanBoardを利用する方法については、ナレッジベースの「Lightning Outを利用してVisualforceページから利用する（開発者向け、PC向き）」に記載されていますが、この「CM KanbanBoard Sample」では、Lightningアプリケーションについては一つ作成して共用しています。

Lightningアプリケーション　「CM_KanbanBoard_Sample_Lightning_Out.app」

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

Visualforceページ　「CM_KanbanBoard_Sample_Opportunity.vfp」
こちらは、「Kanban – 商談（Classic）」タブで利用している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:CM_KanbanBoard_Sample_Lightning_Out", 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>

Visualforceページ　「CM_KanbanBoard_Sample_ToDo.vfp」
続いて、「Kanban – ToDo（Classic）」タブで利用している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:CM_KanbanBoard_Sample_Lightning_Out", function() {
 $Lightning.createComponent("cmkanban:kanbanBoardApp",
 {
 object: "Task",
 columnField: "Status",
 cardTitleField: "Subject",
 cardField1: "ActivityDate",
 cardField2: "Who.Name",
 cardField3: "What.Name",
 query1: "本日までの私のToDo : ActivityDate <= TODAY : ActivityDate DESC : mine",
 query2: "今週中の私のToDo : ActivityDate <= THIS_WEEK : ActivityDate DESC : mine",
 query3: "すべての私のToDo : : ActivityDate DESC: mine",
 query4: "本日までのすべてのToDo : ActivityDate <= TODAY : ActivityDate DESC : Everything",
 query5: "今週中のすべてのToDo : ActivityDate <= THIS_WEEK : ActivityDate DESC : Everything",
 query6: "すべてのToDo : : ActivityDate DESC: Everything",
 showMaximizeButton: false,
 startMaximized: true
 },
 "kanbanBoardDemoContainer",
 function(cmp) {
 });
 });
 </script>
</apex:page>

Visualforceページでの記載はLightning Experinceでの利用と比較すると難易度はましますが、記載している内容は、Lightning アプリケーションビルダーを利用した場合と変わらず、機械的に記載できます。

レコードページ/ページレイアウト/Visualforceページ

Salesforce Classicでは、各オブジェクトのページレイアウトに配置するためのVisualforceページを用意することで、レコードページ内にCM KanbanBoardを配置を配置することが可能になります。ページレイアウトへの配置方法につきましては、「取引先のレコードページへのKanbanboard配置設定（classic）」をご参考下さい。

「CM KanbanBoard Sample」では、下記の２つのKanbanBoardを取引先および商談のページレイアウトに追加できる状態で提供しています。

  •  取引先ページに配置「Kanban – この取引先の商談」
  •  商談ページに配置「Kanban – この商談のToDo」

レコードページ内にKanbanBoardを配置することで、商談に関連するToDoの表示や、その他カスタムオブジェクトで作成した商談成立後のプロジェクトや各種業務よ進捗把握にKanbanBoardを利用することが可能になります。

上記２点のKanbanBoardを配置するためのVisualforceページのソースコードは下記の通りです。

Visualforceページ　「CM_KanbanBoard_Sample_Account_Page.vfp」
「Kanban – この取引先の商談」のためのVisualforceページです。

<apex:page sidebar="false" standardController="Account">
 <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:CM_KanbanBoard_Sample_Lightning_Out", function() {
 $Lightning.createComponent("cmkanban:kanbanBoardApp",
 {
 object: "Opportunity",
 columnField: "StageName",
 cardTitleField: "Name",
 cardField1: "Amount",
 cardField2: "Owner.Name",
 cardField3: "Account.Name",
 query1: "この取引先の全ての商談 : Account.Id = '{!account.id}' : Amount DESC",
 query2: "この取引先の私の商談 : Account.Id = '{!account.id}' : Amount DESC : mine",
 showMaximizeButton: false,
 startMaximized: true
 },
 "kanbanBoardDemoContainer",
 function(cmp) {
 });
 });
 </script>
</apex:page>

Visualforceページ　「CM_KanbanBoard_Sample_Opportunity_Page.vfp」
「Kanban – この商談のToDo」のためのVisualforceページです。

<apex:page sidebar="false" standardController="Opportunity">
 <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:CM_KanbanBoard_Sample_Lightning_Out", function() {
 $Lightning.createComponent("cmkanban:kanbanBoardApp",
 {
 object: "Task",
 columnField: "Status",
 cardTitleField: "Subject",
 cardField1: "ActivityDate",
 cardField2: "Who.Name",
 cardField3: "What.Name",
 query1: "この商談のToDo : WhatId = '{!opportunity.id}' : ActivityDate :",
 showNewButton: false,
 showMaximizeButton: false,
 startMaximized: true
 
 },
 "kanbanBoardDemoContainer",
 function(cmp) {
 });
 });
 </script>
</apex:page>

ホームページ/ホームページコンポーネント

CM KanbanBoardはホームページコンポーネントを作成することで、ホームページに配置することも可能です。「CM KanbanBoard Sample」ではToDo用のホームページコンポーネントを用意しており、設定することでお試しいただくことが可能です。設定方法については「ホームページコンポーネントの設定（Classic）」をご覧ください。

このホームページコンポーネントで利用しているVisualforceページはVisualforceタブで利用しているVisualforceページ 「CM_KanbanBoard_Sample_ToDo.vfp」と同じものを利用しています。

Salesforce1用のサンプルのご紹介

CM KanbanBoardはSalesforce1アプリからも使用可能です。iPad等でのタブレットではPCからの利用と同様にドラッグ＆ドロップによる更新も可能となっています（最大化モードのみ）。「CM KanbanBoard Sample」では、あらかじめ用意されているLightningページをSalesforce1のモバイルナビゲーションに追加するだけで、その動作を確認することが可能です。

設定方法については「3.4 Salesforce1のモバイルナビゲーションの設定 」をご参考下さい。

以上です。その他気になる点、実現可否のご相談などありましたら、お気軽にご相談下さい。

CM KanbanBoard Sampleの利用手順