サービス
  webflow ロゴFaceMFA ロゴ

Blog

事例・ブログ
2024-10-28
Salesforce

【Salesforce】画面フローのデータテーブルで添付ファイルを表示、アップロードする方法

1. この記事の対象者

Salesforceを触り始めたばかりの初学者の方を対象に記事を作成しています。

2. この記事で学べること

  • データテーブルの基本的な使い方
  • データテーブル内のレコードにレコードへのリンクを作る方法
  • フローで添付ファイルのリストを取得する方法

3. この記事内で作成するもの

SalesforceのFlow Builderを使用して、商談に紐づいている添付ファイルのリストを表示させる(リンク含む)画面フローを作成します。

4. コンポーネント:DataTableとは?

SalesforceのFlow Builder 画面フローの画面要素で使用することができるコンポーネントです。Salesforceを使用している方であれば毎日見るであろうレコードのリストのアレです。そのリストに任意のレコードを表示させることができます。

▫️Datatable例

フロー画面入力コンポーネント: データテーブルDevelopers - Component Reference - Datatable

5. 添付ファイルに関連したオブジェクト

- 添付ファイルを取得するための2つのオブジェクト

私は以下の2つのオブジェクトを使用して添付ファイルを表示させました。(他にも方法があるかもしれません・・・!)

▫️コンテンツドキュメントリンク(使用)

LinkedEntityIdには商談や取引先責任者のレコードIDなどが格納されている。また、添付ファイルを表示させるのに欠かせないContentDocumentId項目も持つ。

Salesforce Developers - ContentDocumentLink

▫️コンテンツバージョン(使用)

コンテンツドキュメントの子オブジェクト。ContentDocumentId項目を持っており、上記コンテンツドキュメントリンクで取得したContentDocumentIdを元に添付ファイルを取得可能。アップロードしたファイルを新しいものに差し替えた場合はバージョン情報が格納される。

Salesforce Developers - ContentVersion

▫️コンテンツドキュメント(使用せず)

コンテンツバージョンの親オブジェクト。Salesforce CRM Content のライブラリにアップロードされたドキュメントまたは Salesforce Files を格納。バージョン情報はコンテンツバージョンにお任せ。今回は諸事情により使用していません。(後述)

Salesforce Developers - ContentDocument

▫️参考:ER図

6. 早速作っていく

① 画面フローの作成と画面要素の設置

画面右上歯車マークを押し、左側のクイック検索に「フロー」と入力し、プロセスの自動化の下にある「フロー」を選択。画面右上にある「新規フロー」をクリックし、「最初から開始」を選択後、「次へ」。種別の選択画面で「画面フロー」を選択し、「作成」を押下。

②変数「recordId」を作成

画面フローが起動された商談のレコードIDを取得するために、変数「recordId」を作成します。詳細は以下のドキュメントを参照してください。

Salesforce ヘルプ - ドキュメント - recordId

③取得に必要な要素を設置

- オブジェクト:コンテンツドキュメントリンクからContentDocumentIdを取得する

上記のオブジェクトからContentDocumentIdを取得するための「レコードを取得」要素を作成します。ここで取得したContentDocumentIdを使用して、さらに後述のオブジェクト:コンテンツバージョンから情報を取得します。関連する商談などのIDはコンテンツドキュメントリンクの項目「LinkedEntityId」に格納されているため、先ほど作成した変数recordIdを使用して取得できます。また、複数の添付ファイルがあることを想定して、「保存するレコード数」は「すべてのレコード」にしておきます。もし、添付した日付で表示を並び替えたい場合は、「並び替え順」の設定もここでしてしまいましょう。

- オブジェクト:コンテンツバージョンから添付ファイルを取得する

コンテンツオブジェクトリンクから取得したレコードをループさせてコンテンツバージョンから情報を取得、コレクション変数へ割り当てていきます。

コンテンツドキュメントリンクからレコードを取得する要素の下にループ要素を配置します。画面フローを配置した際の手順で、ループを選択します。「コレクション変数を選択」の部分で、コンテンツドキュメントリンクから情報を取得した要素を指定します。

