Flexcardを使ってみる
Omnistudio Flexcardとは
Salesforce上で 「情報をコンパクトにまとめて見せる」ためのUIコンポーネント です。
顧客情報や取引データなどを、カード型でわかりやすく表示できます
データをただ表示するだけでなく、ボタンを置いてアクション（更新・遷移など） もできます
コーディング不要（ローコード）で、ドラッグ＆ドロップ操作で作成できます
Flexcardを使ってみる
取引先のレコードページに配置する取引先責任者のUIコンポーネントを作成します。
Flexcardの新規作成
リストビューから、Flexcardを新規作成します。
データソースの設定
FlexCardを作るときには必ず、「表示する情報」をどこから取るかを選ぶ必要があります。
（不要の場合は、Noneを選択します）
データソースには次のような種類がありますが、今回は事前に作成したData Mapperを使用します。
Data Mapper定義を選択し、必要なInputも指定します。
AccountIdとしては、FlexCardを表示しているレコード（例：Account）のIdを渡したいです。
FlexCardでは、標準で {recordId} という特殊な変数が使えるため、これを設定します。
{recordId} として、TEST VALUEを入力し、Fetchをクリックすると、データが取得できていることを確認できます。
Result JSON Pathの説明に従って指定すると、TABLE形式で表示できました。
Elementの配置
Flexcardでは、右サイドバーに配置できるElementが用意されています。
データソースで取得した値は、画像のようにあらかじめ用意されています。
Field Labelや、Placeholder（データがまだないときに仮で置いておくもの）を指定します。
Elementの右側はクリックでつかめるようになっており、12段階で幅を指定できます。
Text というElementを用いて、表示させることも可能です。
Action というElementを配置してみます。
Actionの内容は複数指定できます。
このレコードを編集できるように指定します。
Styleの設定
Styleタブは、パーツ（Elements）やカード全体の見た目（デザイン）を整える場所です。
Elementsやカード全体をクリックして選択したあと、デザインを指定します。
- フォント
- 背景
- 余白
- 幅や高さ（レスポンシブ対応）
- より細かいCSS
ボタンの位置を、右寄せにしました。
名前の下にMargin（Elementの外側の余白）を追加しました。
Preview
PREVIEWは、作成中のFlexCardが「本番ではどう見えるか」を確認するためのモードです。
必要があれば戻って修正し、問題なければ、Activateします！
Flexcardの配置
任意のレコードページにおいて、Lightning App Builderを開きます。
- 歯車アイコン（設定） → 編集ページ（Edit Page）
標準のコンポーネントにFlexcardがあるのでそれを配置し、右パネルで作成したFlexcard定義を選び、有効化します。
配置できました。
まとめ
今回は、Omnistudio Flexcardを調査しました。
次回は、複雑なガイド付きプロセスを作成するOmniscriptを作成します。
Discussion