> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/projects/use-cases/contact-life-events.md).

# Contact Life Events

{% @arcade/embed flowId="OxCO3JtgkZdIkFVyBf3f" url="<https://app.arcade.software/share/OxCO3JtgkZdIkFVyBf3f>" %}

{% hint style="danger" %}

#### **Before you start**

This use case has some configuration prerequisites. Make sure you review the [#set-up](#set-up "mention") section of this page before building !
{% endhint %}

{% hint style="success" %}

#### Learning focus points

* Display record-based SLDS icons using formulas&#x20;
  {% endhint %}

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

{% stepper %}
{% step %}

#### 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)
    {% endstep %}

{% step %}

#### 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.
  {% endstep %}

{% step %}

#### Add the Event Icon Formula Field

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

```cpp
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"
)
```

{% endstep %}

{% step %}

#### 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:

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

{% endstep %}
{% endstepper %}

### Component configuration

{% @arcade/embed flowId="71QpAvs2ttIfWPDcMdDJ" url="<https://app.arcade.software/share/71QpAvs2ttIfWPDcMdDJ>" %}

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.

{% stepper %}
{% step %}

#### Create the Dynamic Component

* Open the Avonni Dynamic Component Builder.
* Create a new Dynamic Component named Life Events Timeline.
  {% endstep %}

{% step %}

#### Add the Timeline Component

* Drag the Timeline component from the components panel onto the canvas.
  {% endstep %}

{% step %}

#### 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`&#x20;
  {% endstep %}

{% step %}

#### 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`.
  {% endstep %}

{% step %}

#### Finalize the Display

* Set the Sorted Direction to descending so the most recent events appear at the top.
* Save the Dynamic Component.
  {% endstep %}

{% step %}

#### Add a New record button that launches a flow

* Add an action button in the Header&#x20;
* 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
    {% endstep %}

{% step %}

#### 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.
  {% endstep %}
  {% endstepper %}

## Going further

{% content-ref url="/spaces/ODPvvv7Cx9Z9RECLn3oV/pages/6x4uKVViCDe3D6B0jswr" %}
[Timeline](/dynamic-components/components/timeline.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/projects/use-cases/contact-life-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.