Quick Start Guide

Experience Builder gives you the frame of a site: a theme, a navigation, pages. Avonni Experience Components fill it with more than forty components (tables, maps, calendars, galleries, timelines, metrics) that read your Salesforce records and talk to each other on the page, configured in the property panel, with no code.

In the next 15 minutes you will build a Find a certified installer page for a customer portal: a table of installers read from your Accounts, and a map that shows the homes the selected installer has already equipped.

What you will have at the end: pick an installer, and the map shows its recent installations.

What you will learn

• How to find the AX components in Experience Builder and drop one on a page

• How to point a component at your Salesforce records with a Query data source

• How to make one component react to what the visitor picks in another

• What your site members need before they see the page

Before you start

• The Avonni Experience Components package is installed. Enable Lightning Web Security first, in Setup > Session Settings: without it the installation fails with LWC1503: Dynamic imports are not allowed.

• On an Aura site, also turn on Lightning Web Security in the site's Settings > Security & Privacy.

• You have a site to work on, and some records to show. This guide uses Accounts of type Installation Partner and their Contacts, each Contact carrying the address of an installed home.

---

Build the installer finder

1

Open the page in Experience Builder

In Setup, search for Digital Experiences, open All Sites, and click Builder next to your site. Pick the page from the menu at the top left (this guide uses Home), and add a two-column section where the table and the map will sit.

2

Find the AX components

Click the Components icon (the lightning bolt) in the left rail and type AX in the search box. Every Avonni component is listed under Custom Components, each with the AX - prefix.

The Components panel, filtered on AX.

The Screen Flow components are called Avonni Component, and the Experience ones AX - Component. Both packages can live in the same org.

3

Drop an AX - Data Table and name it

Drag AX - Data Table into the left column. Its property panel opens on the right. Two settings matter for this page:

• API Name: installers. This is the name the other components will use to read the row the visitor picks.

• Max Row Selection: 1, so the visitor picks one installer at a time.

The table's property panel: API Name and Max Row Selection.

4

Point it at your Accounts

Scroll the property panel down to Data Source and click Query.

1. Object API Name: Account.

2. Filters: Account Type equals Installation Partner, and Billing State/Province equals CO.

3. Additional fields: Account Phone. It is not a column, but the page will show it.

4. Under Data Mappings, click Add Columns and pick Account Name, Billing City and Account Description. Open each column to give it a shorter label: Installer, City, Specialty.

The table fills with your records right away, on the canvas.

A Query data source: the object, the filters, and the records on the canvas.

5

Drop an AX - Map that follows the table

Drag AX - Map into the right column and set its Data Source to Query:

1. Object API Name: Contact.

2. Filters: Account ID equals {{installers.selectedRecord.Id}}.

3. Under Data Mappings, set the pin's Title to the Contact's Title and its location to Mailing Latitude and Mailing Longitude.

That filter is the whole trick. installers is the table's API Name, selectedRecord is the row the visitor picked, and Id is the field to read from it. When the visitor picks another installer, the map runs its query again, with no code and no page reload.

The map's query, filtered on the row selected in the table.

6

Name the installer above the map

Drop an AX - Text Block above the map and write its text with the same syntax:

Recent installations
{{installers.selectedRecord.Name}}
{{installers.selectedRecord.Phone}}

Any field the table queried can be read this way, including the Phone you added as an additional field.

7

Preview it

Click Preview at the top right. Pick an installer: its name and phone number appear, and the map moves to the homes it has equipped.

Another installer, another set of pins: the page answers the visitor's choice.

8

Publish and give your members access

1. Click Publish.

2. Give your site members an Avonni license and the permission set, on the License Management page.

3. Make sure their profile can read the records: Account and Contact here. Avonni components follow your sharing settings and never go around them, so a member sees exactly the rows Salesforce lets them see. Learning the Basics has the details.

---

What you just used

Idea	Here	Reuse it for
AX components in Experience Builder	Data Table, Map, Text Block	More than forty components: Calendar, Gallery, Timeline, Metric, Kanban and the rest
Query data source	Installers from Account, installations from Contact	Any object your members can read, with filters and a sort order
Reactive components	{{installers.selectedRecord.Id}} in the map's filter	A table that drives a second table, a map that drives a text block, a list that drives a timeline
Your site, your brand	The SolarOps theme and navigation around the components	Every page of an Aura or LWR site

If something looks wrong

What you see	Likely cause	Fix
No AX components in the Components panel	The package is not installed, or the site's security level blocks them	Check the installation, then the message at the top of Custom Components
The table is empty	The filters match nothing, or the viewer cannot read the object	Test the filters on a record you know, and check the profile's access
The map does not move when a row is picked	The API Name in the filter does not match the table's	installers in {{installers.selectedRecord.Id}} must be exactly the table's API Name
The map shows a default area before any pick	Its query has no row to filter on yet	Expected. It fills as soon as the visitor picks a row

Still stuck? Reactive Components walks through the troubleshooting in more detail.

Keep going

Data Sources

Query, CMS Collection or Manual: every way to feed a component, and when to pick which.

Reactive Components

The selectedRecord syntax in full, the components that support it, and the troubleshooting.

Link a Data Table and a Map

The same table and map pattern, on Accounts, step by step.

All the components

Browse every AX component, from Accordion to Video, with its own page.

AX - Data Table

Sorting, search, inline editing, files on each row: everything the table can do for your members.

Portals and partner sites

Complete projects built end to end in a real org, with the configuration behind each one.