クイックスタートガイド

Experience Builder はサイトの枠組み、つまりテーマ、ナビゲーション、ページを提供します。Avonni Experience Components は、Salesforce レコードを読み取り、ページ上で互いに連携する 40 以上のコンポーネント（テーブル、地図、カレンダー、ギャラリー、タイムライン、メトリクスなど）でそれを埋め、プロパティパネルで設定でき、コードは不要です。

次の15分で、あなたは 認定インストーラーを検索する 顧客ポータル用のページを作成します。つまり、Accounts から読み取ったインストーラーの表と、選択したインストーラーがすでに設置した住宅を表示する地図です。

最後にできること: インストーラーを選ぶと、地図にその最近の設置先が表示されます。

学習内容

• Experience Builder で AX コンポーネントを見つけて、ページに1つ配置する方法
• Query データソースを使って、コンポーネントを Salesforce レコードに接続する方法
• あるコンポーネントを、訪問者が別のコンポーネントで選んだ内容に反応させる方法
• サイトのメンバーがページを見る前に必要なもの

始める前に

• その Avonni Experience Components パッケージ がインストールされています。まず Lightning Web Security を有効にし、 設定 > セッション設定で、これがないとインストールは LWC1503: Dynamic imports are not allowed.
• Aura サイトでは、さらに Lightning Web Security サイトの 設定 > セキュリティとプライバシー.
• 作業するサイトと、表示するいくつかのレコードがあります。このガイドでは、タイプが Installation Partner である Accounts とその Contacts を使い、各 Contact には設置済み住宅の住所が入っています。

---

インストーラー検索を作成する

1

Experience Builder でページを開く

「 設定」で、 Digital Experiencesを検索し、 All Sitesを開いて、 Builder をサイトの横でクリックします。左上のメニューからページを選び（このガイドでは Homeを使います）、テーブルと地図を配置する2カラムのセクションを追加します。

2

AX コンポーネントを見つける

左側のサイドバーにある コンポーネント アイコン（稲妻）をクリックして、検索ボックスに AX と入力します。すべての Avonni コンポーネントは カスタムコンポーネントの下に一覧表示され、各項目の先頭に AX - プレフィックスが付いています。

AX でフィルタされたコンポーネントパネル。

Screen Flow のコンポーネントは Avonni Componentと呼ばれ、Experience 用のものは AX - Componentです。どちらのパッケージも同じ org に共存できます。

3

AX - Data Table を配置して

ドラッグし、 AX - Data Table を左カラムへドラッグします。右側にプロパティパネルが開きます。このページでは2つの設定が重要です:

• API 名: installers。これは、訪問者が選んだ行を他のコンポーネントが読み取るために使う名前です。
• 最大行選択数: 1、これにより訪問者は一度に1つのインストーラーだけを選べます。

テーブルのプロパティパネル: API 名と最大行選択数。

4

Accounts を参照するように設定する

プロパティパネルを データソース までスクロールして Query.

1. オブジェクト API 名: Account.
2. フィルター: Account Type equals Installation Partnerにし、 Billing State/Province equals CO.
3. 追加フィールド: Account Phone。これは列ではありませんが、ページには表示されます。
4. の下の データマッピングで、 列を追加 をクリックし、Account Name、Billing City、Account Description を選びます。各列を開いて短いラベルを付けます: Installer、City、Specialty。

テーブルはキャンバス上で、すぐにレコードで埋まります。

Query データソース: オブジェクト、フィルター、そしてキャンバス上のレコード。

5

テーブルに連動する AX - Map を配置する

ドラッグし、 AX - Map を右カラムにドラッグし、その データソース を Query:

1. オブジェクト API 名: Contact.
2. フィルター: Account ID equals {{installers.selectedRecord.Id}}.
3. の下の データマッピングに設定し、ピンの Title を Contact の Title に、位置を Mailing Latitude と Mailing Longitude.

に設定します。 installers そのフィルターがすべての鍵です。 はテーブルの API 名で、 selectedRecord は訪問者が選んだ行、そして はそこから読み取るフィールドです。訪問者が別のインストーラーを選ぶと、地図はコードもページの再読み込みもなしに、もう一度クエリを実行します。

テーブルで選択された行でフィルタされた地図のクエリ。

6

地図の上にインストーラー名を表示する

を配置し、 AX - Text Block を地図の上にドラッグして、同じ構文でテキストを書きます:

最近の設置
{{installers.selectedRecord.Name}}
{{installers.selectedRecord.Phone}}

テーブルが検索した任意のフィールドはこの方法で読み取れます。追加フィールドとして追加した Phone も含まれます。

7

プレビューする

クリック プレビュー を右上で。インストーラーを選ぶと、その名前と電話番号が表示され、地図はそのインストーラーが設置した住宅へ移動します。

別のインストーラー、別のピンのセット: ページは訪問者の選択に応えます。

8

公開してメンバーにアクセス権を付与する

1. クリック 公開.
2. サイトのメンバーに Avonni ライセンスと権限セットを付与します。場所は ライセンス管理 ページです。
3. プロファイルがレコードを読み取れることを確認してください: ここでは Account と Contact です。Avonni コンポーネントは共有設定に従い、それを迂回しないため、メンバーは Salesforce が許可した行だけを正確に見ることができます。 基本を学ぶ に詳細があります。

---

今使ったもの

アイデア	ここでは	これを再利用する場面
Experience Builder の AX コンポーネント	データテーブル、地図、テキストブロック	40以上のコンポーネント: カレンダー、ギャラリー、タイムライン、メトリクス、カンバンなど
Query データソース	Account からのインストーラー、Contact からの設置情報	メンバーが読み取れる任意のオブジェクト。フィルターと並び順付き
リアクティブなコンポーネント	{{installers.selectedRecord.Id}} 地図のフィルター内の	2つ目のテーブルを駆動するテーブル、テキストブロックを駆動する地図、タイムラインを駆動するリスト
あなたのサイト、あなたのブランド	コンポーネントを囲む SolarOps テーマとナビゲーション	Aura または LWR サイトのすべてのページ

何かがおかしく見える場合

見えているもの	考えられる原因	修正方法
コンポーネントパネルに AX コンポーネントがない	パッケージがインストールされていない、またはサイトのセキュリティレベルがブロックしている	インストールを確認し、その後 カスタムコンポーネント
テーブルが空	フィルターが一致しないか、閲覧者がそのオブジェクトを読み取れない	既知のレコードでフィルターをテストし、プロファイルのアクセス権を確認する
行を選んでも地図が動かない	フィルター内の API 名がテーブルのものと一致していない	installers の {{installers.selectedRecord.Id}} はテーブルのものと完全に一致している必要がある API 名
何も選ぶ前に地図に既定の領域が表示される	まだフィルターする行がクエリにない	想定どおりです。訪問者が行を選ぶとすぐに埋まります

まだ詰まっていますか？ Reactive Components では、トラブルシューティングをさらに詳しく説明しています。

続ける

データソース

Query、CMS Collection、Manual: コンポーネントにデータを供給するすべての方法と、どれを選ぶべきか。

Reactive Components

selectedRecord 構文の完全版、対応コンポーネント、トラブルシューティング。

データテーブルと地図を連携させる

同じテーブルと地図のパターンを、Accounts で、段階的に説明します。

すべてのコンポーネント

Accordion から Video まで、各 AX コンポーネントを専用ページ付きで閲覧できます。

AX - Data Table

並び替え、検索、インライン編集、各行のファイル: テーブルがメンバーのためにできることのすべて。

ポータルとパートナーサイト

実際の org で一から最後まで構築した完全なプロジェクトと、それぞれの背後にある設定。