Gantt Chart

GM - Gantt Chart component provides clarity in complex project timelines filled with numerous tasks, shifting deadlines, and overlapping dependencies. A Gantt chart significantly helps by allowing you to see the bigger picture while keeping track of the details. With GridMate’s Gantt Chart component, this clarity comes right into your projects no need to switch between spreadsheets or external tools, as everything remains connected to your live data.

The component provides a set of actions that can be performed by the end-user to update the project plan. Those actions are visible at the top of the component in the toolbar👇

Gantt Chart Setup

When you drag the GM – Gantt Chart component into the Salesforce App Builder, you’ll find a list of configurable properties. Let’s go through them one by one :

1. Select an Project record and edit the page in the Lightning App Builder.

2. From the components list, drag and drop the component GM - Gantt Chart.

3. The component is now ready for configuration in the Lightning App Builder.

4. The property values can be configured to tailor the needs of the end-user.

5. To perform a quick configuration, populate the properties below:

   • Title : Gantt Chart

   • Can Select : Checked

   • Can Reorder : Checked

   • Can Edit : Checked

   • Columns : 2

   • Relation Config : JSON string configuration

   • Work Day Start : 8

   • Work Day End : 17

   • Hour Span : 1

   • Work Week Start : 1

   • Work Week End : 5

   • First Day of Week : 1

   • Default Displayed Tasks : 10

   • Slot Size : 200

   • Row Height : 40

   • Left Panel Width (%) : 40

   • Right Panel Width (%) : 30

   • Default View : Initial zoom level of the Gantt chart (daily, weekly, monthly, yearly)

Gantt Chart Demo

Below is a step by step tutorial to configure the GM - Gantt Chart component.👇

Gantt Chart Relation Configuration

This configuration defines how tasks are displayed and behave in your Gantt chart. The structure consists of an array of task type configurations, where each object represents a different type of task that can be used in your project timeline.

Core Task Properties

• taskObjectApiName : The Salesforce API name of the object that represents this task type.

• titleFieldName : The field that contains the task's display name

• fromDateFieldName : The field containing the task's start date

• toDateFieldName : The field containing the task's end date

• ownerFieldName : The field that identifies who owns or is responsible for the task

• progressFieldName : The field that tracks completion percentage

Visual Appearance

• taskIconName : The icon displayed for this task type in the Gantt Chart

• taskColor : The color used to display this task type (hex color code)

Field Display Configuration

• taskDetailFields : Array of fields shown in the detailed task view

• taskPopoverFields : Array of fields shown in hover popover when user hovers over a task

• taskListFields : Array of fields shown in the task list view

Hierarchical Structure

• parentFieldName - Defines parent-child relationships between tasks. It contains an array of objects specifying:

  • parentObjectApiName: The API name of the parent object

  • fieldName: The field that references the parent task

• orderFieldName - Field used to determine the display order of tasks

• acceptedChildren - Defines what types of child tasks this task type can contain. It contains an array of objects with:

  • apiName: The API name of the allowed child task type

  • multiple: Boolean indicating if multiple children are allowed

Task Types

• taskType - Array defining the specific types of tasks this configuration supports.

Here’s an example of the Relation Config used in this tutorial:

[
    {
        "taskObjectApiName": "Project__c",
        "titleFieldName": "Name",
        "fromDateFieldName": "StartDate__c",
        "toDateFieldName": "EndDate__c",
        "ownerFieldName": "OwnerId",
        "progressFieldName": "Progress__c",
        "taskIconName": "custom:custom43",
        "taskColor": "#0176d3",
        "taskDetailFields": [
            "Name",
            "Progress__c",
            "StartDate__c",
            "EndDate__c"
        ],
        "taskPopoverFields": [
            "Name"
        ],
        "acceptedChildren": [
            {
                "apiName": "gmpkg__GanttTask__c",
                "multiple": true
            }
        ]
    },
    {
        "taskObjectApiName": "gmpkg__GanttTask__c",
        "titleFieldName": "Name",
        "fromDateFieldName": "gmpkg__StartDate__c",
        "toDateFieldName": "gmpkg__EndDate__c",
        "ownerFieldName": "OwnerId",
        "progressFieldName": "gmpkg__Progress__c",
        "parentFieldName": [
            {
                "parentObjectApiName": "gmpkg__GanttTask__c",
                "fieldName": "gmpkg__Parent__c"
            }
        ],
        "orderFieldName": "gmpkg__Order__c",
        "taskIconName": "custom:custom12",
        "taskColor": "#dc71d1",
        "taskDetailFields": [
            "Name",
            "gmpkg__Progress__c",
            "gmpkg__StartDate__c",
            "gmpkg__EndDate__c"
        ],
        "taskPopoverFields": [
            "Name",
            "gmpkg__Progress__c",
            "gmpkg__StartDate__c",
            "gmpkg__EndDate__c"
        ],
        "taskType": [
            "milestone",
            "task"
        ],
        "acceptedChildren": [
            {
                "apiName": "gmpkg__GanttTask__c",
                "multiple": true
            }
        ]
    }
]