GrapeCity inc.

Salesforceをもっと便利に、もっと快適に。

技術記事

技術記事ではGrapeCity for Salesforceに関する技術的なトピックスや話題を取り上げてご紹介いたします。

2017.08.17

Salesforceのキャンペーンメンバー一覧を使いやすくする

Salesforceの「キャンペーン」オブジェクトを使うと特定多数のリード(見込み客)や取引先責任者を「キャンペーンメンバー」としてまとめることができ、さまざまなマーケティング活動を行いやすくなります。この記事ではGrapeCity Spreadsheetの「どこでもView」という機能を使って、下図のようにキャンペーンページ上で、キャンペーンメンバーの状況管理などを簡単に行う画面を作成する方法を紹介します。

どこでもViewでキャンペーンページにメンバーを埋め込んだ状態
どこでもViewでキャンペーンページにメンバーを埋め込んだ状態

キャンペーンとキャンペーンメンバー

Salesforceのキャンペーンは、リードや取引先責任者を入れる「箱」で、箱の中にリードや取引先責任者を「キャンペーンメンバー」として登録します。キャンペーンオブジェクトとキャンペーンメンバーオブジェクト、リード、取引先責任者はそれぞれリレーションを持ち、標準画面では、キャンペーンに紐づけられたリードや取引先責任者を関連リストとして表示します。メンバーの登録や削除は「メンバーの管理」という別画面で行います。「メンバーの管理」画面は、キャンペーン画面から呼び出せます。さらに、メンバー個別の状況や備考欄を修正するには、詳細画面に入る必要がありますので、入力・編集正作業には少し手間がかかります。そこで、このメンバーの部分をSpreadsheetに置き換えて、視認性を高めたりページ遷移しなくてもデータ編集したりできるようにしてみましょう。

キャンペーンとキャンペーンメンバーのデータ構造とページレイアウト(標準機能)
キャンペーンとキャンペーンメンバーのデータ構造とページレイアウト(標準機能)
メンバーを追加する画面
メンバーを追加する画面
メンバーの状況や備考を編集する画面
メンバーの状況や備考を編集する画面

どこでもビューでキャンペーンメンバーのリストを置き換える

標準画面では関連リストとして表示されているキャンペーンメンバーをどこでもViewで置き換えると、どうなるでしょう?まず先に結果の画面を標準と比べて見てみましょう。

どこでもビューでキャンペーンメンバーのリストを置き換え

いかがでしょう?Excelのような表に変わっています。状況に応じた色分けやグループ化ができて見やすいです。データの編集も詳細画面に遷移せずに行えるので、作業しやすくなっています。では、早速この画面の作り方を紹介します。Spreadsheetでビューを作成し、それを表示するVisualforceページを作り、キャンペーンのページレイアウトの中にそのVisualforceページを埋め込むという流れになります。

1)Spreadsheetでキャンペーンメンバーのビューを作成する

GrapeCity Spreadsheetのお気に入りパネルからキャンペーンメンバーオブジェクトを選択し、使いたい項目(列)を選択します。今回は条件付き書式を使って備考欄に★が入っているセルに色を付けるようにします。★印が入ったメンバーに対して対応をお願いしたり、注意してほしいなどのメモ書きを目立たせることができます。
また、作成したビューは共有に設定しておく必要があります。共有の設定は列デザイナから行います。

キャンペーンメンバーオブジェクトを選択し、使いたい項目(列)を選択
1. キャンペーンメンバーオブジェクトを選択。2. デザイナで表示したい項目(列)を選択。
状況項目に条件付き書式を設定
3. 状況項目に条件付き書式を設定。この場合は、状況が「営業フォロー」の時に、セル背景色を水色にします。

2)ビューのIDを取得する

Spreadsheetのビューはそれぞれ固有のIDをもっています。IDはURIにパラメータとして表示されていますのでブラウザのアドレスバーの「viewed」の後ろにある文字列(18桁)をコピーします。このIDはこれから作成するVisualforceページの中で使いますので、メモ帳などに記述し保存してください。

ビューのIDを取得
アドレスバーのURLから「viewid」の後ろの文字列をコピーする

3)Visualforceページを作る

作成したビューを埋め込んだVisualforceページを作ります。[設定]のクイック検索ボックスにVisualforceと入力 → [新規]と進みます。表示ラベル、名前、説明などは下図を参考にして設定してください。Visualforce MarkUpタブには下記のコードを記述します。

Visualforceページを作る

記述するコード

<apex:page standardController="Campaign" showHeader="true" sidebar="fales">
  <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0">
    <gcss:Spreadsheet showTitleBar="fales" 
        object="CampaignMember" 
        viewid="a017F000001Bj8yQAC" 
        parentId="{!Campaign.id}" 
        parentField="CampaignId" 
        ShowToolbar="true" 
        AllowEdit="true" 
        AllowAdd="true" 
        AllowDelete="true" 
        AllowPaste="true" 
        AllowDragFill="true" 
        AllowDragAndDrop="true" 
        AllowUISort="true" 
        AllowUIFilter="true" 
        AllowResize="true" 
        AllowRefresh="true" 
        FontSize="12"/>
  </div>
</apex:page>

コードの意味は、CampaignページにSpreadsheetを表示するように宣言、表示するオブジェクト(この場合はCampainMember)を規定し、1で作成したビューのIDと親のオブジェクトを指定します。親オブジェクトを指定することで、紐づけられた子オブジェクトのレコードが表示されるようになります。各プロパティの意味と詳しい設定方法は下記のヘルプページをご覧ください。記述が終わったら保存します。

オンラインヘルプの「GCSSのビューの機能をユーザーに許可する」を見る

4)キャンペーンページのレイアウトにVisualforceページを埋め込む

作成した、Visualforceページを今度はキャンペーンページに埋め込みます。[設定]>[カスタマイズ]>[キャンペーン]>[ページレイアウト]を開きます。上部にあるページレイアウト一覧の左側からVisualforceページを選択します。右側に先ほど作成したVisualforceページが表示されているので、これをドラッグして、任意の位置に配置します。レンチ型アイコンをクリックして埋め込むページの高さなどを設定したら保存します。

これで完成です。キャンペーンページにそのキャンペーンに登録したメンバーの一覧が表示されるはずです。データ編集もできますので、メンバー状況やメンバー備考欄など日々状況が変わるデータの管理が行いやすくなります。なお、キャンペーンに埋め込んだビューはSpreadsheetの画面で修正できます。修正結果は随時どこでもViewに反映されます。

作成したVisualforceページが表示されるので、レイアウト上にドラッグ
作成したVisualforceページが表示されるので、レイアウト上にドラッグ
指定した位置にSpreadsheetで作成したViewが表示される
指定した位置にSpreadsheetで作成したViewが表示される

まとめ

どこでもViewは、Salesforceの画面に直接ビューを埋め込むことができます。今回は標準ページであるキャンペーンページをカスタマイズして表示させましたが、カスタム作成したVisualforceページにももちろん、追加することができます。Spreadsheetで作成したビューであれば何でも埋め込むことができるので、ご自身の業務で「ここに一覧表があったら便利だな」と思うものをどんどん埋め込んでみてください。

技術記事の一覧に戻る

無料で30日間フル機能をお試しいただけます

GrapeCity for Salesforceは、AppExchageサイトからトライアルできます。
無料で30日間フル機能をお試しいただけます。