> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-metric.md). # AX - メトリック ## 概要 **AX - メトリック** Salesforceレコードから集計値（合計、平均、件数、その他の集計）をExperience Sitesページに表示するExperience Cloudコンポーネントです。 ポータルユーザーに、総注文数、平均ケース解決時間、未処理チケット数、またはデータから導出された任意のカスタム計算など、主要な指標をひと目で表示するために使用します。Experience Builderで、コードなしでメトリックのラベル、アイコン、書式、データソースを設定できます。 ポータルダッシュボード、アカウントの要約、パフォーマンススコアカードなど、ポータルユーザーがレポートを実行せずにレコードに関する主要数値を確認したいあらゆる場所に最適です。 {% hint style="info" %} **実際のプロジェクトで見る** [取引先ハイライトパネル](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-highlight-panel)：メトリクス、バッジ、ゲージを備えたカスタムハイライトパネル。 {% endhint %} ## はじめに この簡単なチュートリアルでMetricコンポーネントの基本を学び、ユースケースの作成を始めましょう。 {% @arcade/embed url="" flowId="SXruKm5NX2h4AYOxH2EQ" %} ## 設定 ### **ラベル** メトリクスに説明的なラベル（例：「総売上高」「アクティブユーザー」）を指定します。これはタイトルとして機能し、表示される値の文脈を示します。
### **説明** メトリクスに関連する追加の文脈や洞察を示します。簡単な説明、傾向の説明、理解を深める補足情報などにできます。 ### **値** メトリクスの主要な数値を入力します。方法は2つあります： #### **手動入力** すぐに用意できる場合は、値を直接入力します。 #### **クエリ** Salesforce Object Query Languageの機能を利用して、Salesforceデータから値を動的に取得します。たとえば、Accountオブジェクトに対するクエリを使って、今年作成された取引先の総数を計算できます。

例：今年作成された新規取引先の件数をカウントする

