YouTube ChannelSchedule a CallSubscribe for Updates

Learn the Basics

Welcome to the Avonni App Builder components! This guide covers the essential knowledge you need to start using these powerful components effectively in your Salesforce environment.

Understanding Dynamic Data References

One of the most powerful features of Avonni components is the ability to dynamically reference data from the current record using a simple syntax.

The {{Record.FieldName}} Syntax

When configuring components on Lightning Record Pages, you can dynamically insert values from the current record using this syntax:

{{Record.FieldApiName}}

Replace FieldApiName with the exact API name of any field on the current object. The system automatically retrieves and displays that field's value at runtime.

💡 You can also access related fields through lookup relationships using dot notation

{{Record.LookupField__r.FieldName}}

Examples:

  • Show related Opportunities on an Account page: AccountId = '{{Record.Id}}' (displays only Opportunities related to the current Account)

  • Display account name on an Opportunity page: {{Record.Account.Name}} (shows the related account's name)

  • Access manager from a custom project lookup: {{Record.Project__r.Manager__c}} (displays the project manager's name)

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.

This syntax is only available on Lightning Record Pages and works across most component properties that accept string values.

Working with SOQL-Style Configurations

Most Avonni components require you to think like you're writing SOQL queries when configuring their properties. This approach provides powerful flexibility but requires understanding a few key concepts.

Filtering Data

The filter property on most components works like a SOQL WHERE clause. You write conditions to limit which records are displayed.

Examples:

  • Status = 'Active'

  • Priority__c = 'High' AND OwnerId = {{Record.OwnerId}}

  • CreatedDate = LAST_N_DAYS:30

Specifying Fields

Many components ask you to specify field names in a comma-separated format, similar to the SELECT clause in SOQL.

Example: For a Data Table showing contacts, you might enter:

Name,Email,Phone,Title

This tells the component to display these four fields as columns in your table.

Sorting Data

The orderBy property works like SOQL's ORDER BY clause:

  • Name (ascending by default)

  • CreatedDate DESC (descending order)

  • Priority__c, Name (multiple fields)

Component Categories and When to Use Them

Display Components

Gallery, Image, Video, Audio, Barcode: Use these to showcase visual or media content on record pages. Perfect for product catalogs, training materials, or documentation.

Data Visualization Components

Data Table, List, Kanban, Timeline: Choose based on how users need to interact with your data:

  • Data Table: When users need to sort, filter, and export tabular data

  • List: For card-based browsing of records with rich formatting

  • Kanban: For visual workflow management with drag-and-drop

  • Timeline: For chronological views of events and activities

Interactive Components

Calendar, Map, Progress Indicator: Use these when location, time, or process status are key to your business process.

Summary Components

Metric, Pivot Table, Tags: Perfect for dashboards and KPI tracking. Use Metric for single values, Pivot Table for cross-tabulated analysis, and Tags for categorization.

Utility Components

Alert, Record Detail: Essential for user communications and record management.

Best Practices for Getting Started

Start Simple

Begin with basic configurations before adding complex filters or multiple field mappings. Most components work well with minimal setup.

Use Meaningful Headers

Always configure headerTitle and headerIconName properties to give users context about what they're viewing.

Test Your Filters

When using the {{Record.FieldName}} syntax in filters, test with different record types to ensure your logic works across all scenarios.

Leverage Field-Level Security

Components respect Salesforce field-level security and sharing rules. If a user can't see a field in Salesforce, they won't see it in the component either.

Plan Your Layouts

Consider how components will look on different screen sizes. Use the displayAsCard property to create visual separation when placing multiple components on the same page.

Common Patterns and Examples

Showing Related Records

Most components can display records related to the current page record:

Filter: AccountId = '{{Record.Id}}' (for Contacts related to an Account) Filter: WhatId = '{{Record.Id}}' (for Events related to any record)

Building Context-Aware Dashboards

Use filters to show only relevant data:

Open Opportunities: StageName != 'Closed Won' AND StageName != 'Closed Lost' My Records: OwnerId = {{Record.OwnerId}} Recent Activity: CreatedDate = LAST_N_DAYS:7

Creating Interactive Workflows

Combine components for powerful user experiences:

  1. Use Kanban for stage management

  2. Add Data Table for detailed record lists

  3. Include Metric components for key performance indicators

  4. Use Alert components for important notifications

Working with Different Data Sources

Standard Objects

Configure sObjectApiName with standard object names like Account, Contact, Opportunity, Case.

Custom Objects

Use the full API name including the __c suffix: Custom_Project__c, Survey_Response__c.

Files and Documents

For components that display files (like Gallery), you have three main approaches:

  1. Custom URL fields: Store image URLs in custom text fields

  2. ContentDocument: Display files from anywhere in your org

  3. ContentDocumentLink: Show files attached to specific records

Troubleshooting Common Issues

Component Not Showing Data

  • Check that your filter syntax is valid SOQL

  • Verify field API names are spelled correctly

  • Ensure users have permission to view the specified fields and records

Dynamic References Not Working

  • Confirm you're using the correct field API name

  • Verify the syntax includes curly braces: {{Record.FieldName}}

  • Remember, this only works on Lightning Record Pages

Performance Considerations

  • Use the limit property to control how many records are retrieved

  • Be specific with your filters to reduce data volume

  • Consider pagination for components displaying large datasets

Next Steps

Once you're comfortable with these basics:

  1. Explore component-specific features like drag-and-drop in Kanban

  2. Experiment with advanced filtering techniques

  3. Combine multiple components to create comprehensive dashboards

  4. Leverage export capabilities in Data Table for reporting workflows

The Avonni components are designed to be intuitive while providing enterprise-level functionality. Start with simple configurations and gradually add complexity as your users' needs evolve.

Last updated

Was this helpful?