クイックスタートガイド
概要
このチュートリアルでは「My Active Opportunities」コンポーネントの作成手順を案内します。ここでは、次を組み合わせる方法を学びます： カード, データテーブル、および リアクティブな メトリクス を使用して、アクティブな商談のフィルタリングされた一覧と主要な要約情報を表示します。これはコード不要での Avonni Dynamic Components のコアスキルを示す例です。
学べること
コンポーネントのドラッグ＆ドロップ。
Salesforce データ（商談）への接続。
作成 リアクティブな コンポーネント（データテーブルの選択に応じて更新されるメトリクス）。
基本的なコンポーネント構成。
この例は導入としてやさしく設計されています。完全に 最も 複雑なコンポーネントではありませんが、より堅牢なソリューションを作成する際に適用できるコアコンセプトを示します。
ガイド付きステップ
始める前に：インストールとセットアップ
コンポーネントを作成する前に次の手順を完了していることを確認してください：
インストール： AppExchange から Avonni Dynamic Components パッケージをインストールします。
ライセンス： コンポーネントを作成または使用するユーザーにライセンスを割り当てます（通常は License Management Application を介して）。
権限： 適切な権限セットを割り当てます：
Avonni Dynamic Components User: エンドユーザー向け。Avonni Dynamic Components Admin: コンポーネント作成者向け。詳細についてはこのページ を参照してください。
重要な要件
Avonni Dynamic Components パッケージを正常にインストールするには、次を行ってください： Lightning Web Security を有効にする 組織で。
ステップ 1：新しいダイナミックコンポーネントを作成する
まず、Salesforce のアプリランチャーから Avonni Components アプリを開きます。その後、「All Components」ページで「New」をクリックして新しいダイナミックコンポーネントを作成します。コンポーネントにわかりやすい名前（例：「MyActiveOpportunities」）と任意の説明を付けてください。
ステップ 2：カードコンポーネントの追加とカスタマイズ
コンポーネントライブラリからカードコンポーネントをキャンバスにドラッグします。
カードを選択し、プロパティパネルで
タイトルを「My Active Opportunities」に設定します。必要に応じて、
アイコン名プロパティを使用してアイコンを追加したり、スタイルタブでスタイリングを調整したりできます。
ステップ 3：「新規商談」ボタンの追加と設定
カードのヘッダーにボタンコンポーネントを追加します。プロパティパネルで
ボタンの
次のように設定しますを「New Opportunity」に設定します。次に、
バリアントを選択し、必要に応じてアイコンを追加します。その後、ボタンに「On Click」インタラクションを追加します。インタラクションを次のように設定します：
ナビゲート先へ、オブジェクトページへ、新しい商談
レコード。
ステップ 4：データテーブルの追加と設定 カードのヘッダーの下、カード内に Avonni データテーブルコンポーネントを追加します。 カード内のヘッダーの下に、
プロパティパネルで、
データソース最小（Min）Avonni Query Data Sourceに設定し、レコードを取得するクエリを作成します。新しいレコードを取得します。クエリをフィルタしてアクティブな商談のみを表示するようにします（例：
StageName not in 'Closed Won, Closed Lost').）。
最後に、データテーブルの列
を設定して表示したいフィールドを表示します。名前、ステージ、金額などのフィールドを選択してください。
ステップ 5：Columns コンポーネントの追加と設定 コンポーネントライブラリから Columns コンポーネントをデータテーブルの 上に カードのヘッダーの下、カード内に Avonni データテーブルコンポーネントを追加します。 カードの上に追加します。ここにメトリクスを配置します。
プラスボタンを 3 回クリックして 3 列を作成します。
次に、プロパティパネルで各列の
サイズ最小（Min）4値を参照するフィルターを追加します：横方向の整列（Horizontal Align）最小（Min）を設定し、x-small
等しい幅と間隔にします。
ステップ 6：メトリクスコンポーネントの追加
作成した 3 列にプレースホルダのメトリクスコンポーネントを追加します。コンポーネントライブラリからメトリクスコンポーネントを見つけ、Columns コンポーネント内の各列に 1 つずつドラッグします。
コピー＆ペーストボタンを使用して同一の複数コンポーネントを素早く作成できます。これによりコンポーネントの構築が速くなります。
ステップ 7：メトリクスコンポーネントをデータ表示に設定する リアクティブな メトリクスコンポーネントを、データテーブルの選択に基づく合計を表示するように設定します。1 つのメトリクスを設定してから他も繰り返します。
メトリクスコンポーネントを選択します。
例1：価格範囲フィルター データソース 最小（Min）
Avonni Query Data Source。クエリを作成：オブジェクト：
新しいフィールド： 次のみに 選択
金額（Amount）.集計関数：
SUM
および リアクティブフィルター をクエリに追加します：
フィールド：
AccountId演算子：
in値：
!DataTableApiName.selectedRowsKeyValue（DataTableApiName をあなたのデータテーブルの API 名に置き換えてください）。DataTableApiNameを、あなたのデータテーブルの API 名に置き換えます。
メトリクスの
次のように設定します（例：「Total Amount」）を設定し、表示形式を調整します。他のメトリクスについても同様に繰り返し、必要に応じて
次のように設定しますおよび集計関数を変更します。
ステップ 8：メトリクスコンポーネントのスタイル設定
ステップ 9： ダイナミックコンポーネントを有効化してページに追加する
おめでとうございます！最初の Avonni Dynamic Component を作成しました。次に、それを有効化して Salesforce のページに追加し、ユーザーが表示できるようにします。
コンポーネントを有効化する
Avonni Dynamic Component が有効化されていることを確認してください。有効化されたコンポーネントのみページに追加できます。
対象ページに移動する
Salesforce で、新しいコンポーネントを表示したい特定のアプリページやレコードページに移動します。例として、特定の取引先レコードを開いて "Accounts" タブを開くなどがあります。
Lightning App Builder を開く
歯車アイコン（通常 Salesforce の右上にあります）をクリックします。 設定 ギアアイコン（通常 Salesforce の右上にあります）。
を選択し、 ページを編集（Edit Page）を選択します。これにより Lightning App Builder が開き、ページレイアウトをカスタマイズできます。
コンポーネントを見つける
Lightning App Builder の左側パネルに利用可能なコンポーネントが一覧表示されています。
下にスクロールして、 カスタム（Custom） セクションを探します。あなたの Avonni Dynamic Component はここに表示されます。
ドラッグ＆ドロップ
リストから Avonni Dynamic Component をクリックしてドラッグし、ページレイアウト上の目的の場所に配置します。指定されたコンポーネント領域のいずれにも配置できます。
選択を確認する
コンポーネントを配置すると、App Builder の右側にプロパティパネルが表示されます。利用可能なリストから表示したい特定の Avonni Dynamic Component を選択します。これにより、同名に近い複数の Avonni コンポーネントがある場合でも正しいコンポーネントが読み込まれます。 特定の Avonni Dynamic Component を選択します。
ページを保存して有効化する（重要！）：
App Builder で 保存 をクリックします。
スキルを次のレベルへ！
おめでとうございます！クイックスタートを終え、動作する Avonni Dynamic Components を手に入れました。次は全機能を探検する番です。
ガイド付きプロジェクトをチェックして マスタービルダーになりましょう 👇
Avonni Projects最終更新
役に立ちましたか？