Common Use Case Patterns

Pre-built configuration patterns for typical Avonni App Builder Component scenarios. Copy and adapt these patterns to your specific needs.

Related Pages:

• Core Concepts - Learn underlying principles

• Component Properties Reference - Detailed property syntax

• Troubleshooting & FAQs - Fix implementation issues

---

Related Record Displays

Show records related to the current page's record.

Opportunities on Account Page

Component: Data Table, List, or Kanban

Configuration:

Object API Name: Opportunity
Filter: AccountId = '{{Record.Id}}'
Order By: CloseDate DESC
Column Field Names: Name,StageName,Amount,CloseDate
Header Title: Opportunities
Header Caption: For {{Record.Name}}
Header Icon Name: standard:opportunity
Display as Card: On

Use Case: Sales teams viewing account pages need quick access to related opportunities.

Cases on Account Page

Component: Data Table or Timeline

Configuration:

Object API Name: Case
Filter: AccountId = '{{Record.Id}}' AND IsClosed = false
Order By: Priority DESC, CreatedDate DESC
Column Field Names: CaseNumber,Subject,Status,Priority
Header Title: Open Cases
Header Caption: Active support tickets
Header Icon Name: standard:case
Display as Card: On

Use Case: Service teams need visibility into active customer issues.

Contacts on Account Page

Component: List or Data Table

Configuration:

Object API Name: Contact
Filter: AccountId = '{{Record.Id}}'
Order By: LastName, FirstName
Column Field Names: Name,Title,Email,Phone
Searchable Fields: Name,Email
Filterable Fields: Title,Department
Header Title: Contacts
Header Caption: {{Record.Name}} team members
Header Icon Name: standard:contact
Display as Card: On

Use Case: View and search contacts associated with an account.

Tasks for Current Record

Component: Timeline or List

Configuration:

Object API Name: Task
Filter: WhatId = '{{Record.Id}}' AND IsClosed = false
Order By: ActivityDate ASC
Title Field Name: Subject
Date Field Name: ActivityDate
Header Title: Open Tasks
Header Caption: Upcoming activities
Header Icon Name: standard:task
Display as Card: On

Use Case: Track pending tasks related to any record type.

---

User-Specific Views

Display data relevant to the current logged-in user.

My Open Opportunities

Component: Data Table or Kanban Page Type: Home Page or App Page

Configuration:

Object API Name: Opportunity
Filter: OwnerId = '{{User.Id}}' AND IsClosed = false
Order By: CloseDate ASC
Column Field Names: Name,Account.Name,StageName,Amount,CloseDate
Header Title: {{User.FirstName}}'s Opportunities
Header Caption: Active deals
Header Icon Name: standard:opportunity
Show Pagination: On
Number of Items per Page: 20
Display as Card: On

Use Case: Personal dashboard showing user's active opportunities.

My Cases by Status

Component: Kanban Page Type: Home Page or App Page

Configuration:

Object API Name: Case
Filter: OwnerId = '{{User.Id}}' AND IsClosed = false
Group Field Name: Status
Title Field Name: Subject
Summary Field Name: (leave empty)
Header Title: My Cases
Header Caption: {{User.FirstName}}'s workload
Header Icon Name: standard:case
Display as Card: On

Use Case: Kanban view of user's cases organized by status.

My Upcoming Events

Component: Calendar Page Type: Home Page

Configuration:

Object API Name: Event
Filter: OwnerId = '{{User.Id}}' AND StartDateTime >= TODAY
Order By: StartDateTime ASC
Title Field Name: Subject
From Field Name: StartDateTime
To Field Name: EndDateTime
Selected Display: calendar
Selected Time Span: week
Header Title: My Schedule
Header Caption: Week of {{TODAY}}
Header Icon Name: standard:event
Display as Card: On

Use Case: Personal calendar view on home page.

---

Team and Manager Views

Display data for teams and direct reports.

Manager's Team Opportunities

Component: Data Table Page Type: App Page or Home Page

Configuration:

Object API Name: Opportunity
Filter: Owner.ManagerId = '{{User.Id}}' AND IsClosed = false
Order By: Owner.Name, CloseDate
Column Field Names: Owner.Name,Name,StageName,Amount,CloseDate
Filterable Fields: Owner.Name,StageName
Header Title: Team Opportunities
Header Caption: {{User.FirstName}}'s team pipeline
Header Icon Name: standard:opportunity
Show Pagination: On
Display as Card: On

Use Case: Managers need visibility into their team's pipeline.

