Ctrlk
YouTube ChannelSchedule a CallJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

3

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.

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.

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

Name,StageName,Amount,CloseDate

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

Order By

CloseDate DESC

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

4

Enable Editing and Filtering

Editable Fields

StageName,CloseDate

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

Filterable Fields

StageName,OwnerId

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

Search Options

  • Toggle All Columns Searchable to On

  • This enables keyword search across all visible columns

5

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.

6

Set Display Options

Show Pagination: On Number of Records per Page: 10

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

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 layout with clear, icon-labeled 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

Include Additional Fields

Refine Your Filter Logic

This shows only open Opportunities.

Enable More Editing

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

Still stuck?

Join our Trailblazer Community Group 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

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.

Last updated

Was this helpful?