# Quickstart Guide

***

Get started with AX App Builder Components in minutes. This guide walks you through building your first component using a practical example.

## **What You'll Build**

A Data Table on an Account record page that displays related Opportunities with filtering, inline editing, and search. This example covers the core setup patterns you'll use across all AX components in Lightning App Builder.

***

## Prerequisites

* [Avonni package installed](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840\&channel=recommended) in your Salesforce org
* Lightning App Builder access
* Permission to edit Lightning pages

<a href="https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840" class="button primary" data-icon="up-right-from-square">Install the Components</a>&#x20;

***

## Step-by-Step Setup

{% stepper %}
{% step %}

### Navigate to Lightning App Builder

* Go to **Setup** > **Lightning App Builder**
* Find your Account record page or create a new one
* Click **Edit** to open the page in the builder
  {% endstep %}

{% step %}

### Add the AX - Data Table Component

* In the component palette, search for "**AX - Data Table**"
* Drag the component onto your page layout
* Click on the component to open the property panel

<figure><img src="/files/sGsEEgZloob4SKO9TClb" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Configure the Data Source

These settings tell the component what data to display:

**Object API Name**

```
Opportunity
```

This tells the component to pull data from the Opportunity object.

<figure><img src="/files/RHRjAMYGgA4bLS78LMFf" alt=""><figcaption></figcaption></figure>

**Filter**

```
AccountId = '{{Record.Id}}'
```

This dynamic filter shows only Opportunities related to the current Account. The `{{Record.Id}}` syntax automatically references the current Account's ID.

{% hint style="warning" %}

## Important

**Notice the single quotes** around the dynamic reference. This follows SOQL syntax rules where text and ID values must be enclosed in single quotes. The filter essentially becomes a SOQL WHERE clause, so it must follow proper SOQL formatting.
{% endhint %}

<figure><img src="/files/t1pQfbXNL97uBkpp1h56" alt=""><figcaption></figcaption></figure>

**Column Field Names**

```
Name,StageName,Amount,CloseDate
```

This comma-separated list defines which fields appear as columns in your table, in the order specified.

<figure><img src="/files/5jaDM1mUFdVn9YUMYI6J" alt=""><figcaption></figcaption></figure>

**Order By**

```
CloseDate DESC
```

This sorts Opportunities by Close Date, showing the most recent first.

<figure><img src="/files/ptjJPD5BNUQzMudKsUzp" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Enable Editing and Filtering

**Editable Fields**

```
StageName,CloseDate
```

Users can edit these fields directly in the table without navigating away.

<figure><img src="/files/Rs6hx8PRHrYutojYDqbN" alt=""><figcaption></figcaption></figure>

**Filterable Fields**

```
StageName,OwnerId
```

This creates filter controls above the table for these specific fields.

<figure><img src="/files/vcGQhASaYRSfs3sppfqV" alt=""><figcaption></figcaption></figure>

**Search Options**

* Toggle **Allow Search on All Columns** to **On**
* This enables keyword search across all visible columns
  {% endstep %}

{% step %}

### Configure the Header

**Header Title**

```
Related Opportunities
```

**Header Caption**

```
Opportunities for this Account
```

**Header Icon Name**

```
standard:opportunity
```

This adds the standard Opportunity icon next to the title.
{% endstep %}

{% step %}

### Set Display Options

**Show Pagination**: **On** **Number of Items per Page**: **10**

This prevents the table from becoming too long and improves performance.

**Display as Card**: This component is wrapped in a styled card for better visual separation.
{% endstep %}

{% step %}

### Save and Test

* Click **Save** in Lightning App Builder
* Click **Activate** if this is a new page
* Navigate to an Account record to see your component in action
  {% endstep %}
  {% endstepper %}

### What You've Created

Your Data Table now provides:

* **Dynamic Data**: Automatically shows Opportunities for the current Account
* **Interactive Editing**: Users can update Stage and Close Date without leaving the page
* **Powerful Filtering**: Built-in filters for Stage and Owner
* **Search Capability**: Find specific Opportunities by keyword
* **Professional Appearance**: Clean, card-based layout with clear headers
* **Performance**: Pagination prevents slow loading with large datasets