次に2つ目のレコード取得要素を配置し、コンテンツバージョンから情報を取得します。レコードの絞り込み部分で、項目にContentDocumentIdを指定、値には先ほど設置したループ要素を選択、同じくContentDocumentIdを指定します。

最後に、コンテンツバージョンから情報を取得した要素の次に「割り当て」要素を追加していきますが、その前に割り当て先となるコレクション変数から作っていきます。

画面左上の「要素を選択」の左に配置されている四角いアイコンをクリックします。表示された画面内に「新規リソース」をクリックし、リソース種別から「変数」を選択します。わかりやすいAPI参照名を入力したら、データ型から「レコード」を選択し、オブジェクトには「コンテンツバージョン」を指定。「複数の値を許可(コレクション)」にチェックを入れます。

次に割り当て要素を配置し、取得したコンテンツバージョンレコードを作成したコレクション変数に割り当てていきます。演算子の初期設定が「次の文字列と一致する」となっているため、「追加」を選択します。値は先ほど取得したコンテンツバージョンレコードを指定(例:{!GetContentVersionRecord})します。

全体像としてはこんな感じになります。

- 画面要素を配置する

表示されている「終了」の一つ前にある「⚪︎」をクリックし、「要素を追加」の中から「画面」を選択します。

- データテーブルを配置する

下記のようにデータテーブルをドラッグ&ドロップ。

- データテーブルの設定項目の確認

▫️データソースの設定

ここではDatatableの中で使用するコレクション変数を指定します。例えば取引先責任者の情報を表示させたい場合は、「レコードを取得」コンポーネントで取得したコレクションをここに指定することができます。

★つまずきポイント:データコレクションのみ使用可能です。単一のデータには使用できません。

▫️行選択モード

データテーブルを作成すると列の左側にデータ選択用のチェックボックスが表示されます。その選択に関する設定欄になります。例えば複数のデータを選択し削除、というアクションが必要な場合は「複数」を選択します。チェックボックスが必要ない場合は「参照のみ」を選択すると非表示にすることができます。また、「最小選択」「最大選択」の部分は、チェックボックスにチェックを入れられる数を制御できる項目になります。

▫️列の設定

列に加えたい項目を設定します。列に表示するコレクション変数の項目名を選択できますが、任意の列名称に変更することも可能です。

▫️コンポーネントの表示を設定

グローバル変数を使用して条件を設定し、表示・非表示のコントロールを行うことができます。

▫️入力を検証

数式でエラーメッセージを表示するタイミングやエラーメッセージ内容のコントロールを行うことができます。

▫️詳細

「手動で変数を割り当て」を選択すると、チェックボックスにチェックを入れたレコードを指定の変数に格納することができます。

- データテーブルを設定してみる

▫️データソースの設定 - ソースコレクション

コンテンツバージョンレコードが格納されている変数をしています。もし検索バーも表示させたい場合は「検索バーを表示」欄にチェックが必要です。

▫️行の設定 - 行選択モード

今回は「複数」を選択しておきます。

▫️列の設定

ペンマークをクリックし、列のオプションに表示されているソース項目から表示させたい項目を選択します。今回は「Title」を選択し、カスタム列表示ラベルには「添付ファイル名」としておきます。

上記の設定で一旦はOKです!

- 「ファイルをアップロード」を追加する

データテーブルを追加した要領で「ファイルをアップロード」コンポーネントを追加します。今回はこの部分の詳細な説明は割愛します。配置したら左側の設定項目を以下のように入力し、完了を押下します。

  • API 参照名:任意の名称
  • ファイルのアップロードの表示ラベル:任意の名称
  • 関連レコード ID:{!recordId}
  • 複数のファイルを許可:{!$GlobalConstant.True}

- フローを保存し、有効化する

画面右上にあるボタンを「保存」→「有効化」の順にクリックします。お疲れ様でした!一旦ここで一区切り!

