まとめページに戻る
 まとめA～M
OmniStudio

flex cardのエラー

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 アプリケーションビルダーまたはエクスペリエンスビルダーに戻り、標準コンポーネントの下にあるフレックスカードオプションを確認できます。

設定例

FlexCard ビューポート/フォームファクタに基づく条件付きコンポーネント/状態