# Component Properties Reference Quick reference guide for common property patterns used across Avonni App Builder Components. **Related Pages:** * [**Core Concepts**](/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) - Learn fundamental principles * [**Common Use Case Patterns**](/app-builder-components/getting-started/understanding-the-essentials/common-use-case-patterns.md) - Pre-built configuration examples * [**Troubleshooting & FAQs**](/app-builder-components/resources/troubleshooting-and-faqs.md) - Solutions to common problems *** ## Filter Property The `filter` property uses SOQL WHERE clause syntax to limit which records appear in a component. ### Basic Syntax ``` FieldApiName Operator Value ``` ### Common Operators | Operator | Description | Example | | -------- | ----------------------- | --------------------------------------------- | | = | Equals | Status = 'Active' | | != | Not Equls | Status != 'Closed' | | > | Greather Than | Amount > 10000 | | < | Less Than | Amount < 5000 | | >= | Great Than or equal | CloseDate >= TODAY | | <= | Less Than or equal | CreatedDate <= LAST\_WEEK | | LIKE | Pattern matching | Name LIKE '%Acme%' | | IN | Match any value in list | Status IN ('Open','Pending') | | NOT IN | Not in list | StageName NOT IN ('Closed Won','Closed Lost') | ### Combining Conditions **AND - All conditions must be true:** ``` Status = 'Active' AND OwnerId = '{{User.Id}}' ``` **OR - Any condition must be true:** ``` Priority = 'High' OR Status = 'Escalated' ``` **Complex Combinations:** ``` (Status = 'Active' OR Status = 'Pending') AND OwnerId = '{{User.Id}}' ``` ### Date Filters **Relative Dates:** ``` CreatedDate = TODAY CreatedDate = YESTERDAY CreatedDate = THIS_WEEK CreatedDate = LAST_WEEK CreatedDate = THIS_MONTH CreatedDate = LAST_MONTH CreatedDate = THIS_YEAR ``` **Date Ranges:** ``` CreatedDate = LAST_N_DAYS:30 CloseDate = NEXT_N_DAYS:7 CreatedDate = LAST_N_MONTHS:3 ``` **Specific Dates:** ``` CreatedDate = 2024-01-15 CreatedDate >= 2024-01-01 ``` #### NULL Checks ``` Description != null // Has a value Email = null // Is empty ``` ### Dynamic Reference in Filters **Important:** Always wrap dynamic references in single quotes. ``` AccountId = '{{Record.Id}}' OwnerId = '{{User.Id}}' Department__c = '{{User.Department}}' ``` ### Common Filter Patterns **Related Records:** ``` AccountId = '{{Record.Id}}' WhatId = '{{Record.Id}}' ParentId = '{{Record.Id}}' ``` **User's Records:** ``` OwnerId = '{{User.Id}}' CreatedById = '{{User.Id}}' ManagerId = '{{User.Id}}' ``` **Exclude Closed Items:** ``` IsClosed = false Status != 'Closed' StageName NOT IN ('Closed Won','Closed Lost') ``` **Recent Records:** ``` CreatedDate = LAST_N_DAYS:30 LastModifiedDate = THIS_MONTH ActivityDate >= TODAY ``` **Need help with filters?** Check Troubleshooting & FAQs for common filter issues. *** ## Field Names Property Specifies which fields to display in comma-separated format (similar to SOQL SELECT clause). ### Syntax ``` FieldApiName1,FieldApiName2,FieldApiName3 ``` ### Examples **Contact Fields:** ``` Name,Email,Phone,Title ``` **Opportunity Fields:** ``` Name,StageName,Amount,CloseDate,Probability ``` **With Related Fields:** ``` Name,Account.Name,Owner.Name,Amount ``` ### Field Order Fields appear in the order specified: ``` Name,Email,Phone → Name | Email | Phone Phone,Name,Email → Phone | Name | Email ``` ### Best Practices * **Use readable order:** Put most important fields first * **Consider width:** Long field lists may cause horizontal scrolling * **Test on mobile:** Limit fields for mobile-friendly display * **Check permissions:** Users only see fields they can access *** ## Order By Property Specifies how records should be sorted (similar to SOQL ORDER BY clause). ### Syntax ``` FieldApiName [ASC|DESC] ``` ### Examples **Ascending (default):** ``` Name CreatedDate Amount ``` **Descending:** ``` CreatedDate DESC Amount DESC Priority__c DESC ``` **Multiple Fields:** ``` Priority__c DESC, Name ASC StageName, CloseDate DESC Status, LastModifiedDate DESC ``` ### Common Patterns **Alphabetical:** ``` Name LastName, FirstName ``` **Most Recent First:** ``` CreatedDate DESC LastModifiedDate DESC ActivityDate DESC ``` **Highest Value First:** ``` Amount DESC Quantity DESC Score__c DESC ``` **Priority-Based:** ``` Priority__c, Name Status, CreatedDate DESC ``` *** ## Limit Property Controls the maximum number of records retrieved and displayed. ### Syntax ``` Limit: [number] ``` ### Examples ``` Limit: 50 Limit: 100 Limit: 200 ``` ### Purpose * **Performance optimization** - Fewer records = faster queries * **User experience** - Manageable amount of data to view * **Page load speed** - Improves initial rendering time ### Recommendations * **With Pagination:** Set based on per-page needs (e.g., `Limit: 100` with 20 items per page = 5 pages) * **Without Pagination:** Set based on user needs and performance (typically 50-100) * **For Metrics/Summaries:** Can be higher since only aggregated values display ### Combined with Pagination ``` Limit: 100 Show Pagination: On Number of Items per Page: 20 ``` Result: 100 records retrieved, displayed across 5 pages of 20 records each. *** ## Header Properties Provide context and visual appeal to components. ### Header Title **Syntax:** ``` Header Title: [Text or Dynamic Reference] ``` **Examples:** ``` Header Title: Related Opportunities Header Title: {{User.FirstName}}'s Dashboard Header Title: Opportunities for {{Record.Name}} ``` ### Header Caption **Syntax:** ``` Header Caption: [Text or Dynamic Reference] ``` **Examples:** ``` Header Caption: Last 30 Days Header Caption: Filtered by {{Record.Status}} Header Caption: Team: {{User.Department}} ``` ### Header Icon Name **Syntax:** ``` Header Icon Name: [category:icon_name] ``` **Common Icons:** ``` standard:account standard:opportunity standard:case standard:contact standard:task standard:event utility:metrics utility:table utility:kanban ``` **Find Icons:** Browse the [Salesforce Lightning Design System Icons](https://www.lightningdesignsystem.com/icons/) *** ## Display Options Control how components appear on the page. ### Display as Card **Purpose:** Wraps component in a styled container **When to Use:** * Multiple components on same page need visual separation * Dashboard or summary views * Professional, polished appearance desired **Syntax:** ``` Display as Card: On ``` ### Show Pagination **Purpose:** Breaks large datasets into pages **When to Use:** * More than 50-100 records * Improved initial load time needed * Better user navigation desired **Syntax:** ``` Show Pagination: On Number of Items per Page: 20 ``` ### Number of Items per Page **Purpose:** Controls records per page when pagination enabled **Common Values:** ``` 10 - Compact view 20 - Standard view 50 - Expanded view ``` *** ## Searchable and Filterable Fields Control which fields users can search or filter by. ### Search Fields Syntax ``` FieldName1,FieldName2,FieldName3 ``` **Example:** ``` Name,Email,Phone,Description ``` ### Filterable Fields Syntax ``` FieldName1,FieldName2,FieldName3 ``` **Example:** ``` Status,Priority,OwnerId,Type ``` ### Best Practices **For Search:** * Include text fields users would naturally search * Add key identifiers (names, codes, descriptions) * Consider email and phone for contact searches **For Filters:** * Include categorical fields (status, type, priority) * Add lookup fields (owner, account, related records) * Use fields with limited values for better UX *** ## Editable Fields Control which fields support inline editing. ### Syntax ``` FieldName1,FieldName2,FieldName3 ``` ### Examples **Opportunity Fields:** ``` StageName,CloseDate,Amount,Probability ``` **Case Fields:** ``` Status,Priority,OwnerId ``` **Task Fields:** ``` Status,Priority,ActivityDate ``` ### Requirements For inline editing to work: * User must have field-level Edit permission * User must have record-level Edit access * Field must be editable (not formula or roll-up) **Troubleshooting editing issues?** See [Troubleshooting & FAQs](/app-builder-components/resources/troubleshooting-and-faqs.md). *** ## Next Steps * [**Core Concepts**](/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) - Understand fundamental principles * [**Common Use Case Patterns**](/app-builder-components/getting-started/understanding-the-essentials/common-use-case-patterns.md) - See properties used in real scenarios * [**Troubleshooting & FAQs**](/app-builder-components/resources/troubleshooting-and-faqs.md) - Fix configuration problems --- # 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/understanding-the-essentials/component-properties-reference.md?ask= ``` 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.