関連リストの代わりに『Sheet』をSalesforceレコードページに埋め込もう！（Salesforce Classic版）

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

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

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

---

※リリース22.0より「Sheetコンポーネント」が利用できるようになりました。本記事に記載されている方法でもレコード詳細画面へのシートの埋め込み表示は可能ですが、「Sheetコンポーネント」を使うほうがより簡単かつ強力ですので、まずは以下のリンクをご参照ください。
「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を選択し、列に追加します。

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

1. 追加したID列の「列ヘッダメニュー＞フィルタ」をクリックします。
2. フィルタの設定ダイアログが表示されるので、右端（下画像赤枠）の「参照値選択ボタン」をクリックします。

3. 参照値の選択ダイアログが表示されるので、参照の種別から『関連するレコードID』を選び、選択をクリックします。（下画像赤枠）
   

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

2.Visualforceページを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. ページレイアウトの「保存」をクリックする。

５.結果を確認する

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

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

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

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