Mashmatrix ブログ

Sheetをレコード詳細画面に埋め込んで高機能関連リストを実現する

Salesforceの標準画面には「関連リスト」と呼ばれる一覧が下部に表示されています。例えば「取引先」の関連リストには商談や取引先責任者の一覧、「商談」の関連リストには、見積情報や見積品目の一覧が表示されています。

この「関連リスト」の代わりとして、”Mashmatrix Sheet”を埋め込むことができるのはご存知でしたか?

Salesforceでは、Visualforceページを使って任意の画面を作成し、レコードの詳細画面レイアウトに埋め込むことができますが、Mashmatrix Sheetでは作成したブック/シートをVisualforceページに簡単に表示する機能があります。この機能を利用し、レコードの詳細画面にMashmatrix Sheetで作ったブック/シートを表示させることで、「関連リスト」のように関連するレコードの一覧を表示できます。通常のSheetと同じく、その場でExcelライクにデータの編集、ソート、フィルタが可能ですので、標準の関連リストよりもより高機能な関連リストが実現できます。

標準の関連リスト

Mashmatrix Sheetを埋め込んだ高機能関連リスト

操作手順

“Mashmatrix Sheet”をSalesforceページの「関連リスト」に埋め込む手順は次のようになります。今回は「取引先の詳細画面に”Mashmatrix Sheet”で作ったシートを埋め込んで表示し、高機能な関連リストを実現する」という例に沿って手順を進めていきます。

  1. Mashmatrix Sheetのブック/シートを作成する
  2. Visualforceページを作成する
  3. Visualforceページのセキュリティを設定する
  4. ページレイアウトに割り当てる
  5. 結果を確認する

Sheetをレコード詳細画面に埋め込んで高機能関連リストを実現する」の操作手順を動画でも公開しております。ご参照ください。



1.Mashmatrix Sheetのブック/シートを作成する

ユーザが取引先レコードを開いたときに、関連する商談一覧をMashmatrix Sheetで表示するためのシートを作成します。

1-1.データを表示するブック/シートを作成する

関連リストに表示したいブック/シートを作成します。ここでは商談のシートを作成し必要な項目を列として表示させます。

商談シート


1-2.シートに埋め込み対象となるオブジェクトへの参照IDを列として追加。

  1. 「列ヘッダメニュ>列の追加」をクリックします。
  2. シートに埋め込み対象となるオブジェクト(今回は取引先)の参照IDを選択し、列に追加します。

取引先(埋め込み対象となるオブジェクト)IDを選択

取引先(埋め込み対象となるオブジェクト)IDの列を追加


1-3.追加したID列にフィルタを適用し、IDの比較参考先として「関連するレコードID」を選ぶ

  1. 追加したID列の「列ヘッダメニュー>フィルタ」をクリックします。
  2. IDの比較参考先として「関連するレコードID」を選択、適用をクリックします。

*関連するレコードIDでフィルタをすることで、Sheetに表示されるレコードを、取引先(オブジェクト)と関連のあるものだけにすることが出来ます。

関連するレコードIDでフィルタリング



2.Visualforceページを作成する

Mashmatrix Sheetのシートを表示するための、Visualforceページを作成します。

2-1.シートの設定画面からブックIDおよびシートIDをメモする

まず表示したいブック/シートのIDを調べます。

  1. 「シートタブ>設定>シートの設定変更」の手順でクリック。
  2. 表示された「ブックID/シートID」を確認し、メモしておきます。

ブックIDとシートIDを確認


2-2.Visualforceページを新規作成し、コードをコピーする

  1. 「設定>開発>Visualforceページ」をクリック
  2. 「新規」をクリックし、次画面の情報項目の「表示ラベル」と「名前」を入力します。今回は、表示ラベルに「商談」、名前に「Opportunities」と入力します。

「表示ラベル」と「名前」を入力

次にユーザガイドを開き、Visualforceページにシートを埋め込むためのコードをコピーします。

  1. 「グローバルメニュー>ヘルプ/ユーザーガイド」からユーザガイドを開きます。
  2. ユーザガイドの「カスタマイズ > シートの埋め込み」ページを開きます
  3. 「シートの埋め込み」ページ内に記載されているコードをコピーします。

ユーザガイド シートの埋め込み画面


2-3.Visualforceページ作成画面にコードをペーストする

  1. Visualforceページ作成画面を開きます。
  2. コピーしたコードを「Visualforce Markup」にペーストします。(下図参照)

Visualforceページ作成画面にコピーしたコードをペーストする


2-4.ブックIDおよびシートIDを埋め込みコードに入力する

  1. 下図「ここにブックIDを入力」の部分に、2-1でメモしたブックIDを入力します。
  2. 下図「ここにシートIDを入力」の部分に、2-1でメモしたシートIDを入力します。
  3. 保存します。

ブックIDとシートIDを入力する


3. Visualforceページのセキュリティを設定する

前章で作成したVisualforceページにアクセス可能なプロファイルを設定します。

3-1.Visualforceページからセキュリティをクリックする。

  1. 「設定 > 開発 > Visualforceページ」をクリックします。
  2.  前章で作成した「商談」を見つけます。
  3. 「商談」の左側に表示される「セキュリティ」をクリックします。

Visualforceページ設定画面


3-2 割り当てたいプロファイルをリストに追加する

  1. 左のリストから割り当てるプロファイルをクリックして選択します。
  2. 追加「>」ボタンをクリックし、右のリストに追加します。

プロファイルを追加し有効にする

3-3 保存する

「保存」をクリックします。


4.ページレイアウトに割り当てる

Salesforceで表示される詳細画面のレイアウトを変更し、2章で作成したVisualforceページを割り当てます。

4-1.取引先ページのレイアウトを変更する

  1. 「設定>オブジェクトマネージャー>取引先>ページレイアウト」をクリックします。
  2. 高機能関連リストを割り当てたいページレイアウトを選びクリックします。(例:Account Layout)
  3. 次画面で項目から「セクション」を高機能関連リストを表示させたい位置に、ドラック&ドロップします。
  4. セクションプロパティが表示されるので、「セクション名」を入力し、「レイアウト」は1-列を選択します。
  5. 「OK」をクリック。

セクションプロパティへの入力


4-2.「Visualforceページ」から「商談」をセクションに配置する。

  1. 「Visualforceページ」にある「商談」をドラックし、4-1で作成したセクション(商談シート)に配置します。


4-3.プロパティを開き、高さを変更する。

  1. 配置したVisualforceページの右上の工具アイコンをクリックする。
  2. Visualforceページのプロパティと表示されたら、高さ(ピクセル単位)を400に変更する。(高さは300〜600ピクセルを推奨します)
  3. 「OK」をクリックする。
  4. ページレイアウトの「保存」をクリックする。


5.結果を確認する

任意の取引先レコードを開き、関連リストのセクションに作成した「商談シート」が表示されていることを確認します。

以上の手順となります。いかがでしたでしょうか?

「Sheet」とSalesforceの「Visualforceページ」の両方の機能を使うことで、高機能な関連リストを実現することが出来ました。ステップは少し多く感じるかもしれませんが、手順に慣れてしまえば、簡単に関連リストの代わりに、Mashmatrix Sheetのシートやブックを埋め込む事が可能ですので、ぜひご活用下さい!

「Mashmatrix Sheet」を実際に触ってみる