Flexcard Designer の詳細を確認する

学習の目的

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

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

Flexcard Designer がある場所

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

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

ヘッダーとキャンバス

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

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

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

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

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

[Build (作成)] パネル

Flexcard を作成するには、[Build (作成)] パネルから項目と要素をキャンバスにドラッグします。

• Fields (項目): Flexcard の設定済みデータソースに基づいて項目をキャンバスにドラッグします。
  
• 表示:
  

• Text、Image、Icon、Block などの単純な要素を Flexcard に追加します。
  
• Action、Chart、Menu、Datatable などのより複雑な要素を追加します。
  
• Flexcard への状態の追加、カスタム Lightning Web コンポーネントの埋め込み、再利用可能な子 Flexcard の埋め込みを行います。
  

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

プロパティパネル

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

このスクリーンショットには Action 要素が表示されています。[Properties (プロパティ)] で、アクション種別を選択し、要素名とラベルを変更して、アクションに関連付けるアイコンを選択できます。

スタイルパネル

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

カスタム設計の場合は、カスタム CSS を作成して適用します。

設定パネル

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

• データソースを更新する。
  
• カスタム権限を適用して、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 について学習しましょう。

リソース

• Salesforce ヘルプ: Flexcard Designer (管理パッケージ用 Omnistudio)