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にイベントの発生を通知する 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
子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のグリッドにより構成されます。
そのため、要素を横並びにしたい場合は、横並びにしたい要素の横幅が合計12になるように設定します。(例えば、4と8など）