Quickstart Guide

Get up and running with Avonni components in minutes! This guide walks you through creating your first component with a practical, real-world example.

What You'll Build

By the end of this guide, you'll have created a Data Table component on an Account record page that displays related Opportunities with filtering, editing, and search capabilities. This example demonstrates the core concepts you'll use across all Avonni components.

Prerequisites

• Avonni package installed in your Salesforce org

• Lightning App Builder access

• Permission to edit Lightning pages

Install the Components

Step-by-Step Setup

1

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

2

Add the 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

3

Configure the Data Source

These settings tell the component what data to display:

Object API Name

Copy

Opportunity

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

Filter

Copy

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.

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.

Column Field Names

Copy

Name,StageName,Amount,CloseDate

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

Order By

Copy

CloseDate DESC

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

4

Enable Editing and Filtering

Editable Fields

Copy

StageName,CloseDate

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

Filterable Fields

Copy

StageName,OwnerId

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

Search Options

• Toggle Allow Search on All Columns to On

• This enables keyword search across all visible columns

5

Configure the Header

Header Title

Copy

Related Opportunities

Header Caption

Copy

Opportunities for this Account

Header Icon Name

Copy

standard:opportunity

This adds the standard Opportunity icon next to the title.

6

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.

7

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

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 for Visual Pipeline Management

• Object: Opportunity

• Filter: AccountId = '{{Record.Id}}' AND IsClosed = false

• Group Field: StageName

• Title Field: Name

• Summary Field: Amount

Calendar for Activity Tracking

• Object: Event

• Filter: WhatId = '{{Record.Id}}'

• Title Field: Subject

• From Field: StartDateTime

• To Field: EndDateTime

Metric 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

Component shows no data

• Verify the filter syntax is correct

• Check that the field API names are spelled correctly

• Ensure the current record has related data to display

Fields not appearing

• 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

Editing not working

• Ensure fields in editableFields are actually editable

• Verify users have permission to edit those fields

• Check that the fields support inline editing

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.