Flexcard の主要な機能について学ぶ
学習の目的
この単元を完了すると、次のことができるようになります。
- Flexcard の主な機能 (標準 Flexcard Designer、フライアウト、状態、条件、コンテキスト変数など) について説明する。
- Flexcard を Omniscript 内とほかの Flexcard 内に埋め込む方法を説明する。
デザインおよびインタラクションのための強力な機能
Omnistudio Flexcard には、Salesforce でユーザーインターフェースを構築するための主要な機能がいくつか用意されています。この単元では、こうした機能について詳しく学習します。
Flexcard の新しい標準デザイナー
Flexcard の標準デザイナーにより、整理された新しい直観的な UI を備えることができます。ドラッグアンドドロップ方式の宣言型 WYSIWYG (見たままの仕上がり) ツールで、コードを記述することなく、インタラクティブな Flexcard をすばやく作成して有効化することができます。デザイナー内の便利なプレビュー機能を使用して、Flexcard のデザインをプレビューしてテストすることもできます。標準デザイナーによって、より迅速に Flexcard の有効化を行えます。
簡素化されたユーザーインターフェース
Flexcard は、折りたたみ可能なデータを配置するためのブロック要素で構成されます。以下は、デザイナーに表示された Flexcard の画像です。青色のヘッダーがブロック要素で、画像とテキスト要素で構成されます。
メニュー要素にはドロップダウンメニューとしてアクションのリストが表示され、アクション要素はユーザーがそのテキストまたはアイコンをクリックしたときに、便利なアクションを実行します。ブロック要素、折りたたみ可能なメニュー、アクションは最小限に縮約された、わかりやすい見た目になっています。
フライアウト
フライアウトは、ユーザーが Flexcard 上のアクションをクリックしたときに、子 Flexcard、Omniscript、またはカスタム Lightning Web コンポーネント (LWC) からの追加情報をポップオーバーまたはモーダルウィンドウで表示します。あまり必要にならないデータを表示する場合に最適で、メインの Flexcard を整理された状態に保つことができます。
サンプル画像が示すように、取引先責任者 Flexcard にある [Update Contact (取引先責任者を更新)] リンクをクリックすると、[Update Contact Information (取引先責任者情報を更新)] モーダルフライアウトが開きます。
フライアウトのデータソース (情報の取得方法) はフライアウトを開いた場合にのみ実行されるため、不必要に余分なデータを読み込まないことによってパフォーマンスが最適化します。
フライアウトは 2 種類あります。
- モーダルフライアウト: ダイアログボックスが画面の中央に表示され、透明オーバーレイによって背後のコンテンツが見えづらくなります。
- ポップオーバーフライアウト: 小さなコンテキストウィンドウがページ上の特定要素の横に表示されます。
設計しているユーザーインターフェースに最適な Flexcard 種別を選択してください。
状態
Flexcard の状態は Flexcard 上にユーザーが表示できる内容と実行できる内容を定義し、特定の条件に基づいて UI を調節します。1 つの Flexcard に複数の状態を設定できます。たとえば、プランまたは登録に 3 つの状況 (有効、未払い、存在しない) があるとします。各状況に対応するには、3 つの異なる状態で Flexcard を定義します。
次の図は、1 つの Flexcard が異なる条件に基づいてどのように変更するかを示しています。
この場合は以下のとおりです。
- プランが有効な場合は、カード 1 が表示されます。
- 支払期限が切れている場合は、カード 2 に追加のインジケーターが示されます。
- 登録者に現在このプランがない場合は、カード 3 が表示され、プランを追加できるオプションが示されます。
状態は、プロファイル、権限セットによって変化させることができます (マネージャーまたは営業担当など)。Flexcard を使用して、異なる項目やアクションを必要とする機能が有効になっている場合に状態を変更することもできます。たとえば、担当者が Industries CPQ を使用して見積を作成しているとき、顧客がロイヤルティプログラムに登録されているかを Flexcard で確認できます。登録されている場合、カードは異なる状態に自動的に切り替わり、顧客のロイヤルティランク、ポイント残高などの新しい情報が表示されます。特定のロイヤルティ割引の適用などの新たなアクションを表示することもできます。これにより見積プロセスが効率化し、担当者がこうした特典を手動で見つけて適用する必要がなくなります。
条件
条件は、Flexcard の状態、ブロック、さらには個々の項目の表示を動的に制御します。条件を使用すると、特定の条件に基づいてユーザーエクスペリエンスを調整できます。たとえば、ユーザープロファイルのセキュリティレベルを条件にすることができます。これにより、同じ Flexcard であっても、営業担当やカスタマーサービス担当などの異なるユーザープロファイルで、異なるオプションを表示させることが可能です。
コンテキスト変数
Omnistudio Flexcard のコンテキスト変数は、Flexcard の現在の要件や条件に関連する情報にアクセスして使用するのに役立つ動的なプレースホルダーです。コンテキスト変数で取得される情報は、状況 (現在表示されているレコード、ログインユーザー、Flexcard に渡されたパラメーターなど) に応じて変わる可能性があります。
コンテキストをデータソース、アクション、その他のコンポーネントに提供するには、グローバルおよびローカルコンテキスト変数を Flexcard に追加します。こうした変数は橋渡しとして機能し、ハードコードされた値がなくても、さまざまなソースからデータを取り込みます。
ほかの Flexcard 内および Omniscript 内の Flexcard
デザイナーで子 Flexcard 要素を使用して Flexcard をほかの Flexcard に埋め込むことができます。この機能により、Flexcard をモジュール式にして再利用可能にすることができます。子 Flexcard は Action 要素から起動することもできます。複数のデータソースを 1 つの Flexcard に含めるには、データソースを含む子 Flexcard を埋め込みます。有効であれば、子 Flexcard をいくつでも埋め込むことができます。
次の画面例では、子 Case Number Flexcard は親 Cases Flexcard 内の要素です。
子にはケースの詳細とアクションが表示されています。子がない場合、親には [Cases (ケース)] ドロップダウンメニューと [Create Case (ケースの作成)] アクションのみが含まれます。
Flexcard Lightning Web コンポーネントは Omniscript 内にも埋め込むことができます。つまり、Flexcard はガイド付きインタラクションの一環として表示されます。次の画像は、Omniscript のガイド付きプロセス手順の 1 つに埋め込まれた HMO 25 Flexcard を示しています。
埋め込まれた Flexcard には複数の医療プランがインタラクションの一環として表示されており、ユーザーは各プランを比較していずれかを選択します。
パフォーマンスと拡張性
Flexcard を使用すれば、効率的なデータ処理によってパフォーマンスが向上します。Integration Procedure、Data Mapper のようなサーバー側プロセスが使用されることで、ネットワークコールが減り、ページの読み込みが加速化します。データのキャッシュも Flexcard の利点です。拡張性について言えば、Flexcard はモジュール式で再利用可能です。カードを 1 つ作成したらさまざまな場所にリリースできるため、複数のユーザーや UI コンポーネントで共有できます。
次のステップ
この単元では、Omnistudio Flexcard の主な機能について学びました。次の単元では、Flexcard の作成に使用する Flexcard の標準デザイナーとさまざまな要素について見ていきます。