Team Cases by Owner

Component: Pivot Table Page Type: App Page

Configuration:

Object API Name: Case
Filter: Owner.ManagerId = '{{User.Id}}' AND IsClosed = false
Group Row Fields: Status
Group Column Fields: OwnerId
Aggregation Fields: COUNT(Id)
Show Grand Total: On
Header Title: Team Case Load
Header Caption: Distribution by status and owner
Header Icon Name: standard:case
Display as Card: On

Use Case: Managers track case distribution across their team.

Department Dashboard

Component: Data Table Page Type: App Page

Configuration:

Object API Name: Opportunity
Filter: Owner.Department = '{{User.Department}}' AND IsClosed = false
Order By: CloseDate ASC
Column Field Names: Owner.Name,Name,StageName,Amount,CloseDate
Filterable Fields: Owner.Name,StageName
Searchable Fields: Name,Account.Name
Header Title: {{User.Department}} Pipeline
Header Caption: Department-wide opportunities
Header Icon Name: standard:opportunity
Show Pagination: On
Display as Card: On

Use Case: Department-level visibility for all team opportunities.

---

Time-Based Filtering

Display records within specific date ranges.

Opportunities Closing This Month

Component: Data Table Page Type: App Page or Record Page

Configuration:

Object API Name: Opportunity
Filter: CloseDate = THIS_MONTH AND IsClosed = false
Order By: CloseDate ASC, Amount DESC
Column Field Names: Name,Account.Name,StageName,Amount,CloseDate,Probability
Header Title: Closing This Month
Header Caption: {{MONTH}} opportunities
Header Icon Name: standard:opportunity
Display as Card: On

Use Case: Focus on deals closing in the current month.

Recent Cases (Last 30 Days)

Component: Timeline Page Type: App Page

Configuration:

Object API Name: Case
Filter: CreatedDate = LAST_N_DAYS:30
Order By: CreatedDate DESC
Title Field Name: Subject
Description Field Name: Description
Date Field Name: CreatedDate
Field Names: Status,Priority,Owner.Name
Header Title: Recent Cases
Header Caption: Last 30 days
Header Icon Name: standard:case
Show Pagination: On
Display as Card: On

Use Case: Track recent customer service activity.

Overdue Tasks

Component: List Page Type: Home Page or App Page

Configuration:

Object API Name: Task
Filter: ActivityDate < TODAY AND IsClosed = false AND OwnerId = '{{User.Id}}'
Order By: ActivityDate ASC
Title Field Name: Subject
Description Field Name: Description
Field Names: ActivityDate,Priority,Status
Header Title: Overdue Tasks
Header Caption: Needs immediate attention
Header Icon Name: standard:task
Clickable: On
Display as Card: On

Use Case: Highlight tasks past their due date.

---

Geographic and Location Views

Display location-based data on maps.

Account Locations by Territory

Component: Map Page Type: App Page

Configuration:

Object API Name: Account
Filter: Type = 'Customer' AND BillingCountry != null
Title Field Name: Name
Description Field Name: Industry
Street Field Name: BillingStreet
City Field Name: BillingCity
State Field Name: BillingState
Country Field Name: BillingCountry
Filterable Fields: Industry,Type
Show Search: On
Header Title: Customer Locations
Header Caption: Active accounts
Header Icon Name: standard:account
Display as Card: On

Use Case: Visualize customer locations across territories.

Service Locations for Current Account

Component: Map Page Type: Record Page (Account)

Configuration:

Object API Name: Asset
Filter: AccountId = '{{Record.Id}}' AND Status = 'Installed'
Title Field Name: Name
Description Field Name: Product2.Name
Latitude Field Name: Latitude__c
Longitude Field Name: Longitude__c
Header Title: Service Locations
Header Caption: Installed assets for {{Record.Name}}
Header Icon Name: standard:asset_object
Display as Card: On

Use Case: Map asset locations for field service planning.

---

Metrics and KPIs

Display key performance indicators and summaries.

Total Pipeline Value

Component: Metric Page Type: Home Page or App Page

Configuration:

Object API Name: Opportunity
Filter: IsClosed = false AND OwnerId = '{{User.Id}}'
Field Field Name: Amount
Aggregate Function: SUM
Label: My Pipeline Value
Prefix: $
Icon Name: utility:money
Display as Card: On

Use Case: Show user's total opportunity value.

Open Cases by Priority

Component: Pivot Table Page Type: App Page

Configuration:

