FlexCard でデータとアクションを表示する

学習の目的

この単元を完了すると、次のことができるようになります。

さまざまな FlexCard 要素について説明する。
Block 要素の目的を説明する。
Text と Field 要素の目的を説明する。
Icon 要素の目的を説明する。
Menu と Action 要素の目的を説明する。

FlexCard 要素

FlexCard をさらに深く理解しようと多くの方がワクワクしていると思いますので、さっそく見ていきましょう。

次の FlexCard には 2 つの個別の領域があります。左側の領域には、カスタマー取引先に関する取引先基本情報 (アイコン、タイトル、4 つの項目、アクションのメニュー) が表示されています。右側の領域には、以下の例では何も表示されていませんが、最終的には気象情報が表示されます。この単元では、取引先情報側に焦点を当てて説明します。

取引先情報に焦点を当てた FlexCard のビュー。

まず、FlexCard のデータとスタイルを取り除き、その下で要素がどのように動作するかを示します。

取引先の詳細で FlexCard を構成する要素。

Block 要素

この FlexCard は 2 つの Block 要素で構成されています。Block 要素では、FlexCard 内の他の要素の論理グループを結合します。Block を折りたたみ可能にすることで、そのコンテンツを非表示にしたり展開したりすることができます。別の Block の中に Block を配置することもできます。

Account Block には、いくつかの単純なユーザーインターフェース (UI) 要素 (Text、Icon、Menu UI 要素) があります。また、FlexCard のヘッダーとなる、Icon 要素と Text 要素をグループ化した別の Block も含まれています。

Text と Field 要素

前の例では、Text 要素はデータソースから返されたデータ項目を追加するために使用されています。Text 要素では、リッチテキストエディターを使用してテキストと解析された差し込み項目を結合します。リッチテキストエディターは、テキストの各セクションに HTML div を追加して、Text 要素のレイアウトを作成します。この要素には、テキストの書式設定用の [Style (スタイル)] メニューもあります。

[TEXT PROPERTIES (テキストプロパティ)] 内の [Fields (項目)] メニュー

Field 要素を使用して、データソースから返されたデータを FlexCard に表示することもできます。

この要素を使用してデータ項目を追加するには、2 つの方法があります。最も簡単なのは、[項目] リストから項目をキャンバスにドラッグする方法です。[項目] リストには、使用可能なデータ項目のリストが表示されます。

[FIELDS (項目)] リストのデータ項目。

2 つ目の方法は、[Elements (要素)] リストから Field 要素をキャンバスにドラッグする方法です。Field 要素には、データ項目からの出力が表示されます。

データ項目からの出力。

[FIELD PROPERTIES (項目プロパティ)] には、[Field Type (項目種別)] 設定があり、適切な書式でデータを表示するのに役立ちます。たとえば、[日付] 項目種別に日付が適切な書式で表示されます。

Icon 要素

Icon 要素には、Salesforce Lightning Design System のアイコンライブラリからアクセスする Salesforce SVG アイコン、またはアップロードするカスタムアイコンが表示されます。

Icon 要素。

クリックしたときにアクションを実行するようにアイコンを設定できます。この機能は、Image、Block、Toggle 要素にもあります。

Menu 要素と Action 要素。

Menu 要素 (1) で、FlexCard 上のアクションのリストからメニューを作成します。メニューのドロップダウンにあるメニューボタンと各アクションにスタイルを設定します。この要素は、FlexCard に多くのアクションを追加したいが、カードを煩雑にしたくない場合に便利なオプションです。Action 要素 (2) で、テキストまたはクリックするとアクションが実行されるボタンを表示します。

使用可能なアクションには複数の種別があります。

アクション種別名	説明
Card	再読み込み、データソースの更新、削除などのカードレベルのアクションを実行します。
Data	アクションからデータソースをトリガーしてサーバーからデータを GET 受信するか、サーバーにデータを POST 送信します。
Event	Custom: カスタムイベントを起動して、親 FlexCard にイベントの発生を通知します。 PubSub: PubSub イベントを起動して、ページやアプリケーション上の別のコンポーネントにイベントの発生を通知します。
Flyout	子カード、OmniScript、カスタム Lightning Web コンポーネント (LWC) からの追加情報をモーダルまたはポップオーバーで表示します。
Navigate	対象 URL または PageReference 型を選択して、Lightning Experience 内、コミュニティ内、または外部 Web アドレスへのナビゲーションを可能にします。
OmniScript	FlexCard から OmniScript を起動します。
Update OmniScript	カスタム Lightning Web コンポーネントとして OmniScript に埋め込まれた FlexCard から OmniScript を更新します。

カスタマイズ可能な FlexCard を使用すると、あらゆる種別の有益な情報を一目で確認できますね。次は、FlexCard に表示されるデータと追加する Action 要素にスタイルを設定する方法を学習しましょう。

リソース

演習ガイド: FlexCard でデータとアクションを表示する