OmniStudio FlexCard は、コンテキスト情報を一目でわかる形式で表示し、表示されたデータに関連するタスクへのアクセスを提供します。
主要な機能
- FlexCard には、コンテキスト情報が一目でわかるように要約されています。
- FlexCard は、顧客取引の開始点と終了点です。
- FlexCard は、どのデバイスまたはチャネルでも表示できます。
FlexCard は、コール センター エージェントのインタラクション コンソールに限定されません。モバイル デバイスやコンシューマー ポータルなど、任意のデバイスやチャネルで表示できるように展開できます。
FlexCard Lightning Web コンポーネントは、Lightning アプリケーションビルダーから Lightning ページに、またはエクスペリエンスビルダーからコミュニティページまたはポータルページにリリースします。FlexCard を Adobe Experience Manager などの外部コンテンツ管理システム、または Heroku などのカスタム Web コンテナ内にデプロイすることもできます。
- FlexCard は、複数のデータ ソースからのデータを表示できます。
FlexCard は、Salesforce からの内部情報と、Web サイトまたはサードパーティのレガシー システムからの外部情報を組み合わせて表示できます。FlexCard は、複数のソースから取得された情報であっても、この情報を均一に表示します。たとえば、Sophia Fournier のプロファイル FlexCard には、彼女のアカウントの詳細からの内部データと、天気に関連する外部データが表示されます。
- FlexCard は、ドラッグ アンド ドロップ要素を使用して迅速に作成できます。
FlexCard Designer を使用すると、カードをすばやく構成、プレビュー、デバッグできます。UI 要素をキャンバス上にドラッグ アンド ドロップ、配置、サイズ変更して、テキスト、ボタン、アイコン、画像、リンク、グラフ、テーブル、さらにはその他の FlexCard の書式設定を行うことができます。
[プロパティ] パネルを使用して、要素のプロパティを設定します。使用できるプロパティは要素のタイプによって異なります。一部の要素では、構成方法に応じて異なるプロパティが表示されます。
- FlexCard には、レイアウトとスタイルを制御するための WYSIWYG (What-you-see-is-what-you-get) エディターが備わっています。
スタイルをグローバルに管理するには、カスタム CSS を使用するか、デザイナーでスタイルを直接変更できます。次のように、各 FlexCard 要素のスタイルを設定できます。
- FlexCard アクションは、カードのコンテキストに関連します。
- FlexCard は他の FlexCard に埋め込むことができます。
子 FlexCard 要素を使用して、FlexCard を他の FlexCard に埋め込むことができます。アクション要素から子 FlexCard を起動することもできます。
子 FlexCard を埋め込むと、1 つの FlexCard 内に複数のデータ ソースを含めることができます。埋め込むことができる子 FlexCard の数に制限はありません。アクティブであることだけが必要です。
- FlexCard は、LWC OmniScript 内に埋め込むことができます。
FlexCard Lightning Web コンポーネントを OmniScript 内に埋め込むことができます。これは、FlexCard がガイド付きインタラクションの一部として表示されることを意味します。
ここでは、埋め込まれた FlexCard に医療計画が表示され
- FlexCard は、オンデマンドでフライアウトを使用して詳細を表示します。
フライアウトは、FlexCard 上のアクションをクリックすると表示される別の FlexCard です。フライアウトには次の内容が表示されます。
親カードに表示すると煩雑になる追加情報またはアクション。
親カード レベルで表示するほど重要ではない二次的な情報またはアクション
- FlexCard には、条件に基づいて表示される複数の状態があります
FlexCard の状態を使用すると、表示される情報のタイプまたはステータスに基づいて、FlexCard のさまざまな外観を設定できます。複数の FlexCard 状態を設計し、データを FlexCard に表示するかどうか、いつ、どのように表示するかを決定する条件を設定できます。つまり、FlexCard の状態によって、ユーザーがカード上で何を表示し、実行できるかが決まります。
次の例は、プランまたはサブスクリプションのステータス (有効、期限切れ、存在しない) を示しています。この 1 枚のカードには 3 つの異なる状態があります。条件によって、どの状態が表示されるかが決まります。
- プランが有効な場合は、左側のカードが表示されます。
- 中央のカードには、支払い期限を過ぎた場合の追加のインジケーターが表示されます。
- 右側のカードは、加入者が現在このプランを持っていない場合に表示されますが、追加する機能を提供します。
FlexCard Designer の場所
FlexCard Designer を使用すると、カードをすばやく構成、プレビュー、デバッグできます。ユーザー インターフェイス (UI) 要素をキャンバス上にドラッグ アンド ドロップ、配置、サイズ変更して、テキスト、ボタン、アイコン、画像、リンク、グラフ、表、さらにはその他の FlexCard をフォーマットするなど、あらゆる種類の素晴らしい操作を行うことができます。
このスーパーツールはどこで見つけますか? アプリ ランチャーを使用して OmniStudio アプリを見つけます。ドロップダウン メニューをクリックして、[FlexCards]を選択します。これで、FlexCard Designer のヘッダーとキャンバスを探索する準備が整いました。
ヘッダーの[アクティブ化]をクリックして、完成した FlexCard をアクティブ化します。このプロセスでは、Lightning Web コンポーネントをコンパイルしてデプロイします。
FlexCard を有効化した後、生成された Lightning Web コンポーネントのメタデータ値 (公開先 (ターゲット) など) を設定します。
データ ソース ウィザード
FlexCard を作成すると、データ ソース ウィザードが一連の手順を実行します。
- フレックスカードを定義します。
- データソースの種類を選択します。
- データソースを選択します。
- データソース入力を構成します。
テーマ
FlexCard テーマには 2 つのオプションがあります。Salesforce Lightning Design System (SLDS) を使用する場合はLightningを選択し、 Newport Design System を使用する場合はNewport を選択します。Newport は、デザイナーや Web 開発者が 1 か所ですべての OmniStudio コンポーネントのスタイルを簡単に変更し、将来のすべてのページで使用できる最適化されたカスタム CSS ファイルを生成するための CSS フレームワーク ツールです。
FlexCard を保存すると、名前、作成者、テーマを編集できなくなります。編集を完了する必要がある場合は、FlexCard のクローンを作成し、クローンの作成時にこれらの設定を更新します。
データソースタイプ
- Apex REST は、Apex クラスの REST エンドポイントを使用してデータを返します。
- Apex Remote は、Apex Remote クラスとメソッドを使用してデータを返します。
- Custom は、サンプル JSON を使用して、最終的には別のデータ ソースに置き換えられる一時データを含む FlexCard を設定します。
- SOQL クエリは、Salesforce オブジェクトクエリ言語 (SOQL) を使用して、組織の Salesforce データから特定の情報を検索します。たとえば、アカウント LIMIT 5 から名前、ID を選択します。
- SOSL 検索は、Salesforce オブジェクト検索言語 (SOSL) を使用して、検索インデックスに対してテキストベースの検索クエリを構築します。
- ストリーミング API は、Salesforce ストリーミング API を使用して、Salesforce データの変更に関連付けられていない一般的なイベントの通知を送信します。
- SDK は、ソフトウェア開発キット (SDK) のメソッドを使用して、FlexCard 上のフィールドに入力するデータを取得します。
OmniStudio データ ツールを使用することもできます。
- DataRaptor は、DataRaptor Extract インターフェイスを使用して、Salesforce オブジェクトからデータを返します。
- 統合プロシージャは、統合プロシージャを使用して、複数の内部および外部ソースからデータを返します。
FlexCard はデータ ソースとして None を持つこともできます。親 FlexCard がそのソースからその子にデータをプッシュするように設定されている場合、子 FlexCard にはデータ ソースは必要ありません。子 FlexCard にデータ ソースがある場合、親 FlexCard にはデータ ソースが必要ない場合があります。
フレックスカード要素
ブロック要素
この FlexCard を構成する 2 つの Block 要素があります。Block 要素は、FlexCard 内の他の要素の論理グループを結合します。ブロックを折りたたみ可能にして、そのコンテンツを非表示にしたり展開したりすることができます。ブロックを別のブロックの中に配置することもできます。
アカウント ブロックには、テキスト、アイコン、メニュー UI 要素など、いくつかの単純なユーザー インターフェイス (UI) 要素が含まれています。また、アイコンとテキスト要素をグループ化して FlexCard のヘッダーを作成する別のブロックも含まれています。
テキスト要素とフィールド要素
前の例では、Text 要素を使用して、データ ソースから返されたデータ フィールドを追加します。Text 要素は、リッチ テキスト エディターを使用してテキストと解析された差し込みフィールドを結合します。リッチ テキスト エディターは、テキストの各セクションに HTML div を追加して、テキスト要素のレイアウトを構築します。この要素には、テキストを書式設定するためのスタイル メニューも含まれています。
| Action Type Name | Description |
|---|---|
| Card | リロード、データ ソースの更新、削除などのカード レベルのアクションを実行します。 |
| Data | アクションからデータ ソースをトリガーして、サーバーからデータを取得するか、サーバーにデータをポストします。 |
| Event | カスタム:カスタム イベントを起動して、イベントの発生を親 FlexCard に通知します。PubSub: PubSub イベントを起動して、ページまたはアプリケーション上の別のコンポーネントにイベントの発生を通知します。 |
| Flyout | 子カード、OmniScript、またはカスタム Lightning Web コンポーネント (LWC) からの追加情報をモーダルまたはポップオーバーに表示します。 |
| Navigate | Lightning Experience 内、コミュニティ内、または外部 Web アドレスへのナビゲーションを可能にするターゲット URL または PageReference タイプを選択します |
| OmniScript | FlexCard から OmniScript を起動します。 |
| Update OmniScript | OmniScript のカスタム Lightning Web コンポーネントとして埋め込まれた FlexCard から OmniScript を更新します。 |
スタイルパネルの特徴
個々の要素と要素内のフィールドをスタイル設定することによって、FlexCard の外観と操作性を構成します。[スタイル]パネルを使用して、背景、テキスト、境界線をデザインし、高さ、幅、要素内および要素間の間隔を調整します。次の要素に使用できる特定のスタイル オプションもあります。
| セクション | 説明 |
|---|---|
| Alignment | 要素のパディング、マージン、テキストの配置を更新します。 |
| Appearance | 要素の色、背景、枠線を設定します。 |
| Custom | カスタム クラスを作成して適用し、要素にインライン スタイルを追加します。 |
| Custom CSS | FlexCard 要素のスタイル設定をカスタム スタイルとして保存し、FlexCard の複数の要素で使用します。 |
| Dimensions | 高さと幅を設定し、要素の応答性を構成します。 |
応答性を有効にする
要素の応答性を有効にして、ページの表示領域 (ビューポート) の幅の変化に応じて幅も変化するように設定します。要素のレスポンシブなサイズ設定は、モバイルファーストのアプローチです。サイズ変更は、表示されている最小のビューポート ブレークポイントから開始され、次に幅の広いブレークポイントがオーバーライドするまで継続的に上向きに適用されます。デフォルトの幅は、最小のビューポート ブレークポイントの幅になります
スタイルを保存して適用する
スタイルを FlexCard に保存して、FlexCard 内の他の要素で再利用します。[スタイル] パネルでスタイルをカスタム スタイルとして保存し、保存したスタイルを同じタイプの他の要素に適用します。
保存されたスタイルは、FlexCard 内でのみ使用できます。保存できるのは、スタイル パネル内で行ったスタイルのみであり、要素のプロパティ パネルで行ったスタイルは保存できません。
FlexCards 標準コンポーネント
Summer '22 以降、標準データモデルを使用する OmniStudio をお持ちの場合は、FlexCards 標準コンポーネントを使用して、Lightning アプリケーションビルダーから Lightning ページに FlexCard を表示できます。作成したアクティブな FlexCard を追加することも、業界ライセンスの一部として利用可能な、すぐに使用できる編集不可能な FlexCard を追加することもできます。標準の FlexCard コンポーネントは、Salesforce 組織でネイティブに実行されます。したがって、アクティブな OmniStudio コンポーネントを Lightning ページに追加するために OmniStudio パッケージをインストールする必要はありません。一方、カスタム FlexCard コンポーネントは、インストールされた管理パッケージから実行されます。
この機能を有効にできるかどうかを知るには、まず組織で OmniStudio sObjects (標準オブジェクト) を使用しているかどうかを確認する必要があります。
- 歯車アイコン をクリックしセットアップアイコン、「セットアップ」を選択します。
- [クイック検索] ボックスに「 」Omni Interaction Configurationと入力し、[オムニ インタラクション構成]をクリックします。
TheFirstInstalledOmniPackage という名前のエントリが存在する場合、組織は OmniStudio sObjects (標準オブジェクト) を使用し、標準コンポーネント機能を有効にすることができます。
組織で OmniStudio sObject (標準オブジェクト) が使用されていることを確認したら、標準コンポーネントを有効にすることができます。
- 歯車アイコン をクリックしセットアップアイコン、「セットアップ」を選択します。
- [クイック検索] ボックスに「 」と入力しOmniStudio Settings、[OmniStudio 設定]をクリックします。
- [標準 OmniStudio ランタイム]トグル ボタンをクリックして、ボタンが [有効] と表示されるようにします。
この機能が有効になったので、Lightning アプリケーションビルダーまたはエクスペリエンスビルダーに戻り、標準コンポーネントの下にあるフレックスカードオプションを確認できます。