④商談に添付ファイルを表示させる

Lightning アプリケーションビルダーを使用して、添付ファイルを表示させるようページを編集していきます。適当な商談を開いたら右上の歯車マークを押下し、「編集ページ」をクリックします。

- タブを追加する

今回は表示を確認しやすくするために添付ファイル専用のタブを配置します。Lightning アプリケーションビルダーが開いたら、ページ中段にある、「活動 詳細 Chatter」と表示されている部分をクリックします。右側の画面から「タブを追加」をクリックし、「ドキュメント」を選択し「完了」を押します。タブが追加されたら、追加したタブをクリックし、左側の検索欄に「フロー」と入力し、下記画像のようにドラッグ&ドロップします。

先ほど保存し、有効化したフロー名を右側の「フロー」から選択します。また、ここは忘れやすい部分なのですが、「recordId」の項目に「レコードIDをこの変数に渡す」というチェックボックスがあるので、必ずONにします。以下の画像のようになっていればOKです!保存をクリックします。

- 追加したタブで画面フローを確認

商談を開くと先ほど追加した「ドキュメント」タブが追加されているのでクリックします。以下のようになっているでしょうか?

- 添付ファイルをアップロードする

「ファイルをアップロード」をクリックし、適当なファイルをアップロードしてみましょう。同時に10つまでのファイルをアップロードできます。試しに複数のファイルをアップロードしてみます。

- データテーブルを確認してみる

データテーブルを見ると何も反映されていません!そうなんです。アップロードしても画面フローが自動更新されないため、画面を更新する必要があります。更新したら以下のように表示されたでしょうか?

ここで、感の良い方は気づかれた方もいらっしゃるかもしれませんが、添付ファイル名がテキスト形式で表示されており、ハイパーリンク化がされていません。データテーブルにはハイパーリンクをつける機能が無いんです。ただ、オブジェクトにHYPERLINK関数を使用し数式項目を設定し、データテーブルに表示させることができます!(ただし、一工夫必要になります・・・後述)

7. レコードへのリンクを作成する

データテーブルへ表

具体的には、添付ファイルに関連するオブジェクトに数式項目を作成し、HYPERLINK関数を使用、ハイパーリンク付きの添付ファイル名をデータテーブルに表示させます。

① コンテンツドキュメントオブジェクトについて

当初、このフローを作成した際はコンテンツバージョンオブジェクトではなく、コンテンツドキュメントオブジェクトを使用していました。オブジェクトに数式項目を作成しようと検索をしてみたところ、検索に引っかかりませんでした。つまり、数式項目を作成することができず、HYPERLINK関数も使用することができません。

そのため、今回のようにカスタム項目を作成可能なコンテンツバージョンオブジェクトで作成を行いました。

②カスタム数式項目を作成する。(1回目)

- 添付ファイルのURLを確認する

ファイルを添付した商談レコードにある「メモ&添付ファイル」を確認します。(もしレコード上に無ければ追加しましょう)ファイル名を右クリックし、リンクのURLをコピーしてください。私の場合、以下のようなURLでした。

https://hoge.trailblaze.lightning.force.com/lightning/r/ContentDocument/069IR00000RiVrVYAV/view

調べてみると、069IR00000RiVrVYAVの部分は「ContentDocumentId」だったため、ここを動的に変更できるようにすればハイパーリンクが作成できそうですね。

- コンテンツドバージョンのカスタム数式項目でやりたいこと

HYPERLINK関数を使用して、以下の数式を作成していきます。

HYPERLINK(”/lightning/r/ContentDocument/”& ContentDocumentIdを指定 &”/view”, Title)

コンテンツバージョンオブジェクトのTitle項目には添付ファイル名が格納されているため、関数の末尾でTitleを指定しています。ContentDocumentIdさえ取得できれば・・・!

- 悲報:コンテンツバージョンのContentDocumentId項目は使用できない

Salesforce DevToolsで確認すると、コンテンツバージョンオブジェクトにもContentDocumentIdが存在するようです。

