AX - Timeline

Overview

AX - Timeline is a Lightning App Builder component that displays your Salesforce records in chronological order on record, app, and home pages.

Use it to track any date-based activity—like case updates, opportunity history, project milestones, customer interactions, or task completion. Users can search and filter entries, click items to navigate to records, and see events organized by time periods. Pull data from any standard or custom object with date fields.

Perfect for activity feeds, audit trails, customer interaction history, project timelines, or anywhere users need to see "what happened when" in a visual, scrollable format.

Getting Started

Use this simple tutorial to learn the basics of the Timeline component and start building your use cases.

Use Cases

Account & Contact Management

• Visualize interaction history, including calls, emails, and meetings, on Account or Contact page.s

• Track relationship development and touchpoint progression over time

• Display communication timeline with prospects and customers

Case & Service Management

• Show case activity timeline including updates, status changes, and internal comments

• Track service request progression from creation to resolution

• Display escalation history and resolution milestones

Sales & Opportunity Management

• Track key sales milestones, notes, and related tasks across the deal lifecycle

• Display opportunity progression with stage changes and important activities

• Show competitive activities and strategic decisions over time

---

Configuration

Property	Type	Required	Description	Example
Object API Name	Text	Yes	API name of the Salesforce object used to retrieve records for the timeline	Event, Case, Task, Custom_Activity__c
Filter	Text	No	SOQL WHERE clause conditions to filter which records appear on the timeline. Supports {{Record.FieldName}} syntax.	Status = 'Open'<br>WhatId = '{{Record.Id}}'<br>Type = 'Milestone'
Order By	Text	No	Field API name used to sort records before rendering. Typically a date field for chronological ordering.	ActivityDate, CreatedDate DESC, Due_Date__c
Maximum Number of Items	Number	No	Maximum number of records to retrieve and display. Prevents performance issues with large datasets.	50, 100, 200
Title Field Name	Text	Yes	Field API name used as the main title for each timeline item	Subject, Name, Title__c, Activity_Name__c
Description Field Name	Text	No	Field API name used as the descriptive text for each timeline item	Description, Summary__c, Details__c, Comments__c
Date Field Name	Text	Yes	Field API name representing the date that determines an item's position in the timeline	ActivityDate, CloseDate, DueDate, Event_Date__c
Field Names	Text	No	Comma-separated list of field API names that display additional details for each timeline item	OwnerId,StageName,Amount<br>Priority__c,Status__c,Type__c
Clickable	Checkbox	No	Makes timeline items clickable links that redirect to the record's detail page	Checked for navigation, Unchecked for display-only
Show Search	Checkbox	No	Displays a search bar above the timeline for keyword searches across configured fields	Checked for searchable timelines, Unchecked for browse-only
Filter Fields	Text	No	Comma-separated list of field API names displayed in the filter panel for user-driven filtering	Status,OwnerId,Type<br>Priority__c,Category__c
Show Pagination	Checkbox	No	Enables pagination controls at the bottom of the timeline for navigating large datasets	Checked for large datasets, Unchecked for smaller lists
Number of Items per Page	Number	No	When pagination is enabled, defines how many records are displayed per page	10, 20, 25
Header Title	Text	No	Main heading displayed above the timeline. Supports {{Record.FieldName}} syntax.	Account Activity Timeline<br>{{Record.Name}} History
Header Caption	Text	No	Subtitle displayed below the header title to provide additional context. Supports {{Record.FieldName}} syntax.	Grouped by Month<br>Last {{Record.Activity_Count__c}} activities
Header Icon Name	Text	No	Salesforce Lightning Design System (SLDS) icon name in format category:icon_name	standard:event, utility:timeline, custom:activity
Display as Card	Checkbox	No	Wraps the timeline inside a styled card container for better visual presentation	Checked for dashboard sections, Unchecked for inline display

---

Use Case Examples

Example 1: Contact Life Events

Scenario: Track your contacts life events to drive customer knowledge and provide your users with a full 360 view.

Prerequisites

• Create a custom object to track your contact life events Life_Event__c

• Create 2 custom fields on the Life_Event__c object

  • Master-detail or lookup to Contact to link events to your contacts Contact__c

  • A Date field to track when the event happened Date__c

  • A Description field used to showcase details in your component Description__c

Steps

1

Navigate to Lightning App Builder and edit your Contact record page

2

Place the AX - Timeline component in your main content area

3

Configure the data source:

• Set Object API Name to Life_Event__c

• Set Title field to Name

• Set Filter to Contact__c = {{Record.Id}}

4

Configure milestone display:

• Set Title Field Name to Milestone_Name__c

• Set Date Field Name to Date__c

• Set Field Names to Description__c

5

Enable user interactions:

• Check Clickable to allow users to navigate to records

6

Customize Header and display:

• Set Header Title to Project Milestones

• Set Header Caption to Key deliverables and deadlines

• Set Header Icon Name to standard:task

• Check Display as Card for a modern look

7

Save & review

Example 2: Project Milestone Tracker

Scenario: Display project milestones and key events with team member filtering and completion tracking.

Prerequisites:

• Create a Project__c custom object.

• Create a second Project_Milestone__c custom object. This object stores the stages and deadlines of your project.

• Create 3 custom fields on the Project_Milestone__c object

  • A picklist field Status__c with values New, In Progress, Done

  • A Lookup field to the Project object Project__c

  • A date field Target_Date__c

