# 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**](/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) - Learn underlying principles
* [**Component Properties Reference**](/app-builder-components/getting-started/understanding-the-essentials/component-properties-reference.md) - Detailed property syntax
* [**Troubleshooting & FAQs**](/app-builder-components/resources/troubleshooting-and-faqs.md) - Fix implementation issues

***

## Related Record Displays

Show records related to the current page's record.

### Opportunities on Account Page

**Component:** [Data Table](/app-builder-components/app-builder-components/ax-data-table.md), [List](/app-builder-components/app-builder-components/ax-list.md), or [Kanban](/app-builder-components/app-builder-components/ax-kanban.md)

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

<figure><img src="/files/angpcAjcrz9OVuQNaAv2" alt=""><figcaption></figcaption></figure>

### Cases on Account Page

**Component:** [Data Table](/app-builder-components/app-builder-components/ax-data-table.md) or [Timeline](/app-builder-components/app-builder-components/ax-timeline.md)

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

<figure><img src="/files/aRHdKVhToooOXjrhXawH" alt=""><figcaption></figcaption></figure>

### Contacts on Account Page

**Component:** [List](/app-builder-components/app-builder-components/ax-list.md) or [Data Table](/app-builder-components/app-builder-components/ax-data-table.md)

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

<figure><img src="/files/rfkyiQpkmzVjyTAo2lnf" alt=""><figcaption></figcaption></figure>

### Tasks for Current Record

**Component:** [Timeline](/app-builder-components/app-builder-components/ax-timeline.md) or [List](/app-builder-components/app-builder-components/ax-list.md)

**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](/app-builder-components/app-builder-components/ax-data-table.md) or [Kanban](/app-builder-components/app-builder-components/ax-kanban.md) **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](/app-builder-components/app-builder-components/ax-kanban.md) **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](/app-builder-components/app-builder-components/ax-calendar.md) **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](/app-builder-components/app-builder-components/ax-data-table.md) **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](/app-builder-components/app-builder-components/ax-pivot-table.md) **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](/app-builder-components/app-builder-components/ax-data-table.md) **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](/app-builder-components/app-builder-components/ax-data-table.md) **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](/app-builder-components/app-builder-components/ax-timeline.md) **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](/app-builder-components/app-builder-components/ax-list.md) **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](/app-builder-components/app-builder-components/ax-map.md) **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](/app-builder-components/app-builder-components/ax-map.md) **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](/app-builder-components/app-builder-components/ax-metric.md) **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](/app-builder-components/app-builder-components/ax-pivot-table.md) **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](/app-builder-components/app-builder-components/ax-pivot-table.md) **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](/app-builder-components/app-builder-components/ax-kanban.md) **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](/app-builder-components/app-builder-components/ax-kanban.md) **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](/app-builder-components/app-builder-components/ax-gallery.md) **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](/app-builder-components/app-builder-components/ax-gallery.md) **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](/app-builder-components/app-builder-components/ax-alert.md) **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](/app-builder-components/app-builder-components/ax-alert.md) **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**](/app-builder-components/getting-started/understanding-the-essentials/core-concepts.md) - Understand the principles behind these patterns
* [**Component Properties Reference**](/app-builder-components/getting-started/understanding-the-essentials/component-properties-reference.md) - Look up specific property syntax
* [**Troubleshooting & FAQs**](/app-builder-components/resources/troubleshooting-and-faqs.md) - Fix issues with your implementations

**Can't find what you need?** Visit [individual component documentation pages](/app-builder-components/app-builder-components/explore-all-components.md) for more specialized examples.


---

# 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/common-use-case-patterns.md?ask=<question>
```

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.