Object API Name: Case
Filter: IsClosed = false
Group Row Fields: Priority
Group Column Fields: Status
Aggregation Fields: COUNT(Id)
Show Grand Total: On
Header Title: Case Distribution
Header Caption: By priority and status
Header Icon Name: standard:case
Display as Card: On

Use Case: Summarize case workload distribution for management reporting.

Average Deal Size by Region

Component: Pivot Table Page Type: App Page

Configuration:

Object API Name: Opportunity
Filter: StageName = 'Closed Won' AND CloseDate = THIS_YEAR
Group Row Fields: Region__c
Group Column Fields: (leave empty for single column)
Aggregation Fields: AVG(Amount)
Show Grand Total: On
Header Title: Average Deal Size
Header Caption: By region - {{YEAR}}
Header Icon Name: standard:opportunity
Display as Card: On

Use Case: Compare average deal sizes across regions.

---

Visual Workflow Management

Use Kanban boards for process visualization.

Opportunity Pipeline by Stage

Component: Kanban Page Type: Record Page (Account) or App Page

Configuration:

Object API Name: Opportunity
Filter: AccountId = '{{Record.Id}}' AND IsClosed = false
Group Field Name: StageName
Title Field Name: Name
Summary Field Name: Amount
Description Field Name: NextStep
Clickable: On
Header Title: Sales Pipeline
Header Caption: Active opportunities
Header Icon Name: standard:opportunity
Display as Card: On

Use Case: Visual pipeline management with drag-and-drop stage updates.

Project Tasks by Status

Component: Kanban Page Type: Record Page (Custom Project)

Configuration:

Object API Name: Project_Task__c
Filter: Project__c = '{{Record.Id}}'
Group Field Name: Status__c
Title Field Name: Name
Description Field Name: Description__c
Field Names: Assigned_To__c,Due_Date__c,Priority__c
Clickable: On
Show Search: On
Filterable Fields: Assigned_To__c,Priority__c
Header Title: Project Tasks
Header Caption: {{Record.Name}}
Header Icon Name: standard:task
Display as Card: On

Use Case: Agile-style task board for project management.

---

Content and Media Displays

Showcase visual content with galleries and carousels.

Product Image Gallery

Component: Gallery Page Type: Record Page (Product) or App Page

Configuration:

Object API Name: ContentDocumentLink
Filter: LinkedEntityId = '{{Record.Id}}' AND ContentDocument.FileType IN ('PNG','JPG','JPEG')
Media Source Field Name: ContentDocumentId
Title Field Name: ContentDocument.Title
Order By: ContentDocument.CreatedDate DESC
Columns: 3
Item Clickable: On
Header Title: Product Images
Header Caption: {{Record.Name}}
Header Icon Name: standard:photo
Display as Card: On

Use Case: Display product images stored as Salesforce files.

Training Video Library

Component: Gallery Page Type: App Page

Configuration:

Object API Name: Training_Resource__c
Filter: Type__c = 'Video' AND Status__c = 'Published'
Media Source Field Name: Video_URL__c
Title Field Name: Name
Description Field Name: Description__c
Order By: Category__c, Name
Columns: 2
Show Search: On
Filterable Fields: Category__c,Difficulty_Level__c
Header Title: Training Videos
Header Caption: Learning resources
Header Icon Name: standard:video
Display as Card: On

Use Case: Corporate Training Video Library with Filtering.

---

Alerts and Notifications

Provide contextual warnings and information.

Missing Required Fields Alert

Component: Alert Page Type: Record Page (Opportunity)

Configuration:

Variant: warning
Content: Important opportunity fields are incomplete. Please add Amount, Close Date, and Next Steps to maintain forecast accuracy.
Icon Name: utility:warning
Dismissible: On

Visibility Rule: Show when Amount = null OR CloseDate = null

Use Case: Data quality reminder for incomplete records.

SLA Breach Warning

Component: Alert Page Type: Record Page (Case)

Configuration:

Variant: error
Content: SLA breach imminent for {{Record.CaseNumber}}. Response due in less than 2 hours.
Icon Name: utility:error
Dismissible: Off
Textured: On

Visibility Rule: Show when SLA_Status__c = 'At Risk'

Use Case: Urgent notification for service level risks.

---

Next Steps

• Core Concepts - Understand the principles behind these patterns

• Component Properties Reference - Look up specific property syntax

• Troubleshooting & FAQs - Fix issues with your implementations

Can't find what you need? Visit individual component documentation pages for more specialized examples.