Flexcard をテストして有効化する

学習の目的

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

• Flexcard をプレビューしてテストする方法を説明する。
  
• Flexcard を有効化して公開する方法を説明する。
  
• Flexcard の使用方法におけるベストプラクティスを確認する。
  

Flexcard をテストする

Flexcard Designer のレイアウト上には、追加情報の取得と Flexcard のテストの実行に役立つ重要な機能が備わっています。この手軽に使用できるテスト機能は、時間を節約し、Flexcard を確実にリリースするのに役立ちます。

製品内ヘルプ機能には、デザイナーインターフェースのパネル上で各要素と項目に表示されている アイコンがあります。 アイコンの上にカーソルを移動すると、特定のプロパティに関するインライン情報が表示されます。

次は Omnistudio デザインアシスタントについて説明します。 を選択して開くことができます。デザインアシスタントを使用すれば、設計フェーズ中に Flexcard の健全性やデザインの質、複雑さ、パフォーマンス、ベストプラクティスについてリアルタイムのフィードバック、アラート、レポートが提供されます。

Lightning ページまたはエクスペリエンスサイトに公開する前に Flexcard の外観をプレビューしてテストするには、ツールバーにある [Preview (プレビュー)] を選択します。複数のデバイス上で Flexcard がどのように表示されるかを確認し、アクションなどのインタラクティブ要素の機能をテストすることができます。Flexcard のデータ出力、イベント、アクションなどをデバッグすることも可能です。

プレビューモードで、[Add Test Parameters (テストパラメーターを追加)] をクリックし、キー項目と値項目にデータを入力すると、サンプルデータで Flexcard をテストできます。[Preview Device (プレビューデバイス)] ドロップダウンメニューを選択して、デスクトップ、タブレット、モバイルなどの複数デバイスで Flexcard がどのように表示されるかを確認することもできます。[Debug (デバッグ)] ペインには、データソースから Flexcard コンポーネントの表示カード上の要素にどのように入力されるかを示す [Data JSON (データ JSON)] タブがあります。また、[Debug (デバッグ)] ペインを使用して、実行時の潜在的な問題を検出することもできます。[Debug (デバッグ)] ペインには、クライアントとサーバー側アクションコールの応答データとその他の詳細を確認するのに役立つ [Action Debugger (アクションデバッガー)] もあります。

Flexcard を有効にして公開する

Flexcard の設定とテストが完了したら、ツールバーにある [Activate (有効化)] をクリックして Flexcard を有効にします。有効にしたら、Lightning ページやエクスペリエンスサイトに追加できます。

[Publish (公開)] 設定を使用して、Flexcard が表示されるページなどのメタデータ値を定義できます。[Deactivate (無効化)] の横にあるドロップダウンをクリックし、[Publish (公開)] を選択して、さまざまな Salesforce ページで使用できるようにします。

[Publish Options (公開オプション)] ウィンドウで、Lightning Web コンポーネントのメタデータ値 (公開場所: [Targets (公開先)] など) を設定します。

任意の対象ページを選択して、Flexcard Lightning Web コンポーネントをリリースできます。

Salesforce プラットフォーム外の外部サイトまたはアプリケーションで Flexcard を実行することもできます。[Download Off-Platform LWC (プラットフォーム外の LWC をダウンロード)] を選択して Flexcard Lightning Web コンポーネントをダウンロードし、ダウンロードしたコンポーネントを OmniOut プロジェクトに追加します。その後、アプリケーションまたはサイトに統合して Flexcard をリリースできます。

Flexcard のベストプラクティス

Flexcard を最大限に活用するには、特定のベストプラクティスに従う必要があります。以下に、Flexcard の使用時に参照できるベストプラクティスを紹介します。

Flexcard のデータソース

Flexcard をほかの Flexcard に埋め込むことができますが、多くの Flexcard には独自のデータソースがあります。このような埋め込みを行うと、Flexcard のデータ取得と競合してしまう可能性があります。すべてのデータを親 Flexcard から取得し、子カードに必要なデータを渡すことをお勧めします。Data Mapper とほかのサービスを 1 つの Integration Procedure に統合して親 Flexcard にのみ配置します。その後、必要に応じて、リストノードを子 Flexcard に渡します。

Flexcard の命名規則

Omnistudio の Flexcard には、名前と作成者の厳格な命名規則が定められています。英数字とアンダースコアのみを使用し、スペース、ダッシュ、連続するアンダースコア、英数字以外の文字は使用しないでください。FlexCard 名には、キャメルケース、パスカルケース、またはスネークケースを使用することをお勧めします。一般的なガイドラインは prefixObjectDetail です。

これらの命名規則に従った FlexCard 名の例は次のとおりです。

• キャメルケース: teamAccountOverview
• パスカルケース: TeamAccountOverview
• スネークケース: team_account_overview

単一言語とマルチ言語

同一コンポーネントでマルチ言語バージョンと単一言語バージョンの両方を所有しないようにします。こうすることで、データストレージスペースを節約し、開発者とサポート担当者の混乱を避けることができます。使用していないバージョンを削除することを忘れないでください。

Flexcard の状態

カード上に、条件が似ている要素や、条件に基づいて配置が異なる要素がいくつかある場合、Flexcard の状態を使用します。状態は、Flexcard の読み込み時間の短縮に役立ちます。また、Flexcard 上で 1 列に並んでいない要素が正しく書式設定されるようにもなります。要素の条件付き表示を 1 つの状態で設定するより、複数の状態を使用することを検討してください。

設計のわかりやすさ

Flexcard の作成時、必ず出力項目にわかりやすいプレースホルダーを設定してください。こうすることで、設計時に開発者がどこに何があるかを理解し、データがカードにどう表示されるかを感じ取ることができるようになります。

繰り返しフラグ

Flexcard では、繰り返しフラグはデフォルトで [true] に設定されています。Flexcard ですべてのレコードを取得する必要のある要素の場合 (データテーブル、グラフなど)、繰り返しフラグを必ずオフにしてください。そうすることで、予期しない結果を回避できます。

類似条件項目はブロックにグループ化する

ブロックを使用して、条件が似ている要素をまとめます。こうすると、Flexcard のパフォーマンスが向上し、読み込み時間の加速化も実現できます。また、カードの開発と管理が簡略化します。追加の情報や項目を表示する場合は、フライアウトや折りたたみ可能なブロックを使用します。

テキストブロックが 1 つしかない子 Flexcard を避ける

テキストブロックが 1 つしか含まれていない Flexcard がある場合 (特に子 Flexcard の場合)、埋め込みコンポーネントを減らすために親 Flexcard か子 Flexcard に統合することを検討します。ほかの Flexcard に埋め込むときは、必要に応じて Flexcard の状態か条件を使用します。

まとめ

このバッジでは、Omnistudio Flexcard の基本事項について学習しました。Omnistudio Flexcard の利点と成功事例について学びました。Omnistudio Flexcard のデザイナーとその機能について詳しく確認しました。また、Omnistudio Flexcard のベストプラクティスも学びました。

次は、シンプルな使いやすい形で担当者とユーザーに役立つ情報を提供する方法など、ビジネスニーズに合わせたインタラクティブな UI コンポーネントの作成で Flexcard をどのように利用できるかを考えてみましょう。

リソース

• Salesforce ヘルプ: OmniOut
• Salesforce ヘルプ: Activate and Publish a Flexcard (Flexcard の有効化と公開)