Contact Life Events

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