外部データを使用した FlexCard を作成する

学習の目的

この単元を完了すると、次のことができるようになります。

• FlexCard の潜在的な外部データソースを挙げる。
• 外部データを表示するデータソースを設定する。
• データを表示するフライアウトアクションを作成する。
• データを表示するテーブルを作成する。
• FlexCard に画像を追加する。

外部データを使用する理由は?

Salesforce 組織外からのデータはすべて外部データです。Salesforce にはないデータが必要な場合、外部データソースを使用します。FlexCard に外部データを表示することは、実装の際に発生する一般的なニーズです。外部データソースには次のようなものがあります。

• 従来のデータソース
• オンプレミスのデータソース
• API インテグレーション
• その他のサードパーティのデータとアプリケーション

気象 API を使用する方法は、練習で Web API を介してデータを取得するのに適しています。多くの業種にとって悪天候は重要な要素であるため、気象については豊富な使用事例があります。たとえば、天候による住宅への被害 (保険) や悪天候によるサービスの停止 (エネルギー) などです。

FlexCard に外部データを表示する

例を見てみましょう。この FlexCard には、請求先の郵便番号によって判断された取引先の所在地の現在の天気と予報が含まれています。 

現在の天気には、気象状況 (1)、市区郡と州 (2)、気温 (3) が含まれています。 

天気予報が見当たらないのは、非表示になっているからです。[Get 5-Day Forecast (5 日間の予報の取得)] ボタン (4) をクリックすると、予報を表示するアクションが起動します。 

以下は、この外観を作成するために、この FlexCard の要素がどのように配置されているかを示したものです。2 つの Block 要素が上下に配置され、上の Block には画像が、下の Block には気象データが表示されています。2 つの Block の下には、天気予報データを起動するボタン形式の Action 要素があります。

では、その Action 要素について詳しく説明しましょう。Field や Text などの要素を使用して FlexCard にデータを表示することは、もう十分に理解されていると思います。FlexCard のスペースを節約したい場合や、データが多くなりすぎるのを防ぐ場合には、モーダルウィンドウやポップオーバーでデータを表示するのが最適です。それにはどうすればよいでしょうか? このような場合は、フライアウトアクションを使用しましょう。

フライアウトでデータを表示する

フライアウトは、マウスをクリックするだけで追加データを表示できる優れた方法です。 

フライアウトには次のような情報を表示できます。

• 標準の FlexCard 項目には収まらない長いテキスト文字列からの情報
• 取引先のオープンケースのような子レコードからのデータや追加のアクション

フライアウトには次の 3 つの種別があります。 

• 子 FlexCard
• OmniScript
• カスタム Lightning Web コンポーネント (LWC)

フライアウトは、アクション種別にフライアウトを選択することで Action 要素を使用して作成されます。天気の例である FlexCard のアクション [Get 5-Day Forecast (5 日間の予報の取得)] をクリックすると、モーダルウィンドウのフライアウトにデータテーブルが表示されます。 

この例は、2 つの FlexCard を使用して作成されています。フライアウト種別は、Datatable 要素を使用する子 FlexCard です。見てみましょう。

このフライアウトの外観を作成するために使用した要素は次のとおりです。子 FlexCard には 2 つの Block 要素が横に並べて配置されています。Icon Block には Icon 要素が、5-day Forecast Block には予報データを表示する Datatable 要素があります。

このフライアウトを作成するには、次のように Action 要素を設定します。

• [Action Type (アクション種別)]: フライアウト
• [Flyout Type (フライアウト種別)]: 子カード
• [Flyout (フライアウト)]: フライアウトとして使用する有効化された子 FlexCard を選択する
• [Open Flyout In (フライアウトを開く場所)]: モーダル

数日分の外部データを取得する

予報データのある FlexCard では、Integration Procedure を独立したデータソースとして使用し、現在と予報の気象データを表示します。 

データソースを設定する場合は、入力マップ変数を入力して、ツール間で送信する情報を決定します。[Key (キー)] を「AccountId」、[Value (値)] を「{recordId}」にすると、Integration Procedure によって取引先レコードの詳細が取得されます。予報データ (この場合は 5 日分のデータ) を取得するには、もう 1 つのキー/値ペアである [Days (日数)] と [5] を使用します。

