FlexCard Designer の詳細を確認する

学習の目的

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

• FlexCard Designer へのアクセス方法を説明する。
• FlexCard Designer ヘッダーとキャンバスのしくみを説明する。
• [Build (作成)]、[Properties (プロパティ)]、[Style (スタイル)]、[Setup (設定)] パネルについて説明する。
• FlexCard をリアルタイムでプレビューして公開する方法を要約する。
• 製品内ヘルプとツールチップ機能を説明する。

FlexCard Designer がある場所

FlexCard Designer を使用すると迅速にカードを設定、プレビュー、デバッグできます。ユーザーインターフェース (UI) 要素をキャンバスにドラッグアンドドロップして位置とサイズを変更し、テキスト、ボタン、アイコン、画像、リンク、チャート、テーブル、さらには他の FlexCard の書式設定を行うなど、非常に便利な機能をすべて実行できます。

この優れたツールはどこで見つけられるのでしょうか? アプリケーションランチャーを使用して、OmniStudio アプリケーションを見つけます。ドロップダウンメニューをクリックし、[FlexCards] を選択します。これで、FlexCard Designer のヘッダーとキャンバスの詳細を確認する準備が整いました。

ヘッダーとキャンバス

ヘッダーは、FlexCard に関連するメタデータを参照して、アクションを実行する場所であり、次の操作を行えます。

• 作成者、バージョン、状態、FlexCard のコピー元、子カードかどうか、最終更新日、テーマなど、FlexCard に関する基本的なメタデータを参照する。
• [Design (設計)] ビューと [Preview (プレビュー)] を切り替える、新しいバージョンの FlexCard を作成する、FlexCard のコピー、有効化、および無効化を行う。
• 有効化された FlexCard の [Publish Options (公開オプション)] を設定し、FlexCard をエクスポートする。
• [ヘルプリンク] から FlexCard にドキュメントにアクセスする。

キャンバス上に要素をドラッグして、FlexCard を作成します。

• [Build (作成)] パネルからキャンバスに項目、アクション、画像、状態、子 FlexCard、カスタム Lightning Web コンポーネント (LWC) などの要素をドラッグします。
• 必要に応じて、要素の再配置、コピー、削除、幅の調整を行います。
• [Design (設計)] ビューで、ビューポートドロップダウン (1) を使用して FlexCard の応答性をテストします。この機能により、異なるビューポートブレークポイントでの要素の配置を確認することができます。

作成、プロパティ、スタイル、設定パネル

FlexCard を作成するには、キャンバスに項目と要素をドラッグします。

• Fields (項目): FlexCard の構成済みデータソースに基づいて項目をキャンバスにドラッグします。
• Display (表示):
  • Text、Image、Icon、Block などの単純な要素を FlexCard に追加します。
  • Action、Chart、Menu、Datatable などのより複雑な要素を追加します。
  • FlexCard への状態の追加、カスタム Lightning Web コンポーネントの埋め込み、再利用可能な子 FlexCard の埋め込みを行います。

Fields 要素と Display 要素は [Build (作成)] パネルにあります (1)。

以下は、FlexCard Designer の [Build (作成)] パネルの [Display (表示)] セクションで使用できる要素の完全なリストです。

プロパティパネル

キャンバスの要素を選択する場合は、[Properties (プロパティ)] パネル (1) からその要素のプロパティを設定し、要素の動作を決定します。たとえば、Field 要素を選択した場合は、ラベルの更新、表示するデータ項目値の選択、項目種別の選択を行います。 

次の例では Action 要素が表示されています。アクション種別を選択し、要素名とラベルを変更して、アクションに関連付けるアイコンを選択します。

スタイルパネル

[Style (スタイル)] パネル (1) を使用して、FlexCard 要素にスタイルを設定して、外観をリアルタイムで更新します。このパネルには、背景、サイズ、境界線、パディング、余白、高さ、フォント、応答性性の設定が用意されています。要素にスタイルを作成する場合は、そのスタイルを保存して FlexCard の複数の要素で使用できるようにします。
カスタム設計の場合は、カスタム CSS を作成して適用します。

設定パネル

データソースを使用して FlexCard を作成する場合は、複数の設定を行います。既存の FlexCard の場合、[Setup (設定)] パネル (1) に移動して、次の設定を更新するか、さらに設定を行います。

• データソースを更新する。
• カスタム権限を適用して、FlexCard へのアクセスを制限する。
• 追跡が有効になっている要素でカスタムデータを追跡する。
• [Multi-Language Support (複数言語サポート)] を有効にして、[Session Variables (セッション変数)] を設定し、[Event Listeners (イベントリスナー)] を作成します。

セッション変数は特殊な種別の変数であり、データソースまたは外部システムからの値を保存することで FlexCard 上でその値にグローバルにアクセスすることができるようになります。 

イベントリスナーは、イベントの発生を「リスン」または待機し、それに応じてアクションを実行する関数です。

プレビューと公開

FlexCard をリアルタイムでプレビューし、設計と機能をテストします。

• ビューポートドロップダウンメニュー (1) でオプションを選択して、モバイル、デスクトップ、タブレットなどのさまざまなデバイスで FlexCard がどのように表示されるかをプレビューします。
• [Add Test Parameters (テストパラメーターの追加)] (2) をクリックし、レコード ID やページネーション制限など、さまざまなパラメーターを設定して FlexCard をプレビューします。
• FlexCard のプレビューおよびデバッグ時に [Refresh (更新)] (3) でキャンバスのみを更新します。[Refresh (更新)] によってカードが再読み込みされ、データ JSON がリセットされます。
• FlexCard の [Data JSON (データ JSON)] (4) を参照します。データソースによる要素への入力に問題がないか調べます。[Data JSON (データ JSON)] パネルは FlexCard を操作すると更新されます。
• FlexCard のアクション要求およびイベント要求と Action Debugger (5) からの応答を参照します。アクション可能な項目をクリックしてそのログと関連付けられたイベントを表示します。

次に、ヘッダーにある [Activate (有効化)] をクリックして、完成した FlexCard を有効にします。このプロセスにより、Lightning Web コンポーネントのコンパイルとリリースが行われます。

FlexCard を有効化した後、生成された Lightning Web コンポーネントのメタデータ値 (公開場所: [Targets (公開先)] など) を設定します。 

独自のカスタムコンポーネント SVG アイコンを追加して、コミュニティページのエクスペリエンスビルダーと Lightning ページの Lightning アプリケーションビルダーから生成された Lightning Web コンポーネントを識別します。

製品内ヘルプとツールチップ

製品内ヘルプ機能を使用するには、次のようないくつかの方法があります。

[?] (1) をクリックして、スライドアウトヘルプトレイで要素の機能に関する詳細なドキュメントを表示する。ヘッダーの [Help (ヘルプ)] (2) をクリックして、スライドアウトヘルプトレイでページレベルのヘルプを表示する。

[i] アイコンの上にカーソルを移動してツールチップを表示し、特定のプロパティに関するインライン情報にアクセスする。

多くのツールがありましたね。次は、いよいよウィザード、つまり Data Source Wizard について学習しましょう。