Contact Life Events

Track your Contact's history with the Timeline component.

Before you start

This use case has some configuration prerequisites. Make sure you review the Set up section of this page before building !

Learning focus points

• Display record-based SLDS icons using formulas

Objective

• Life Story at a Glance: Surface every major milestone in a contact's life on a single chronological view directly on the record page.
• Category-Aware Visuals: Color-code events by type so the eye groups related life moments automatically.
• Contextual Aging: Display the contact's age at each event to anchor the timeline in personal context.
• Extensible Library: Add new event types or fields without touching code.

Solution

You'll build a single Timeline component, all without code, that surfaces a contact's life events directly on their record page. Each event renders with a category-specific icon, the contact's age at the time, and a custom description. It features:

• Custom Life Event Object: Stores each milestone with type, date, and description, tied to a Contact lookup.
• Type-Driven Icons: A formula maps each event type to a Salesforce Lightning Design System icon, producing a cohesive color story.
• Age-at-Event Calculation: A formula field shows the contact's age at the time of each event.
• Cohesive Color Palette: A five-tone palette (pink, true green, teal, blue, dark blue) groups events visually by life category.

How It Works (User Perspective)

1. The user opens a Contact record page in Salesforce.
2. The Life Events Timeline displays all the contact's milestones, sorted chronologically.
3. Each event shows a colored icon, the event name, the contact's age at the time, a description, and the event date.
4. The user clicks an event to expand it and view the full details.
5. The user clicks New to add a new life event directly from the timeline.

What we'll create

• 1 Custom object (Life Event)
• 2 Formula fields (Event Icon, Age at Event)
• 1 Dynamic component (Timeline)
• Optionnaly : 1 screen flow to create events

Set up

Prerequisite

Before configuring the Timeline component, set up the standard Salesforce object, fields, and formulas that the component will read from.

1

Create the Life Event Custom Object

• Create a custom object named Life Event with API name Life_Event__c.
• Add the following fields:

  • Contact__c (Lookup to Contact)
  • EventType__c (Picklist)

    • Review the formula lower to see the values we chose for this example. Build as you need.
  • Date__c (Date)
  • Description__c (Text Area)

2

Define the Event Type Picklist Values

• Open the EventType__c picklist on the Life Event object.
• Add the following values: Birth, Education, Job, Move, Marriage, Child, House, Health.

3

Add the Event Icon Formula Field

• Create a Text formula field named Event Icon with API name EventIcon_F__c.
• Paste the following formula:

CASE( EventType__c ,
  "Birth",      "standard:individual",
  "Move",       "standard:address",
  "Job",        "standard:work_order",
  "Education",  "standard:education",
  "Health",     "standard:asset_object",
  "Marriage",   "standard:partners",
  "House",      "standard:home",
  "Child",      "standard:household",
  "standard:default"
)

4

Add the Age at Event Formula Field

• Create a Text formula field named Age at Event with API name AgeAtEvent_F__c.
• Paste the following formula:

IF(
  ISBLANK( Contact__r.Birthdate ) || ISBLANK( Date__c ),
  "",
  IF(
    ISPICKVAL( EventType__c, "Birth" ),
    "",
    "Age " & TEXT( FLOOR( ( Date__c - Contact__r.Birthdate ) / 365.25 ) )
  )
)

Component configuration

With the object and formulas in place, build the timeline inside the Avonni Dynamic Component Builder, then add the finished Dynamic Component to the Contact record page.

1

Create the Dynamic Component

• Open the Avonni Dynamic Component Builder.
• Create a new Dynamic Component named Life Events Timeline.

2

Add the Timeline Component

• Drag the Timeline component from the components panel onto the canvas.

3

Configure the Data Source

• In the Timeline properties panel, add a Query data source that fetches Life_Event__c records where Contact__c equals the Component > Record Id

4

Map the Display Fields

• Map the Title to Name.
• Map the Description to {{Record.AgeAtEvent_F__c}}.
• Map the Icon Name to EventIcon_F__c.
• Map the Start Date to Date__c.

5

Finalize the Display

• Set the Sorted Direction to descending so the most recent events appear at the top.
• Save the Dynamic Component.

6

Add a New record button that launches a flow

• Add an action button in the Header
• In the Interactions panel, set a Header action click interaction

  • Select the action button
  • Select your flow's Api Name. Make sure to set a recordId input variable equal to Component > Record Id
  • Add a refresh all queries on finish to make sure your users always see the most recent records

7

Add the Component to the Contact Record Page

• Open the Lightning App Builder for the Contact record page.
• Drag the Avonni Dynamic Component onto the canvas and select Life Events Timeline.
• Save and activate the page.

Going further

Timeline