Mashmatrix ブログ

「Sheet」を使って、子や孫の関連リストをSalesforce詳細ページに表示する方法

以前のブログ記事で、Salesforce Classic環境で「シートを詳細ページに追加して高機能関連リストを実現する方法」をご紹介させていただきましたが、Lightning Experience(LEX)の環境でもシートを埋め込むことが可能です。

今回はLightning Experience環境で、詳細ページに「連動シート」を埋め込む方法をご紹介します。「連動シート」を埋め込むことで、親オブジェクトの詳細を見ながら一画面で子や孫のオブジェクトのデータを一覧で把握できます。また、画面遷移をする必要がないのでスムーズにデータメンテナンスが可能に。もちろん、通常のSheetと同じくその場でExcelライクにデータの編集、ソート、フィルタが出来ますので、通常の関連リストよりも高機能な関連リストが実現できます。

詳細ページに「連動シート」を埋め込み、子や孫のデータも一覧で把握

null


操作手順

“Mashmatrix Sheet” の連動シートを、SalesforceのLightning Experienceの詳細ページに埋め込む手順は次のようになります。

  1. Mashmatrix Sheetで連動シートを作成する
  2. Visualforceページを作成する
  3. Visualforceページのセキュリティを設定する
  4. アプリケーションビルダーでページを配置する
  5. 結果を確認する

※今回の例では商談の詳細画面に「見積/見積品目」の連動シートを埋め込むため、あらかじめ見積が有効化されていることが前提となっています。同様の手順は、見積に限らず適用可能です。


1.Mashmatrix Sheetで連動シートを作成する

ユーザが商談レコードを開いたときに、関連する見積と見積品目を連動シートで表示するためのシートを作成します。

1-1.データを表示する連動シートを作成する

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

連動シートの作成方法はこちらをご覧ください。

見積/見積品目の連動シート

null


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

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

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

null


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

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

*関連するレコードIDでフィルタをすることで、Sheetに表示されるレコードを、埋め込み先の商談レコードと関連のあるものだけにすることが出来ます。

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

null


2.Visualforceページを作成する

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

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

まず表示したいブックIDを調べます。

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

ブックIDを確認

null


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

  1. 「設定>カスタムコード>Visualforceページ」をクリック
  2. 「新規」をクリックし、次画面の情報項目の「表示ラベル」と「名前」を入力します。今回は、表示ラベルに「見積/見積品目」、名前に「quotes and items」と入力します。(任意)
  3. 「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを入れます。

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

null

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

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

グローバルメニュー(「Sheet」画面左上)

null

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

null


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

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

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

null


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

  1. 下図1 赤線部分「Account」を、下図2赤線部分のように「Opportunity」に書き換えます。
  2. 下図2「ここにブックIDを入力」の部分に、2-1でメモしたブックIDを入力します。
  3. 青線部分のs1を消します。(s1と入っていた部分は空欄になります)
  4. 保存します。

図1

null

図2

null


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

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

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

  1. 「設定 >カスタムコード> Visualforceページ」をクリックします。
  2. 前章で作成した「見積/見積品目」を見つけます。
  3. 「見積/見積品目」の左側に表示される「セキュリティ」をクリックします。

Visualforceページ設定画面

null


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

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

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

null

3-3 保存する

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


4.アプリケーションビルダーでページを配置する

Salesforce Lightning Experience で表示される詳細画面ページをアプリケーションビルダーで変更し、2章で作成したVisualforceページを割り当てます。今回はタブの中に追加する手順を紹介します。

4-1.商談ページを変更する

  1. 商談レコードを開き、詳細画面を表示します。
  2. 設定>編集ページをクリックし、Lightningアプリケーションビルダー を開きます。
  3. Lightningアプリケーションビルダーのタブエリアをクリックし(図1の緑の枠内)、右側に表示された「タブを追加」をクリックします。
  4. タブの表示ラベル>カスタムを選択し、カスタムタブ表示ラベルは「見積」(任意)と入力します。
  5. 完了をクリックします。

図1(4-3)

null

図2(4-4,4-5)

null


4-2.商談ページに「Visualforceページ」を配置する。

  1. 商談ページ内「見積」タブをクリックします。
  2. 左側に表示されている「Visualforce」を見積タブ内にドラッグ&ドロップし配置します。
  3. 画面右側に表示されるvisualforceページ名から、2,で作った「見積/見積品目」を選択します。
  4. 高さ(ピクセル単位)を600に変更する。(高さは600以上を推奨しますが、プレビューを見ながら使いやすい高さに設定してください。)
  5. 保存します。

Visualforceを見積タブ内にドラッグ&ドロップ

null

visualforceの選択と高さ設定

null


5.結果を確認する

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

null

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

ステップは少し多く感じるかもしれませんが、手順に慣れてしまえば、簡単に関連リストの代わりに連動シート埋め込む事が可能です!もちろん埋め込んだ連動シートから、データの一括編集やフィルタ、ソートなど「Sheet」の機能はそのままお使いいただけます。ぜひご活用下さい。

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