Steps

1

Navigate to Lightning App Builder and edit your Project record page

2

Place the AX - Timeline component in your main content area

3

Configure the data source:

• Set Object API Name to Project_Milestone__c

• Set Filter to Project__c = {{Record.Id}}

4

Configure milestone display:

• Set Title Field Name to Milestone_Name__c

• Set Description Field Name to Status__c

• Set Date Field Name to Target_Date__c

• Set Field Names to Assigned_To__c,Status__c,Completion_Percentage__c

5

Enable project team interactions:

• Check Clickable to allow users to navigate to records

6

Customize header:

• Set Header Title to Project Milestones

• Set Header Icon Name to standard:solution

• Check Display as Card for a modern look

7

Save & review

Result: A project milestone timeline with completion tracking, team member filtering, and direct navigation to milestone details.

Example 3: Account Events Timeline

Scenario: Display events related to an account in chronological order with search and filtering capabilities.

1

Navigate to Lightning App Builder and edit your Account record page

2

Drag the Timeline component onto your page layout

3

Configure the data source

• Set Object API Name to Event

• Set Filter to WhatId = '{{Record.Id}}'

• Set Order By to ActivityDate DESC

• Set Maximum Number of Items to 100

4

Configure the timeline display

• Set Title Field Name to Subject

• Set Description Field Name to Description

• Set Date Field Name to ActivityDate

• Set Field Names to OwnerId,Type,Duration

5

Enable user interactions

• Check Clickable for record navigation

• Check Show Search for keyword search

• Set Filter Fields to OwnerId,IsAllDayEvent

6

Configure pagination

• Check Show Pagination for large datasets

• Set Number of Items per Page to 20

7

Configure the header

• Set Header Title to Activity Timeline

• Set Header Caption to All activities for {{Record.Name}}

• Set Header Icon Name to standard:event

8

Check Display as Card for visual separation

9

Save and test with different account records

Result: A comprehensive activity timeline showing all events related to the account with search, filtering, and navigation capabilities.

Example 4: Case Resolution Timeline

Scenario: Track case updates and resolution progress with status-based filtering and milestone tracking.

1

Navigate to Lightning App Builder and edit your Case record page

2

Drag the AX - Timeline component onto your page layout

3

Configure the data source

• Set Object API Name to Event

• Set Filter to WhatId = '{{Record.Id}}'

• Set Order By to ActivityDate DESC

• Set Maximum Number of Items to 100

4

Configure the timeline display

• Set Title Field Name to Subject

• Set Description Field Name to Description

• Set Date Field Name to ActivityDate

• Set Field Names to OwnerId,Type,Duration

5

Enable user interactions

• Check Clickable for record navigation

• Check Show Search for keyword search

• Set Filter Fields to Type,OwnerId,IsAllDayEvent

6

Configure pagination

• Check Show Pagination for large datasets

• Set Number of Items per Page to 20

7

Configure the header

• Set Header Title to Activity Timeline

• Set Header Caption to All activities for {{Record.Name}}

• Set Header Icon Name to standard:event

8

Check Display as Card for prominent display

9

Save and verify timeline shows case progression

Result: A detailed case history timeline showing all status changes, field updates, and modifications with search and filtering.

---

Best Practices

Data Organization

• Choose date fields that provide meaningful chronological context for your business process

• Use descriptive title and description fields that give users quick insight into each timeline item

• Include relevant additional fields that provide context without cluttering the display

Performance Optimization

• Set appropriate maximum item limits to balance completeness with performance

• Use specific filters to reduce query scope and improve load times

• Enable pagination for timelines with large datasets to maintain responsive performance

User Experience

• Enable search functionality for timelines with many items or complex data

• Provide meaningful filter fields that align with how users naturally categorize the data

• Use clickable items when navigation to detail records adds value to the workflow

Visual Design

• Choose header titles and captions that clearly explain what the timeline represents

• Select appropriate icons that reinforce the timeline's purpose and content type

• Use card display for timelines that need visual separation from surrounding content

---

Troubleshooting

Timeline Shows No Data

• Verify the Object API Name is correct and accessible to users

• Check that the filter syntax is valid SOQL and returns results for the current record

• Ensure the date field contains valid date/datetime values

• Confirm users have permission to view the specified object and fields

Items Appear Out of Order

• Verify the Date Field Name points to a valid date or datetime field

• Check the Order By configuration includes proper sorting direction (ASC/DESC)

• Ensure date field values are populated correctly in the source records

Search Not Working

• Confirm Show Search is enabled and searchable fields contain data

• Verify users have permission to view the fields being searched

• Check that search terms match the data format in the source fields

Pagination Issues

• Ensure Number of Items per Page is set to a reasonable value (10-50)

• Verify the total record count exceeds the per-page limit

• Check that the Maximum Number of Items doesn't conflict with pagination settings

Navigation Problems

• Ensure Clickable is enabled for navigation functionality

• Verify users have permission to view the target record pages

• Check that the records being referenced still exist and aren't deleted

---

Summary

The Timeline component provides a powerful way to visualize time-based data within Salesforce Lightning pages, offering chronological insights into business processes, relationships, and activities. With comprehensive filtering, search, and navigation capabilities, it enables users to understand historical context and track progress over time quickly. The component's flexibility supports various business scenarios from sales pipeline tracking to compliance auditing, making it a valuable tool for any time-sensitive workflow visualization.