しかし、数式項目を作成する際に「項目を挿入」を選択すると、ContentDocumentIdが存在しません。そのため、手動でAPI参照名を記載してみましたが参照できず、数式のエラーとなってしまいました。ちなみにContentUrlは値がNullになっているので今回は同様に使用できません。

③カスタム項目「ContentDocumentId__c」を作成し、フローでIdを挿入する

ContentDocumentIdが参照できないならカスタム項目を作ればいい!ということで、カスタム項目を作成しIdを格納していきます。

- カスタム項目を作成

右上歯車 → 設定 → オブジェクトマネージャー → 検索フォームに「コンテンツバージョン」 → 「項目とリレーション」 → 「新規」の順で進みます。オブジェクト:コンテンツバージョンにカスタム項目を作成します。データ型はテキスト形式を指定し、項目の表示ラベルには任意の値を入力します。(私はContentDocumentIdとしました)

- フローを修正する

作成したカスタム項目にContentDocumentIdを格納するため修正を行います。

  • 追加した要素1   決定要素

DocumentContentIdを格納するカスタム項目に、すでにIdが存在する場合は「Idが挿入済み」に処理を流し、Idが存在しない場合は「Idが存在しない」に処理を流しカスタム項目にIdを挿れる処理を行います。

  • 追加した要素2   割り当て要素

上記画像内「コンテンツバージョンからレコードを取得」で取得したレコードに対し、ContentDocumentIdを割り当てています。私の場合、作成したカスタム項目「ContentDocumentId__c」に対して、同オブジェクト内の標準項目「ContentDocumentId」のIdを割り当ててます。

  • 追加した要素3   更新要素

追加した要素2をコンテンツバージョンオブジェクトへ反映させるために更新をしています。

  • 追加した要素4   取得要素

更新したコンテンツバージョンを取得します。追加が完了したらフローを保存します。画面上の「コンテンツバージョンからレコードを取得」の標準項目ContentDocumentIdを使用し取得します。

  • 修正した割り当て要素

現在の値を「追加した要素4」の取得要素へ修正します。

- レコード画面でデータテーブルを修正する

フロー内の画面要素を開き、データテーブルの設定を確認します。列の設定で「タイトル」となっている部分を、先ほど作成したカスタム数式項目を選択します。

▫️つまづきポイント列の設定で「タイトル」から数式項目に変更した際に、画面右下の完了を押してしまいがちです。(私だけ?)変更したら「列オプション」に表示されている「完了ボタン」を押してから画面右下の完了を押すようにしましょう。

全て終わったらフローを保存して有効化しましょう。

④カスタム数式項目を作成する。(2回目)

③でカスタム項目ContentDocumentId__cを作成したので、HYPERLINK関数を使用する数式項目が作成できるようになりました。

- カスタム数式項目を作成

項目の表示ラベルは「URL」とし(任意の分かりやすい名称でOK)、「数式の戻り値のデータ型」で「テキスト」を選択します。数式の入力画面で以下を入力します。

HYPERLINK("/lightning/r/ContentDocument/"&  先ほど作成したカスタム項目名  &"/view", Title)

私はカスタム項目参照API名を「ContentDocumentId__c」としているので以下のような記述になります。

HYPERLINK("/lightning/r/ContentDocument/"&  ContentDocumentId__c  &"/view", Title)

⑤商談レコードで確認してみる

無事リンクが挿入されています!クリックすると対象の添付ファイル詳細画面に移動します。

もし添付ファイル名と一緒に作成日なども入れる場合はデータテーブルの列から挿入したい項目を追加できます。

8. 最後に

以上でデータテーブルの作成とリンクの挿入の説明を終わります。

レコードなどを表示する時はデータテーブルを使用すると見た目もスッキリしたリストを作成することができます。チェックボックスにチェックを入れたレコードを削除する、といったことも出来ますので是非チャレンジしてみてください。

Contact

お問い合わせ
Salesforce、HubSpot、システム開発など
まずは何でもお気軽にご相談ください。