クイックスタートガイド
概要
このチュートリアルでは「My Active Opportunities」コンポーネントの作成方法を案内します。ここでは、次を組み合わせる方法を学びます： カード, データテーブル、および リアクティブ 指標 を使用して、アクティブな商談のフィルタ済みリストと主要な要約情報を表示します。これはコードなしで行う Avonni Dynamic Components の基本スキルを示します。
学べること
コンポーネントのドラッグ＆ドロップ。
Salesforce データ（商談）への接続。
作成 リアクティブ コンポーネント（データテーブルの選択に基づいて更新される指標）。
基本的なコンポーネント構成。
この例はやさしい導入を目的としています。これは 最も 複雑なコンポーネントではありませんが、より堅牢なソリューションを作成するために適用できる基本概念を示します。
ガイド付き手順
始める前に：インストールと設定
コンポーネントを作成する前に、次の手順を完了していることを確認してください：
インストール： 次をインストールしてください： Avonni Experiences Components パッケージ を AppExchange からインストールします。
ライセンス： コンポーネントを構築または使用するユーザに対して、次からライセンスを割り当ててください： 設定 > インストール済みパッケージ.
権限： 適切な権限セットを割り当ててください：
Avonni Dynamic Components User： Dynamic Components を使用するエンドユーザ向け。
Avonni Experience Cloud Components User： App Builder と Experience Site コンポーネントを使用するエンドユーザ向け。
Avonni Experiences Admin： コンポーネント構築者向け。
詳細は インストールページ を参照してください
重要な要件
Avonni Dynamic Components パッケージを正常にインストールするには、組織で次を実行してください： Lightning Web Security を有効にする ようにしてください。
ステップ 1：新しいダイナミックコンポーネントを作成する
まず、Salesforce のアプリランチャーから Avonni Components アプリを開きます。次に「すべてのコンポーネント」ページで「新規」をクリックして新しいダイナミックコンポーネントを作成します。コンポーネントにわかりやすい名前（例：「MyActiveOpportunities」）と任意の説明を付けてください。
ステップ 2：カードコンポーネントを追加してカスタマイズする
コンポーネントライブラリからカードコンポーネントをキャンバスにドラッグします。
カードを選択し、次のように設定します、
タイトルプロパティパネルで「My Active Opportunities」に。必要に応じて、次を使ってアイコンを追加します、
アイコン名プロパティ、またはスタイルタブを使ってスタイリングを調整します、
ステップ3: 「New Opportunity」ボタンを追加して設定する
カードのヘッダーにボタンコンポーネントを追加します。プロパティパネルで
ボタンの
ラベルを「New Opportunity」に設定します次を選択します、
バリアント、必要に応じてアイコンを追加します。次に、ボタンに「クリック時」インタラクションを追加します。インタラクションを次のように設定します、
ナビゲートへ、オブジェクトページ新しい商談レコード。
ステップ4: データテーブルを追加して設定する
Avonniデータテーブルコンポーネントを追加します 内部に カードのヘッダーの下に。
プロパティパネルで、次を設定します、
データソースに、Avonniクエリデータソース、およびレコードを取得するクエリを作成します。商談レコード。クエリをフィルタしてアクティブな商談のみを表示します（例：
StageName not in 'Closed Won, Closed Lost').最後に、データテーブルの
列を設定して希望するフィールドを表示します。名前、ステージ、金額など、表示したいフィールドを選択してください。
ステップ5: カラムコンポーネントを追加して設定する
コンポーネントライブラリからカラムコンポーネントを追加します の上に データテーブル、 内部に カード。これがメトリクスを保持します。
プラスボタンを3回クリックして3つのカラムを作成します。
次に、プロパティパネルで各カラムの
サイズに、4と水平揃えに、x-smallを等しい幅と間隔に設定します。
ステップ6: メトリックコンポーネントを追加する
作成した3つのカラムにプレースホルダのメトリックコンポーネントを追加します。コンポーネントライブラリからメトリックコンポーネントを見つけ、Columnsコンポーネント内の各カラムにそれぞれ1つずつドラッグします。
コピーと貼り付けボタンを使用して、複数の同一コンポーネントを作成するプロセスを高速化できます。これによりコンポーネントをより迅速に作成できます。
ステップ7: データを表示するようにMetricコンポーネントを構成する。
Metricコンポーネントを次のように表示するよう構成します リアクティブ データテーブルの選択に基づく合計。1つのMetricを設定して、他のものにも繰り返し適用します。
Metricコンポーネントを選択します。
を設定します データソース に、
Avonniクエリデータソース。クエリを作成します:オブジェクト:
商談フィールド: 次のみ 選択
金額.集計関数:
SUM
を追加します リアクティブフィルター クエリに対して:
フィールド:
AccountId演算子:
in値:
!DataTableApiName.selectedRowsKeyValue(置き換えてくださいDataTableApiNameをあなたのデータテーブルのAPI名に)。
Metricの
ラベル（例：「合計金額」）を設定し、書式を調整します。他のMetricについても繰り返し、必要に応じてと集計関数を変更します。
ラベルおよび集計関数を必要に応じて変更します。
ステップ8: Metricコンポーネントのスタイル設定
ステップ9: ダイナミックコンポーネントを有効化してページに追加する
おめでとうございます！最初のAvonniダイナミックコンポーネントを作成しました。次にそれを有効化してSalesforceのページに追加し、ユーザーに表示できるようにします。
コンポーネントを有効化する
Avonniダイナミックコンポーネントが有効化されていることを確認してください。有効化されたコンポーネントのみがページに追加できます。
対象ページに移動する
Salesforceで、新しいコンポーネントを表示したい特定のアプリページまたはレコードページに移動します。例えば、特定の取引先レコードの「Accounts」タブを開くことがあります。
Lightning App Builderを開く
をクリックします 設定 ギアアイコン（通常Salesforceの右上隅にあります）。
を選択します ページを編集。これでLightning App Builderが開き、ページレイアウトをカスタマイズできます。
コンポーネントを見つける
利用可能なコンポーネントが一覧表示されているLightning App Builderの左側パネルを確認します。
まで下にスクロールします カスタム セクション。あなたのAvonniダイナミックコンポーネントはここに表示されます。
ドラッグ＆ドロップ
Avonni ダイナミックコンポーネントをリストからページレイアウトの目的の場所へクリックしてドラッグします。指定されたいずれかのコンポーネント領域に配置できます。
選択を確認
コンポーネントを配置すると、App Builder の右側にプロパティパネルが表示されます。を選択してください 特定の 利用可能なリストから表示したい Avonni ダイナミックコンポーネントを選びます。特に名前が似ている複数の Avonni コンポーネントがある場合、正しいコンポーネントが読み込まれることを保証します。
ページを保存して有効化する（重要！）：
クリック 保存 App Builder で。
スキルを次のレベルへ！
おめでとうございます！ クイックスタートを終え、動作する Avonni ダイナミックコンポーネントが手に入りました。次は機能の全範囲を探りましょう。
ガイド付きプロジェクトをチェック してマスタービルダーになりましょう👇
Avonni Projects次のステップ：
探索する コンポーネントライブラリ全体 何が可能かを見るために
Trailblazer コミュニティに参加 他の人が何を作っているかを見るために
行き詰まったり質問がありますか？
このチュートリアル中に問題が発生した場合や、作成したものを見せたい場合：
参加する Trailblazer コミュニティグループ そこであなたは：
フィードバックのためにコンポーネントのスクリーンショットを共有する
他の人が作成したこのチュートリアルのバリエーションを見る
学習の次のステップについて質問する
次のダイナミックコンポーネントプロジェクトのためのインスピレーションを得る
多くのビルダーがコミュニティで最初のコンポーネントを共有しています—同じ道を歩む他の人から励ましを受けたり学んだりするのに最適な方法です！
最終更新
役に立ちましたか？