【Salesforce】FlexCardについて

# FlexCard
ドラッグ＆ドロップにより、豊富なデータソースを利用して、顧客中心のUIを構築できます。
主な機能は、下記になります。

+ 集約された情報とアクションを分かりやすく一括表示する
+ 複数のソースから取得されたデータを集約し、表示する
+ 多彩なデザインでUIを構築できる
+ あるゆるデバイスやチャンネルで表示できる

FlexCardは、子FlexCardやFlyOutなどにより拡張性に優れています。
また、Salesforce内だけでなく、コミュニティ画面にも展開できます。
そのため、情報の整理や表示を行う機能としてとても優れています。

## 表示可能な要素
主な表示可能な要素は、下記のようになります。

| 要素名 | 説明 |
|--|--|
| Action | OmniScriptの起動やフライアウトの表示などアクションを呼び出す |
| Block | 折り畳み可能なコンテナを作成したり、要素を論理的にグループ化する |
| Chart | グラフやチャートなどの図表を表示する |
| Datatable | 取得したデータをヘッダー付きの表形式で表示する |
| Icon | Salesforce SVGアイコンを表示する |
| Image | 画像を表示する |
| Menu | アクションをドロップダウンメニューに登録し、ユーザの選択を可能にする |
| State | 設定した状況に応じて、表示/非表示を切り替える |
| Text | リッチテキストエディターを起動し、プレーンテキストとマージフィールドが存在するメッセージを表示する |
| Toggle | 選択肢を選び、True/False、またはカンマ区切りの値セットを送信する |
| Custom LWC | カスタムLightning WebコンポーネントをFlexCardに埋め込む |
| FlexCard | 子FlexCardを親FlexCardに埋め込む |

※Block要素には、Collapsibleというプロパティがあります。
このプロパティを有効化することで、折り畳み可能なコンテナを作成できます。
また、Collapsed By Defaultを有効化すると、デフォルトで折り畳まれた状態になります。

※Menu要素は、FlexCardに多くのアクションを組み込みたい時に有用な要素になります。

※Datatable要素はデータソースから取得したデータを表示するだけでなく、以下のような操作が可能です。
・列の追加、削除、更新
・項目の表示ラベルを変更する
・列を並べ替える
・項目を検索可能にする
・データ型を変更する
・項目を編集可能にする
・項目を表示/非表示にする

※子FlexCardを使うことで、取得するデータソースを拡張することができます。

## 使用できるデータソース
+ Apex Rest
+ Apex Remote
+ Custom
+ Data Raptor
+ Integration Procedure
+ SOQL
+ SOSL

※Customは、一時的なデータを表示するFlexCardを作成するためのサンプルJSONになります。

※Noneも設定できます。
親FlexCardから子FlexCardにデータを渡す時、子FlexCardのデータソースは不要です。

## 主なアクション種別

| 種別名 | 説明 |
|--|--|
| Card | 再読み込み、データソースの更新、削除などのカードレベルのアクションを実行する |
| Data | アクションからデータソースをトリガーして、データを送受信する |
| Event | Custom：カスタムイベントを発生し、親FlexCardにイベントの発生を通知する<br>PubSub：PubSubイベントを発生し、別のコンポーネントにイベントの発生を通知する |
| FlyOut | 子FlexCard、OmniScript、カスタムLightning Webコンポーネントからの追加情報をモーダルまたはポップオーバーで表示する |
| Navigate | Lightning Experience、コミュニティ、または外部Webサービスへのナビゲーションを可能にする |
| OmniScript | OmniScriptを起動する |
| Update OmniScript | カスタムLightning WebコンポーネントとしてOmniScriptに埋め込まれたFlexCardからOmniScriptを更新する |

### FlyOut
FlyOutは、FlexCardのアクションをクリックしたときに表示される**別のFlexCard**です。
追加情報やあまり重要ではない情報、アクションなどをFlyOutで表示することで、本体のFlexCardの見た目をきれいに保つことができます。

FlyOutの詳細については、下記のSalesforce Helpをご参照ください。
[Launch a Flyout from an Action on a FlexCard](https://help.salesforce.com/s/articleView?id=sf.os_launch_a_flyout_from_an_action_on_a_flexcard_27319.htm&type=5)

### 子FlexCard
［Is Child FlexCard］を有効化すると、このFlexCardは子FlexCardになります。
子FlexCardを使用すると、下記のような利点があります。
+ 再利用可能になる
+ 1つのFlexCardに複数のデータソースを設定できるようになる
+ FlyOutとしても利用できる

FlexCardのデータソースはいずれか1種類のみになりますが、子FlexCardを利用することで複数のデータソースから得たデータを表示できるようになります。
また、1つのFlexCardに作成できる子FlexCardの数に制限はありません。

## FlexCard Designer
ドラッグ＆ドロップにより、プレビューで確認しながらFlexCardを構築できるツールです。
下記の要素により構成されます。

+ **Build**：キャンバスに要素をドラッグして、FlexCardを構成します。
+ **Properties**：要素に応じたプロパティ項目が表示され、各要素のプロパティを設定できます。
+ **Style**：各要素のスタイルを設定できます。
+ **Setup**：このFlexCard内で共有する設定項目として、動作を定義できます。

### [Style]パネル
［Style］パネルは、以下のセクションから構成されています。

| セクション | 説明 |
|--|--|
| Alignment | 要素のパディング、余白、テキストの配置を設定する |
| Appearance | 要素の色、背景、境界線を設定する |
| Custom | カスタムクラスの作成と適用、および要素へのインラインスタイルの追加を行う |
| Custom CSS | スタイル設定をカスタムスタイルとしてFlexCard要素に保存し、FlexCardの複数の要素で使用する |
| Dimensions | 高さと幅、およびレスポンシブを設定する |

※Dimensionsに［**Responsive**］があり、この設定を有効化すると、ページの可視領域の幅（ビューポート）に応じて幅が変化するように設定できます。

## FlexCardへのアウトプット
+ **Integration Procedureを利用する場合**
データソース　→　Integration Procedure → FlexCard

+ **オブジェクト間をまたいで検索する場合**
データソース　→ SOSL Search → FlexCard

+ **データ変更時に自動更新する場合**
Salesforce → Streaming API → FlexCard

+ **テストのために静的データを使用する場合**
サンプルデータ　→ FlexCard

## その他
+ FlexCardの横幅は、12のグリッドにより構成されます。<br>そのため、要素を横並びにしたい場合は、横並びにしたい要素の横幅が合計12になるように設定します。(例えば、4と8など）

## 関連するTrailhead
[OmniStudio FlexCard を作成して公開する](https://trailhead.salesforce.com/ja/content/learn/modules/omnistudio-flexcards-building-and-publishing)