***

## Understanding the Key Concepts

### Dynamic Record References

The filter `AccountId = '{{Record.Id}}'` demonstrates how components automatically adapt to different records. When users view Account A, they see Opportunities for Account A. When they view Account B, they see Opportunities for Account B.

### SOQL-Style Configuration

The field specifications like `Name,StageName,Amount,CloseDate` mirror how you'd write a SOQL SELECT statement. This approach gives you precise control over data display while staying familiar to Salesforce developers.

### Field-Level Security

Your component automatically respects Salesforce permissions. If a user can't see the Amount field in standard Salesforce, they won't see it in your Data Table either.

***

## Expanding Your Component

Now that you have a working Data Table, try these enhancements:

#### Add More Filters

```
StageName,OwnerId,Type
```

#### Include Additional Fields

```
Name,StageName,Amount,CloseDate,Probability,NextStep
```

#### Refine Your Filter Logic

```
AccountId = '{{Record.Id}}' AND (StageName != 'Closed Won' AND StageName != 'Closed Lost')
```

This shows only open Opportunities.

#### Enable More Editing

```
StageName,CloseDate,NextStep,Probability
```

***

## Next Steps: Try Other Components

Apply these same concepts to other Avonni components:

#### [Kanban Board](/app-builder-components/app-builder-components/ax-kanban.md) for Visual Pipeline Management

* **Object**: Opportunity
* **Filter**: `AccountId = '{{Record.Id}}' AND IsClosed = false`
* **Group Field**: StageName
* **Title Field**: Name
* **Summary Field**: Amount

#### [Calendar](/app-builder-components/app-builder-components/ax-calendar.md) for Activity Tracking

* **Object**: Event
* **Filter**: `WhatId = '{{Record.Id}}'`
* **Title Field**: Subject
* **From Field**: StartDateTime
* **To Field**: EndDateTime

#### [Metric](/app-builder-components/app-builder-components/ax-metric.md) for Key Performance Indicators

* **Object**: Opportunity
* **Filter**: `AccountId = '{{Record.Id}}' AND StageName = 'Closed Won'`
* **Field**: Amount
* **Aggregate Function**: SUM
* **Label**: Total Closed Revenue

***

## Troubleshooting Common Issues

<details>

<summary><strong>Component shows no data</strong></summary>

* Verify the filter syntax is correct
* Check that the field API names are spelled correctly
* Ensure the current record has related data to display

</details>

<details>

<summary><strong>Fields not appearing</strong></summary>

* Confirm field API names match exactly (case-sensitive)
* Verify users have permission to view those fields
* Check that the fields exist on the specified object

</details>

<details>

<summary><strong>Editing not working</strong></summary>

* Ensure fields in `editableFields` are actually editable
* Verify users have permission to edit those fields
* Check that the fields support inline editing

</details>

<details>

<summary><strong>Still stuck?</strong></summary>

Join our [**Trailblazer Community Group**](https://trailhead.salesforce.com/trailblazer-community/groups/0F9KX000000iFxO0AU?tab=discussion\&sort=LAST_MODIFIED_DATE_DESC) where you can:

* Post screenshots of your configuration for troubleshooting help
* See how others have solved similar challenges
* Get answers from both experienced users and our team
* Share your successful implementation once you've figured it out!

Many common setup questions have already been answered in the community, and you'll often find solutions faster by searching past discussions or asking the group

</details>

***

## Best Practices Learned

From this exercise, you've learned the essential patterns used across all Avonni components:

1. **Start with the data source** (Object API Name)
2. **Filter to relevant records** using SOQL WHERE syntax
3. **Specify fields** in comma-separated format
4. **Use dynamic references** with `{{Record.FieldName}}` syntax
5. **Configure headers** for user context
6. **Test with real data** to verify functionality

These same principles apply whether you're building a Gallery of product images, a Map of customer locations, or a Timeline of case activities. Master this Data Table example, and you'll be ready to implement any Avonni component effectively.


---

# Agent Instructions: 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 current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/app-builder-components/getting-started/quickstart-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.