気象データの配列

取得したデータを FlexCard で表示すると、次の例のようにノードを確認できます。

“Forecast” ノード (1) には Date、Condition、HiLo Temp (華氏と摂氏) が含まれ、“Current” ノード (2) には Condition、CityState、Temp (華氏と摂氏) が含まれています。

Weather FlexCard では、Integration Procedure で現在と予報の両方のデータを抽出します。ベストプラクティスは、[Result JSON Path (結果の JSON パス)] を使用して JavaScript Object Notation (JSON) をトリミングし、現在のデータのみを表示することです。 

現在の気象データを表示するには、[Result JSON Path (結果の JSON パス)] を使用して、[“Current”] データのみを表示するように JSON をトリミングします。5 日間の予報データを表示するには、[Result JSON Path (結果の JSON パス)] を使用して、[“Forecast”] データのみを取得するように JSON を絞り込みます。トリミングされた JSON は JSON タブ (2) に表示されます。

テーブルにデータを表示する

Datatable 要素を使用すると、表形式の構造を作成して、データソースから取得したデータを表示できます。 

テーブルでは、以下の操作が可能です。

• 列を追加、削除、更新する。
• 項目の表示ラベルを変更する (1)。
• 列を並べ替え可能にする (2)。
• 項目を検索可能にする (3)。
• データ型を変更する (4)。
• 項目を編集可能にする (5)。
• 項目を表示または非表示にする (6)。

テーブルを編集して、テーブルの表示方法を設定します。 

前の画像の設定では、データテーブルはこのように表示されます。気象状況、最高気温、最低気温を含む、5 日間分の予報データが表示されています。

この方法では、多数のデータを集約して表形式で表示することができます。 

レコードを反復する

新しい FlexCard では、デフォルトで [Repeat Records (レコードを反復)] が有効になっています。[Repeat Records (レコードを反復)] を有効になっている場合は、配列のレコードごとに 1 つの FlexCard インスタンスが存在することになります。たとえば、FlexCard の取引先の有効なケースのリストを返すデータソースが挙げられます。各レコードでは、独自のコンテナ内の状態に追加されたすべての項目が表示されます。 

[Repeat Records (レコードを反復)] を無効にすると、前述の表の例のように配列全体を 1 つの FlexCard 内で利用できます。[Repeat Records (レコードを反復)] は [Setup (設定)] パネルにあります。

データテーブルではすでに複数のレコードがループされ、一覧表示されています。そのため、Datatable 要素では Repeat Records 機能を無効にする必要があります。無効にしないと、データソースのデータに応じて、表が複数回表示されます。5 日間の天気予報の例では、テーブルは 5 回表示されることになります。 

この他にも以下のような場合には、この機能を無効にする必要があります。

• 一度だけ表示する Chart 要素がある場合
• 一度だけ表示する子 FlexCard がある場合
• コンソールアプリケーションのヘッダーとして機能するカスタム Lightning Web コンポーネントがある場合

OmniScript Support

OmniScript Support 機能は、FlexCard と OmniScript で相互にやりとりする場合に有効にします。たとえば、OmniScript Lightning Web コンポーネント要素を使用して FlexCard を OmniScript 内に埋め込んだり、FlexCard の Update OmniScript Action 要素を使用して OmniScript を更新したりする場合です。OmniScript Support 機能は [設定] パネルにあります。

Image 要素の使用方法

天気カードに素敵な画像が使われていることにお気づきだと思います。アップロードされた画像は、後で使用できるように組織のライブラリに保存されます。また、画像の URL やデータソースの差し込み項目を入力することもできます。

画像を追加した後、[Properties (プロパティ)] パネルと [Style (スタイル)] パネルのキャンバスに合わせて画像のサイズを調整します。

素晴らしいですね。画像があると、FlexCard の見栄えがよくなります。 

次の単元では、FlexCard の優れた点を引き続き紹介しますので、FlexCard の状態と条件をすべて学習できます。それでは、続きはこの後で!