> 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/getting-started/quick-start-guide.md). # 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.

{% hint style="success" %} **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 {% endhint %} {% hint style="warning" %} **Before you start** * The [Avonni Experience Components package](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840) 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. {% endhint %} *** ## Build the installer finder {% stepper %} {% step %} #### 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. {% endstep %} {% step %} #### 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.

{% hint style="info" %} The Screen Flow components are called **Avonni** *Component*, and the Experience ones **AX -** *Component*. Both packages can live in the same org. {% endhint %} {% endstep %} {% step %} #### 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 AX - Data Table selected on the canvas, and its property panel with API Name set to installers and Max Row Selection set to 1 — The table's property panel: API Name and Max Row Selection.

{% endstep %} {% step %} #### 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.

The Data Source section of the AX - Data Table with Query selected, Object API Name Account, two filters (Account Type equals Installation Partner, Billing State equals CO) and the table on the canvas listing six Colorado installers — A Query data source: the object, the filters, and the records on the canvas.

{% endstep %} {% step %} #### 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 AX - Map selected, with its Data Source set to Query on Contact and a filter Account ID equals {{installers.selectedRecord.Id}}, and its Data Mappings below — The map's query, filtered on the row selected in the table.

{% endstep %} {% step %} #### 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. {% endstep %} {% step %} #### 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.

The same page with Pikes Peak Power selected in the table, its phone number above the map, and the map showing its installations around Colorado Springs — Another installer, another set of pins: the page answers the visitor's choice.

{% endstep %} {% step %} #### 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](/experience-cloud/getting-started/license-management.md) 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](/experience-cloud/getting-started/learning-the-basics.md) has the details. {% endstep %} {% endstepper %} *** ## 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](/experience-cloud/getting-started/reactive-components.md) walks through the troubleshooting in more detail. ## Keep going

		Cover image
Data Sources	Query, CMS Collection or Manual: every way to feed a component, and when to pick which.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJKfTje5RpchEizxF30XE%2Fxp-quickstart-cover-query.png?alt=media	Data Sources
Reactive Components	The selectedRecord syntax in full, the components that support it, and the troubleshooting.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FqzYl3awWaUu4HRWqiwau%2Fxp-quickstart-cover-reactive.png?alt=media	Reactive Components
Link a Data Table and a Map	The same table and map pattern, on Accounts, step by step.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FMmoOE8XAYZIOdgI60QN0%2Fxp-quickstart-cover-map.png?alt=media	Linking Data Table and Map for Dynamic Locations
All the components	Browse every AX component, from Accordion to Video, with its own page.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FEE7PAy1DqgMswl2R1cUu%2Fxp-quickstart-cover-components.png?alt=media	View All Components
AX - Data Table	Sorting, search, inline editing, files on each row: everything the table can do for your members.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FdYBnT69WbVXtAxk8Po6r%2Fwelcome-portal-data-table.png?alt=media	AX - Data Table
Portals and partner sites	Complete projects built end to end in a real org, with the configuration behind each one.	https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3KtJGDtgwDzuWVjJKH9n%2Fprojects-portals-and-partner-sites.png?alt=media	https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites

--- # 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 following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/getting-started/quick-start-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case. 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.

Data Sources

Reactive Components

Link a Data Table and a Map

All the components

AX - Data Table

Portals and partner sites