FlexCard の主要な機能を確認する

学習の目的

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

• FlexCard の機能を説明する。
  
• FlexCard の主要な機能を挙げる。
  

FlexCard を理解する

OmniStudio FlexCard では、一目で確認できる形でコンテキスト情報が表示され、表示されたデータの関連タスクにアクセスできます。

以下は、ある保険会社の顧客である Sophia Fournier の FlexCard です。

住所など、Sophia の主なプロファイルデータが表示されています。居住地の現在の天候も表示されています。Sophia は上着を持っていったほうがいいかもしれませんね。 

プロファイルデータの下には、エージェントが Sophia との電話で非公式に得た情報に関する複数の属性 (タグ) があります。2 番目のタグのセット ([Watercraft (船舶)]、[Life (生命)]、[Umbrella (アンブレラ)]) は、Sophia が現在契約している保険を示しています。

FlexCard の下部には、Sophia の住所、取引先責任者の詳細、またはタグを更新するためのクリック可能なアクションが用意されています。

また、複数の FlexCard を組み合わせて、Interaction Console と呼ばれるコンソールに表示することもできます。

Interaction Console では顧客の情報を包括的に把握でき、FlexCard はこれらの 360 度ビューの重要なコンポーネントとなっています。コンソールに表示されている FlexCard は、FlexCard に基づいた Lightning Web コンポーネント (LWC) であり、コンソール自体は Salesforce Lightning コンソールです。

主要な機能

では、FlexCard とは何か、FlexCard で何ができるかを 2 分で説明するとします。あなたならどのように説明しますか? FlexCard には次のような主要な機能があります。

• FlexCard にはコンテキスト情報が一目でわかるようにまとめて表示される。
  
• FlexCard は顧客トランザクションの開始点と終了点である。
  
• FlexCard はあらゆるデバイスやチャネルで表示できる。
  
• FlexCard には複数のデータソースのデータを表示できる。
  
• FlexCard は Drag-and-Drop (ドラッグアンドドロップドロップ) 要素を使用して迅速に作成される。
  
• FlexCard には、レイアウトとスタイルをコントロールするための what-you-see-is-what-you-get (WYSIWYG) エディターが用意されている。
  
• FlexCard アクションはカードのコンテキストと関連性がある。
  
• FlexCard は他の FlexCard に埋め込むことができる。
  
• FlexCard は LWC OmniScript 内に埋め込むことができる。
  
• FlexCard には、フライアウトを使用してオンデマンドで詳細が表示される。
  
• FlexCard には、条件に基づいて表示される複数の状態があります。
  

素晴らしいですね。それでは、各機能を詳しく見ていきましょう。 

このモジュールの手順はデモのみを目的としています。OmniStudio は、Trailhead Playground 組織では有効化されません。

FlexCard にはコンテキスト情報が一目でわかるようにまとめて表示される

ほとんどの FlexCard では、情報とアクションが組み合わされて提供されます。Sophia Fournier を覚えていますか? 別の FlexCard を見てみましょう。これは彼女のボートの海上保険の詳細です。 

保険契約の詳細では、保険証券番号、年間保険料、期間、有効期限が一目で確認できます。アクションを使用すると、詳細の表示、保険料の支払い、補償内容の変更、保険金の請求、ペーパーレス請求の有効化を行うことができます。 

FlexCard は顧客トランザクションの開始点と終了点

Sophia のプロファイルの FlexCard をもう一度見てみましょう。

コールセンターのシナリオでは、コールセンターのエージェントは電話で顧客とやり取りし、顧客の情報を確認し、FlexCard からガイド付きのプロセスを起動します。

たとえば、Sophia が他の群に引っ越したため、住所変更が必要になったとします。エージェントは、FlexCard から [Update Address (住所の更新)] プロセスを起動します。プロセスが完了すると、FlexCard に新しい住所と気象情報が表示されます。

あらゆるデバイスやチャネルで FlexCard を表示できる

FlexCard は、コールセンターエージェント向けの Interaction Console に限らず、任意のデバイスやチャネル (モバイルデバイスなど)、消費者ポータルにリリースして表示できます。 

FlexCard Lightning Web コンポーネントは、Lightning アプリケーションビルダーから Lightning ページに、またはエクスペリエンスビルダーからコミュニティやポータルページにリリースします。また、FlexCard を Adobe Experience Manager などの外部のコンテンツ管理システムや、Heroku などのカスタム Web コンテナ内にリリースすることもできます。

複数のデータソースからデータを表示する

FlexCard には、Salesforce からの内部情報と Web サイトやサードパーティレガシーシステムからの外部情報を組み合わせて表示することができます。複数のソースから取得された情報であっても、FlexCard には一様に表示されます。たとえば、Sophia Fournier のプロファイルの FlexCard には、取引先の詳細からの内部データと気象に関する外部データが表示されています。 

Drag-and-Drop (ドラッグアンドドロップドロップ) 要素を使用して FlexCard を迅速に作成する

