以前のブログ記事で、Salesforce Classic環境で「シートを詳細ページに追加して高機能関連リストを実現する方法」（動画はこちら）をご紹介させていただきましたが、Lightning Experience（LEX）の環境でも詳細ページに関連リストを埋め込むことが可能です。
今回はLightning Experience環境で、詳細ページに「連動シート」を埋め込む方法をご紹介します。「連動シート」を埋め込むことで、親オブジェクトの詳細を見ながら一画面で子や孫のオブジェクトのデータを一覧で把握できます。また、画面遷移をする必要がないのでスムーズにデータメンテナンスが可能に。もちろん、通常のSheetと同じくその場でExcelライクにデータの編集、ソート、フィルタが出来ますので、通常の関連リストよりも高機能な関連リストが実現できます。
※リリース22.0より「Sheetコンポーネント」が利用できるようになりました。本記事に記載されている方法でもレコード詳細画面へのシートの埋め込み表示は可能ですが、「Sheetコンポーネント」を使うほうがより簡単かつ強力ですので、まずは以下のリンクをご参照ください。
「Sheet コンポーネント」でレコードページから関連レコードを一括編集しよう
目次
操作手順
“Mashmatrix Sheet” の連動シートを、SalesforceのLightning Experienceの詳細ページに埋め込む手順は次のようになります。
1. Mashmatrix Sheetで連動シートを作成する
2. Visualforceページを作成する
3. Visualforceページのセキュリティを設定する
4. アプリケーションビルダーでページを配置する
5. 結果を確認する
※今回の例では商談の詳細画面に「見積/見積品目」の連動シートを埋め込むため、あらかじめ見積が有効化されていることが前提となっています。同様の手順は、見積に限らず適用可能です。
1.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をメモする
1. まず表示したいブックIDを調べます。
2. 「シートタブ＞設定＞シートの設定変更」の手順でクリック。
3. 表示された「ブックID」を確認し、メモしておきます。
2-2.Visualforceページを新規作成し、コードをコピーする
1. 「設定＞カスタムコード＞Visualforceページ」をクリック
2. 「新規」をクリックし、次画面の情報項目の「表示ラベル」と「名前」を入力します。今回は、表示ラベルに「見積/見積品目」、名前に「quotes and items」と入力します。（任意）
3. 「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを入れます。
次にユーザガイドを開き、Visualforceページにシートを埋め込むためのコードをコピーします。
1. 「グローバルメニュー＞ヘルプ/ユーザーガイド」からユーザガイドを開きます。
2. ユーザガイドの「カスタマイズ ＞ シートの埋め込み」ページを開きます
3. 「シートの埋め込み」ページ内に記載されているコードをコピーします。
2-3.Visualforceページ作成画面にコードをペーストする
1. Visualforceページ作成画面を開きます。
2. コピーしたコードを「Visualforce Markup」にペーストします。（下図参照）
2-4.ブックIDを埋め込みコードに入力する
1. 下図1 赤線部分「Account」を、下図2赤線部分のように「Opportunity」に書き換えます。
2. 下図2「ここにブックIDを入力」の部分に、2-1でメモしたブックIDを入力します。
3. 青線部分のs1を消します。（s1と入っていた部分は空欄になります）
4. 保存します。
3. Visualforceページのセキュリティを設定する
前章で作成したVisualforceページにアクセス可能なプロファイルを設定します。
3-1.Visualforceページからセキュリティをクリックする。
1. 「設定 >カスタムコード> Visualforceページ」をクリックします。
2. 前章で作成した「見積/見積品目」を見つけます。
3. 「見積/見積品目」の左側に表示される「セキュリティ」をクリックします。
3-2 割り当てたいプロファイルをリストに追加する
1. 左のリストから割り当てるプロファイルをクリックして選択します。
2. 追加「>」ボタンをクリックし、右のリストに追加します。
3-3 保存する
「保存」をクリックします。
4.アプリケーションビルダーでページを配置する
Salesforce Lightning Experience で表示される詳細画面ページをアプリケーションビルダーで変更し、2章で作成したVisualforceページを割り当てます。今回はタブの中に追加する手順を紹介します。
4-1.商談ページを変更する
1. 商談レコードを開き、詳細画面を表示します。
2. 設定＞編集ページをクリックし、Lightningアプリケーションビルダー を開きます。
3. Lightningアプリケーションビルダーのタブエリアをクリックし（図1の緑の枠内）、右側に表示された「タブを追加」をクリックします。
4. タブの表示ラベル＞カスタムを選択し、カスタムタブ表示ラベルは「見積」（任意）と入力します。
5. 完了をクリックします。
4-2.商談ページに「Visualforceページ」を配置する。
1. 商談ページ内「見積」タブをクリックします。
2. 左側に表示されている「Visualforce」を見積タブ内にドラッグ&ドロップし配置します。
3. 画面右側に表示されるvisualforceページ名から、2,で作った「見積/見積品目」を選択します。
4. 高さ（ピクセル単位）を600に変更する。（高さは600以上を推奨しますが、プレビューを見ながら使いやすい高さに設定してください。）
5. 保存します。
５.結果を確認する
任意の商談レコードを開き、関連リストのセクションに作成した「見積/見積品目」の連動シートが表示されていることを確認します。
まとめ
以上の手順となります。いかがでしたでしょうか？
ステップは少し多く感じるかもしれませんが、手順に慣れてしまえば、簡単に関連リストの代わりに連動シート埋め込む事が可能です！もちろん埋め込んだ連動シートから、データの一括編集やフィルタ、ソートなど「Sheet」の機能はそのままお使いいただけます。ぜひご活用下さい。
