目次
『Sheet コンポーネント』とは？
2021年3月28日にリリースされたRelease 22.0より、「Sheet コンポーネント」機能がリリースされ、これによりLightningコンポーネントとして「Sheet」が使えるようになりました。Lightningコンポーネントとして提供されるので、Lightningアプリケーションビルダーを使ってドラッグドロップで作成したブック/シートを自由にページ内に配置可能です。
また、Lightningのホームページによく利用するブック/シートを配置したり、レコード詳細ページ内でレコードに関連する情報のみを表示させて高機能な関連リストとして利用できます。配置したブック/シートは、もちろんその場でExcelライクにデータの編集、ソート、フィルタが可能です。
以前紹介した「埋め込みシート」の場合は、Visualforceページを作成する必要がありましたが、「Sheet コンポーネント」の場合、Visualforceページを作成する必要が無いので、設定のステップが少なくより使いやすくなりました！
本記事では、「Sheet コンポーネント」機能を用いて、レコード詳細ページ内に関連リストの代わりとしてブック/シートを配置する方法を以下の2パターンご紹介いたします。なお、配置されたブック/シートでは、表示しているレコードに関連するレコードを一覧表示させます。
パターン1： 取引先の詳細画面に関連する商談を一覧表示するシートを配置する
まず最初に、取引先の詳細画面に取引先に関連する商談を一覧表示できるようにSheetコンポーネントを配置する方法を例としてご紹介します。
設定方法
- Mashmatrix Sheetのブック/シートを作成する
- Lightning アプリケーションビルダーでコンポーネントを配置する
- 結果を確認する
１. Mashmatrix Sheetのブック/シートを作成する
ユーザが取引先レコードを開いたときに、関連する商談一覧をMashmatrix Sheetで表示するためのシートを作成します。
1-1.データを表示するブック/シートを作成する
関連リストに表示したいブック/シートを作成します。ここでは商談のシートを作成し必要な項目を列として表示させます。
1-2.シートに埋め込み対象となるオブジェクトへの参照IDを列として追加。
- 「列ヘッダメニュ＞列の追加」をクリックします。
- シートに埋め込み対象となるオブジェクト（今回は取引先）の参照IDを選択し、列に追加します。
1-3.追加したID列にフィルタを適用し、参照先として「関連するレコードID」を選ぶ
- 追加したID列の「列ヘッダメニュー＞フィルタ」をクリックします。
- フィルタの設定ダイアログが表示されるので、右端（下画像赤枠）の「参照値選択ボタン」をクリックします。
- 参照値の選択ダイアログが表示されるので、参照の種別から『関連するレコードID』を選び、選択をクリックします。（下画像赤枠）
- 「関連するレコードID」を選択します
※関連するレコードIDでフィルタをすることで、Sheetに表示されるレコードを、配置先の取引先レコードと関連のあるものだけに絞り込んで表示することが出来ます。
２. Lightning アプリケーションビルダーでコンポーネントを配置する
Salesforce Lightning Experience で表示される詳細画面ページをアプリケーションビルダーで変更します。詳細ページの中にステップ１で作成したシートをSheetコンポーネントとして配置します。
2-1. 表示させたいシートのブックID／シートIDをメモする。
- シートメニュー > 設定 をクリック
- シートの設定変更ダイアログが表示されるので、基本タブを開き、「ブックID /シートID」をメモする。
2-2. 次に取引先レコード詳細画面を開き、設定ボタンをクリックし、編集ページを開く
2-3 Lightning アプリケーションビルダーが表示されるので、画面左側にあるコンポーネント一覧から「カスタム・管理」セクションを開き、「Mashmatrix Sheet」コンポーネントを詳細ページ内にドラッグ＆ドロップで配置する。（下画像を参照）
2-4 画面右側に表示されている「Book ID」「Sheet ID」の部分に、2-1でコピーしたブックID/シートIDを入力する。また、「Title」にはシートの名前、「Height」には配置するシートの高さを入力する（任意）
（※1 プレビューが表示されるので、シートの高さを確認しながら値を入れると便利です）
（※2 「Book ID」の入力は必須 ）
2-4. 確認後、保存ボタンをクリックする
３. 結果を確認する
任意の取引先レコードを開き、関連リストのセクションに作成した「商談シート」が表示されていることを確認します。
パターン2： 商談の詳細画面に関連する見積/見積品目を一覧表示する連動シートを配置する
次に、商談の詳細画面に商談に関連する見積およびその見積品目を一覧表示できるようにSheetコンポーネントを配置する方法をご紹介いたします。基本的な操作方法はパターン1と同じですが、Sheetコンポーネントで配置するものは単一のシートではなく連動シートを含むブックになります。
設定方法
- Mashmatrix Sheetの連動シートを作成する
- Lightning アプリケーションビルダーでコンポーネントを設定する
- 結果を確認する
１. Mashmatrix Sheetの連動シートを作成する
ユーザが商談レコードを開いたときに、関連する見積と見積品目を連動シートで表示するためのシートを作成します。
1-1.データを表示する連動シートを作成する
関連リストに表示したいブック/シートを作成します。ここでは見積およびその関連リストである見積品目を連動表示する連動シートを作成し、必要な項目を列として表示させます。
（※連動シートの作成方法はこちらの動画をご覧ください。）
1-2.シートに埋め込み対象となるオブジェクトへの参照IDを列として追加。
- 「見積」シート内の列ヘッダメニューから「列の追加」をクリックします。
- 連動シートに埋め込み対象となるオブジェクト（今回は商談）の参照IDを選択し、列に追加します。
1-3.追加したID列にフィルタを適用し、参照先として「関連するレコードID」を選ぶ
1. 追加したID列の「列ヘッダメニュー＞フィルタ」をクリックします。
2. フィルタの設定ダイアログが表示されるので、右端（下画像赤枠）の「参照値選択ボタン」をクリックします。
3. 参照値の選択ダイアログが表示されるので、参照の種別から『関連するレコードID』を選び、選択をクリックします。（下画像赤枠）
＊関連するレコードIDでフィルタをすることで、Sheetに表示されるレコードを、配置先の商談レコードと関連のあるものだけに絞り込んで表示することが出来ます。
２. Lightning アプリケーションビルダーでコンポーネントを配置する
Salesforce Lightning Experience で表示される詳細画面ページをアプリケーションビルダーで変更します。今回は詳細ページ内のタブの中にSheetコンポーネントを配置します。
2-1.ブックの設定画面から表示したいブックのブックIDをメモする
- 「ブックメニュー＞設定」をクリック。
- 表示された「ブックID」を確認し、メモしておきます。
2-2. 次に商談レコードの詳細画面を開き、設定ボタンをクリックし、編集ページを開く
2-3 Lightning アプリケーションビルダーが表示されるので、「Mashmatrix Sheet」コンポーネントを詳細ページ内にドラッグ＆ドロップで配置する。
- 商談レコードを開き、詳細画面を表示する。
- 設定＞編集ページをクリックし、Lightningアプリケーションビルダー を開く。
- 画面左側にあるコンポーネント一覧から「カスタム・管理」セクションを開き、「Mashmatrix Sheet」コンポーネントを見つけておく。
- Lightningアプリケーションビルダーのタブエリアをクリックし（下画像の緑の枠内）、右側に表示された「タブを追加」をクリックする。
- タブの表示ラベル＞カスタムを選択し、カスタムタブ表示ラベルは「Sheet」（任意）と入力し、完了をクリックする。
- 新しく「Sheet」タブが作成されたので、タブをクリックする。タブ内に「ここにコンポーネントを追加」エリアが表示されるので、「Mashmatrix Sheet」コンポーネントをドラッグ＆ドロップして配置する。
- 配置後、画面右側に表示されている「Title」「Book ID」（必須）「Sheet ID」「Height」と表示されるので…
・「Book ID」の部分に、2-1でコピーしたブックIDを入力する。（Sheet IDは入力しなくてOK）
・「Title」にはシートの名前（任意）
・「Height」には配置するシートの高さを入力する（任意）
（縦に並べた連動シートを表示する場合、高さは600ピクセル以上を推奨しますが、プレビューを見ながら使いやすい高さに設定してください。）
- 確認後、保存をクリックする
３. 結果を確認する
任意の商談レコードを開き、「Sheet」タブ内に作成した「見積/見積品目」の連動シートが表示されていることを確認します。
※「Sheetコンポーネント」で配置されたシートは、シートタブ（下画像の赤枠）をダブルクリックすることで、シートの表示を最大化することができます。詳しくはこちらの動画をご覧ください。
「Sheet コンポーネント」機能を使うことで、Lightningのホームページやレコード詳細ページにブック/シートを簡単に配置することができます。設定も以前より簡単ですので、Lightning Exrerience環境をご利用中の方は、ぜひお試しください！
