Object Timeline

GridMate provides a component to display records in a timeline. GM - Object Timeline is highly configurable to display any kind of object as a timeline.

Salesforce standard Activity Timeline supports Activities ( Emails, Tasks, Events, Lists emails, Logged calls ) in accounts, cases, claims, contacts, contracts, insurance policies, leads, opportunities, and activity-enabled custom objects. GM - Object Timeline will cater for activities as standard timeline and any standard/custom object.

In this tutorial, we will setup a custom timeline and configure fields to display tasks/events and the opportunity object on the same timeline. Below is a quick demo on how to configure the GM - Object Timeline component in the opportunity record page.

Object Timeline Demo

Below is the JSON Config configured for the demo.

[
    {
        "objectApiName": "Opportunity",
        "refFieldApiName": "Id",
        "titleField": "Name",
        "dateField": "CloseDate",
        "summaryField": "Name",
        "detailFields": [
            "StageName",
            "NextStep"
        ],
        "themeInfo": {
            "iconName": "standard:opportunity",
            "color": "black"
        },
        "recordActions": [
            {
                "name": "View",
                "label": "View",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "view"
                    }
                }
            },
            {
                "name": "Edit",
                "label": "Edit",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "edit"
                    }
                }
            },
            {
                "name": "Opportunity.gmpkg__Update_Stage",
                "label": "Update Stage"
            }
        ]
    },
    {
        "objectApiName": "Task",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "ActivityDate",
        "summaryField": "WhatId",
        "detailFields": [
            "Subject",
            "Description",
            "Status"
        ],
        "overdueExp": {
            "Status": {
                "operator": "!=",
                "value": "Completed"
            }
        },
        "filter": {
            "and": [
                {
                    "Type": {
                        "operator": "in",
                        "value": "('Meeting','Email')"
                    }
                }
            ]
        },
        "themeInfo": {
            "iconName": "standard:task",
            "emailBodyHeight": "20rem",
            "color": "black"
        },
        "recordActions": [
            {
                "name": "View",
                "label": "View",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "view"
                    }
                }
            },
            {
                "name": "Edit",
                "label": "Edit",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "edit"
                    }
                }
            }
        ]
    },
    {
        "objectApiName": "Event",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "ActivityDate",
        "summaryField": "WhatId",
        "detailFields": [
            "StartDateTime",
            "EndDateTime",
            "Subject",
            "Description",
            "Status"
        ],
        "themeInfo": {
            "iconName": "standard:event"
        },
        "recordActions": [
            {
                "name": "View",
                "label": "View",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "view"
                    }
                }
            },
            {
                "name": "Edit",
                "label": "Edit",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "edit"
                    }
                }
            }
        ]
    }
]

The most important property is the Timeline Configuration which a user needs to insert as a JSON string similar to the below block of code.

[
    {
        "objectApiName": "Task",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "ActivityDate",
        "detailFields": [
            "Subject",
            "Description",
            "Status"
        ],
        "overdueExp": {
            "Status": {
                "operator": "!=",
                "value": "Completed"
            }
        },
        "recordActions": [
            {
                "name": "View",
                "label": "View",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "view"
                    }
                }
            },
            {
                "name": "Edit",
                "label": "Edit",
                "navigate": {
                    "type": "standard__recordPage",
                    "attributes": {
                        "actionName": "edit"
                    }
                }
            }
        ],
        "themeInfo": {
            "iconName": "standard:event",
            "color": "black"
        }
    }
]

The component can be configured as follows:

• objectApiName: Object API name you need to configure.

• refFieldApiName: Reference field API name to retrieve related records based on the current record. In this case, using WhatId will retrieve all tasks related to the opportunity.

• titleField: Field API name to display the title.

• dateField: Field API name to display the date.

• detailFields: Array of fields to display as a detail view.

• filter: JSON string to define filter criteria. Don’t forget __c for custom fields.

  See GM - RelatedList Grid filter property for more details.
• overdueExp: Logical expression to check if the activity is overdue. The expression is evaluated only if the activity date is in the past. If the activity is overdue, it will be displayed at the top of the timeline.

• recordActions: Configure record actions to support editing, viewing, initiating a custom action, or running a flow.

If the Task is an Email , the summary field will display the TextBody in the EmailMessage and the detail section displays the HtmlBody.