外部データを表示する

学習の目的

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

管理パッケージ用 Omnistudio の Flexcard の外部データソースを挙げる。
外部データを表示するデータソースを設定する。
データを表示するフライアウトアクションを作成する。
データを表示するテーブルを作成する。
Flexcard に画像を追加する。

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

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

外部データソースには次のようなものがあります。

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

気象 API を使用する方法は、練習で Web API を介してデータを取得するのに適しています。多くの業種にとって悪天候は重要な要素であるため、気象については豊富なユースケースがあります。たとえば、保険会社は天候による住宅への被害を懸念し、エネルギープロバイダーは悪天候によるサービスの停止を心配します。

さまざまな業種に影響を与える多様な種類の悪天候。

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

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

現在の気象データが表示されている Flexcard。

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

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

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

Weather Flexcard の要素。

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

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

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

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

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

子 Flexcard
Omniscript
カスタム Lightning Web コンポーネント (LWC)

フライアウトは、アクション種別にフライアウトを選択することで Action 要素を使用して作成されます。この例の Weather Flexcard のアクションをクリックすると、モーダルウィンドウのフライアウトにデータテーブルが表示されます。

この例では 2 つの Flexcard を使用します。フライアウト種別は、DataTable 要素を使用する子 Flexcard です。見てみましょう。

モーダルウィンドウで開かれているフライアウト。

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

フライアウトアクションの子 Flexcard を構築する要素。

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

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

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

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

データソースを設定する場合は、入力マップ変数を入力して、ツール間で送信する情報を決定します。

5 日分のデータを表示するように設定された [Input Map (入力マップ)] 変数。

[Key (キー)] 値を AccountId、[Value (値)] を {recordId} にすると、Integration Procedure によって取引先レコードの詳細が取得されます。予報データ (この場合は 5 日分のデータ) を取得するには、もう 1 つのキー/値ペアである Days (日数) と 5 を使用します。

気象データの配列

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

予報データのみ表示するようにトリミングされた JSON。

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

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

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

Datatable 要素をカスタマイズするためのオプション。

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

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

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

5 日分の [Date (日付)]、[Condition (状況)]、[Hi/Lo Temp °F (最高/最低気温 (華氏))] の列を表示したデータテーブル。

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

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

レコードを反復する

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

[設定] パネルの [Repeat Records (レコードを反復)]。

[Repeat Records (レコードを反復)] が選択されていない場合は、表の例のように配列全体を 1 つの Flexcard 内で利用できます。[Repeat Records (レコードを反復)] は [Setup (設定)] パネルにあります。

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

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

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

Omniscript Support

Flexcard が Omniscript とやり取りするときは、Omniscript Support 機能を有効にします。

たとえば、Omniscript Lightning Web コンポーネント要素を使用して、Flexcard を Omniscript 内に埋め込むことができます。また、Flexcard の Update Omniscript Action 要素を使用して、Omniscript を更新することも可能です。

Omniscript Support 機能は [Setup (設定)] パネルにあります。

Image 要素の使用方法

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

Image 要素。

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

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

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

予想時間

トピック

ヘルプをお探しですか?

Industry Solutions のリソース