FlexCard Designer を使用すると迅速にカードを設定、プレビュー、デバッグできます。UI 要素をキャンバスにドラッグアンドドロップして位置とサイズを変更し、テキスト、ボタン、アイコン、画像、リンク、チャート、テーブル、さらには他の FlexCard の書式設定を行うことができます。 

要素のプロパティを設定するには、[Properties (プロパティ)] パネルを使用します。使用可能なプロパティは、要素種別によって異なります。一部の要素では、設定方法に応じて異なるプロパティが表示されます。 

WYSIWYG エディターを使用して、FlexCard のレイアウトとスタイルをコントロールする

FlexCard Designer には、WYSIWYG エディターが搭載されており、テンプレートを使用せずに FlexCard のレイアウトとスタイルをコントロールできます。

スタイルをグローバルに管理するには、カスタム CSS を使用するか、Designer で直接スタイルを変更することができます。各 FlexCard 要素のスタイルに関しては、次のことを行えます。 

• 高さと幅を設定する。
  
• 背景、境界線、テキストを追加する。
  
• パディング、余白、テキストの配置を設定する。
  

スタイリングの変更内容は、FlexCard キャンバス上ですぐに確認できます。要素にスタイルを設定する場合は、そのスタイルを保存して FlexCard 全体で再利用できるようにします。

FlexCard アクションはカードのコンテキストと関連性がある

FlexCard のアクションをクリックすると、通話の録音などのガイド付きプロセスを開始するワークフローが起動します。その他のアクション種別では、詳細情報が記載されたフライアウトウィンドウを表示する、別のレコードに移動する、別の FlexCard のイベントをリスンする、そのイベントが発生したときにカードを再度読み込む、ページやアプリケーション上の別のコンポーネントにイベントが発生したことを通知することができます。 

次の例では、[Update Case (ケースの更新)] アクションをクリックすると、OmniScript である [Update Case Details (ケースの詳細の更新)] ガイド付きインタラクションの 2 番目のタブが開きます。 

この例では、エージェントが Sophia Fournier のいずれかの Policy カードで [Enable Paperless Billing (ペーパーレス請求の有効化)] をクリックした後の、ペーパーレス請求にサインアップするためのガイド付きインタラクションを含むモーダルが表示されています。

他の FlexCard に FlexCard を埋め込む 

子 FlexCard 要素を使用して、他の FlexCard に FlexCard を埋め込むことができます。子 FlexCard は Action 要素から起動することもできます。

子 FlexCard を埋め込むと、1 つの FlexCard に複数のデータソースを表示できます。有効なものであれば、いくつでも子 FlexCard を埋め込むことができます。

この例では、子 Cases FlexCard は親 Cases FlexCard 内の要素です。子にはケースの詳細とアクションが表示されています。子がない場合、親は [Cases (ケース)] ドロップダウンメニューと [Create Case (ケースの作成)] アクションが設定された単なるコンテナとなります。

OmniScript 内に FlexCard を埋め込む

FlexCard Lightning Web コンポーネントは OmniScript 内に埋め込むことができます。つまり、FlexCard はガイド付きインタラクションの一環として表示されます。

ここでは、埋め込まれた FlexCard に複数の医療プランがインタラクションの一環として表示されており、ユーザーはそれらを比較していずれかを選択します。

フライアウトを使用してオンデマンドで詳細を表示する

フライアウトは、FlexCard のアクションをクリックしたときに表示される別の FlexCard です。フライアウトには次のものが表示されます。

• 親カードで表示すると煩雑になりすぎる追加情報やアクション。
  
• 親カードレベルで表示するほど重要ではない二次的な情報やアクション。
  

この例では、[Get 5-Day Forecast (5 日間の予報の取得)] をクリックすると、この Weather FlexCard の追加情報が表示されます (親 FlexCard には現在の気象状況のみが表示されます)。

条件に基づいて複数の状態を表示する

FlexCard 状態では、表示される情報の種別や状況に基づいて異なる外観で FlexCard を設定できます。複数の FlexCard 状態を設計して、FlexCard にデータを表示するかどうか、いつ、どのように表示するかを決定する条件を設定することができます。つまり、FlexCard 状態によって、カード上でユーザーが参照できる情報と実行できるアクションが決まります。 

次の例では、プランまたは登録の状況 (有効、未払い、存在しない) が示されています。この 1 つのカードには 3 つの異なる状態があります。条件によってどの状態を表示するかが決まります。

1. 左側のカードはプランが有効な場合 (active) に表示されます。
   
2. 中央のカードには支払期限が切れている場合に追加の標識 (Past Due) が表示されます。
   
3. 右側のカードは、登録者に現在このプランがなく、プランを追加できることを提案する場合に表示されます。
   

メモ 

FlexCard 要素を条件に応じて表示することもできます。

FlexCard は、(自分で言うのもなんですが) 非常に便利です。これで FlexCard の基本を理解できたので、次のユニットでは FlexCard Designer を確認しましょう。

リソース

• Trailhead: Lightning Web コンポーネントの基本