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 in the Tasks and the opportunity object . Below is a quick demo on how to configure the GM - Object Timeline component in the opportunity record page.

GRIDMATE - OBJECT TIMELINE

Below is the JSON Config configured for the demo.

[
    {
        "objectApiName": "Task",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "ActivityDate",
        "detailFields": [
            "Description"
        ],
        "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:task",
            "color": "black"
        }
    },
    {
        "objectApiName": "Event",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "ActivityDate",
        "detailFields": [
            "Description"
        ],
        "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"
        }
    },
    {
        "objectApiName": "Opportunity",
        "refFieldApiName": "Id",
        "titleField": "Name",
        "dateField": "CloseDate",
        "summaryField": "Type",
        "detailFields": [
            "Type"
        ],
        "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:opportunity",
            "color": "black"
        }
    }
]

 

As you saw on the demo you can give Title, Icon in order to customise component header.

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

[
    {
        "objectApiName": "Task",
        "refFieldApiName": "WhatId",
        "titleField": "Subject",
        "dateField": "CreatedDate",
        "detailFields": [],
        "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"
        }
    }
]

As you can see the component is supported to configure:

• objectApiName: Object API name you need to configure.

• refFieldApiName: Reference field API name to retrieve related record in the object; in this case it's WhatId, which will retrieve all Tasks for 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.

• recordActions: Configure record actions.

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