値をクリック可能にすることもでき、ユーザーが見ている数値に対して操作できるようになります。設定は [インタラクション](#interactions). ### **セカンダリ値** 比較用または追加の文脈として、別のメトリクスを表示します。前期間の値、目標値、または関連するその他の二次データポイントにできます。 ### **接頭辞と接尾辞** 記号や略語を追加して文脈を示します。たとえば、通貨には「$」、数量には「#」、千単位には「K」を使用します。セカンダリ値には独自の **セカンダリ接頭辞** と **セカンダリ接尾辞**. ### **ツールチップ** ホバー時に詳細を表示します。メトリクスを簡潔に説明するか、追加の洞察を示します。 ### **アバター** 画像、イニシャル、またはアイコンでメトリクスを視覚的に表現します。これにより、メトリクスがより認識しやすく、魅力的になります。 * **画像：** 表示する画像。対応形式： `.apng`, `.avif`, `.gif`, `.jpg`, `.jpeg`, `.png`, `.svg`、および `.webp` ファイル。 * **フォールバックアイコン名：** 画像の読み込みに失敗した場合のフォールバックとして使用されるLightning Design Systemアイコン。 * **イニシャル：** 画像の代わりに表示する文字。レコード名が名と姓のように2語で構成されている場合は、それぞれの先頭の大文字を使用します。 * **位置：** アバターを値に対してどこに配置するか — 左（既定）、右、下、上。 * **代替テキスト：** アバターを説明するテキスト。画像上ではホバーテキストとして表示され、支援技術で読み上げられます。 * **サイズ：** 極小、小、中（既定）、大、特大、超特大。 * **バリアント：** 円形または四角形（既定）。 ### **プライマリおよびセカンダリのメトリック書式** メトリック値の表示方法を細かく調整できます。これらの設定はそれぞれ、次の両方に表示されます： **プライマリメトリック** と **セカンダリメトリック** エディタに表示されるため、2つの値を個別に書式設定できます： * **書式スタイル：** 小数（既定）、パーセント、固定パーセント、通貨 - データに最適な形式を選択します。 * **通貨コード：** 表示する通貨のISO 4217コード。たとえば `USD` 米ドルのUSDです。次の場合にのみ適用されます： **書式スタイル** が `通貨`. * **通貨の表示形式：** 通貨を記号（既定）、コード、または名称として表示します。次の場合にのみ適用されます： **書式スタイル** が `通貨`. * **値の符号：** 負（既定）または正 - 値の前に表示する符号を制御します。 * **桁数：** 整数部の最小桁数と、小数部の最小・最大桁数を指定します。 * **有効桁数：** 読みやすさのために、四捨五入する有効桁数の最小値と最大値を設定します。 * **傾向色を表示：** 色を使って、プラス（緑）またはマイナス（赤）の傾向を即座に示します * **傾向アイコン：** 値の傾向方向を示すDynamic、Arrow、Caretアイコンを追加します。次の場合にのみ適用されます： **傾向色を表示** が有効な場合。 * **傾向の分岐値：** 値が中立とみなされる数値。次と組み合わせて機能します： **傾向色を表示** と **傾向アイコン**、および次の場合にのみ適用されます： **傾向色を表示** が有効な場合。 この **セカンダリメトリック** エディタには独自の設定が1つ追加されます： * **位置：** セカンダリ値をプライマリ値に対してどこに配置するか — 下、左、右（既定）、上。 柔軟性と豊富なオプションにより、Avonni Metricコンポーネントは複雑なデータを簡潔かつ効果的に提示でき、ユーザーに実用的な洞察を提供したいあらゆるExperience Cloudサイトにとって価値ある資産となります。 ## インタラクション この **クリック時** 設定を使うとメトリック値をクリック可能にし、ユーザーがクリックしたときの動作を定義できます。設定は **プライマリメトリック** と **セカンダリメトリック** Experience BuilderのMetricプロパティパネルのセクションで行います。各値は個別に設定され、何も **クリック時** インタラクションがない値は、そのままのクリック不可テキストとして表示されます。 Metricコンポーネントで使用できるインタラクションは次のとおりです： * [トーストを表示](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md) * [ナビゲート](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md) * [アラートモーダルを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md) * [確認ダイアログを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md) * [Flowダイアログを開く](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md) * [ダウンロード](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/download.md) ### プライマリメトリックのクリック ユーザーがプライマリメトリック値をクリックすると発火します。詳細ページへの移動、Flowの起動、またはプライマリ値に関連付けられたロジックの実行に使用します。 ### セカンダリメトリックのクリック ユーザーがセカンダリメトリック値をクリックすると発火します。たとえば、プライマリ値とは別のレポートにユーザーを送るなど、セカンダリ値に対して別のアクションをトリガーできます。 ## スタイリング {% tabs %} {% tab title="配置" %} 設定します **配置** と **セカンダリ配置** メトリックコンテンツの {% endtab %} {% tab title="ラベル" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト / 行数制限：** ラベルテキストのスタイルを設定します。 {% endtab %} {% tab title="説明" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト / 行数制限：** 説明テキストのスタイルを設定します。 {% endtab %} {% tab title="値" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト / 行の高さ：** プライマリ値のスタイルを設定します。 {% endtab %} {% tab title="接頭辞と接尾辞" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト：** プライマリの接頭辞と接尾辞のスタイルを設定します。 {% endtab %} {% tab title="セカンダリ値" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト：** セカンダリ値、接頭辞、接尾辞のスタイルを設定します。 {% endtab %} {% tab title="傾向" %} * **負 / 中立 / 正の色：** プライマリ値の傾向色を設定します。 * **セカンダリ傾向：** セカンダリ傾向の負、中立、正それぞれについて、色、背景色、角丸を設定します。 {% endtab %} {% tab title="アバター" %} * **アイコンの背景色 / 前景色、枠線、イニシャル、縦方向の配置：** メトリックアバターのスタイルを設定します。 {% endtab %} {% endtabs %} ## ユースケース ### 例1：取引先の成約商談金額 {% @arcade/embed url="" flowId="KEG70at1gkiT4HyGtaBj" %} 各取引先ページの中央に成約済み売上の合計を大きく表示し、パートナーユーザーがレコードを離れずに関係価値をすぐ把握できるようにします。 *** #### **実現できること** * **集約売上の可視化：** 取引先に関連付けられた成約済み商談金額の合計をリアルタイムで表示し、パートナーが顧客価値をすぐ把握できるようにします。 *** #### **設定方法** {% stepper %} {% step %} #### **コンポーネントをページに追加する** Account詳細ページのExperience BuilderにAX – Metricコンポーネントをドラッグします。 {% endstep %} {% step %} #### **データソースを設定する** * Valueフィールドをクリックし、次の設定でクエリを作成します： * オブジェクトAPI名： `Opportunity` * フィールド： `Amount` * 集計関数： `SUM` {% endstep %} {% step %} #### **フィルターを適用する** クエリを現在の取引先と成約済み商談のみに絞り込みます： * 取引先ID： `{!Item.Id}` * ステージ： `成約済み` {% endstep %} {% step %} #### **表示をカスタマイズする** * ラベルを次に設定： `成約金額` * アバターアイコンを次に設定： `standard:opportunity` {% endstep %} {% step %} #### **コンポーネントをプレビューする** * Experience Builderのプレビューを使って、公開前にメトリックが正しく表示されることを確認します。 {% endstep %} {% endstepper %} *** #### **リンク** {% content-ref url="/pages/924d004abfc4a926bc3a7a9525fc146d65fdba98" %} [AX - プロフィールカード](/experience-cloud/experience-cloud-ja/experience-components/ax-profile-card.md) {% endcontent-ref %} {% content-ref url="/pages/dc821f53af680f5554da87764b9ae7bc1cda96ed" %} [AX - レコード詳細](/experience-cloud/experience-cloud-ja/experience-components/ax-record-detail.md) {% endcontent-ref %} *** ### 例2：取引先の未解決ケース {% @arcade/embed url="" flowId="S4TjnIAEL1dUly6hcTtg" %} 取引先ページ上で、未解決ケースのリアルタイム件数をパートナーユーザーに直接表示し、サポート負荷をすばやく把握して、それに応じて対応の優先順位を付けられるようにします。 *** #### **実現できること** * **未解決ケース数をひと目で：** 取引先に関連付けられたアクティブなケースの総数を表示し、別の一覧に移動せずに顧客の健全性を把握できるようにします。 *** #### **設定方法** {% stepper %} {% step %} #### **コンポーネントをページに追加する** Account詳細ページのExperience BuilderにAX – Metricコンポーネントをドラッグします。 {% endstep %} {% step %} #### **データソースを設定する** * Valueフィールドをクリックし、次の設定でクエリを作成します： * オブジェクトAPI名： `ケース` * フィールド： `ID` * 集計関数： `COUNT` {% endstep %} {% step %} #### **フィルターを適用する** * クエリを現在の取引先と未解決ケースのみに絞り込みます： * 取引先ID： `{!Item.Id}` * 終了： `false` {% endstep %} {% step %} #### **表示をカスタマイズする** * ラベルを次に設定： `未解決ケース` {% endstep %} {% step %} #### **コンポーネントをプレビューする** * Experience Builderのプレビューを使って、公開前に件数が正しく表示されることを確認します。 {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-metric.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.