> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/product-tour/gantt-chart.md). # Gantt Chart The Gantt Chart brings your project timeline, tasks, dependencies, deadlines, and progress together in one view. The main areas of the component work together to help you plan, track, and manage your projects without leaving Salesforce. These key areas include the Toolbar, Edit Panel, Timeline, and Table View. Each area gives you access to different tools and information for managing your project. The image below gives you a quick look at them and how they fit together.
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:point\_down:
{% columns fullWidth="false" %} {% column width="91.66666666666669%" %} ### **ToolBar** 1. **Export** : Lets you save your task data as a file. There are different formats available depending on how you want to use the data: * Print: Opens your browser’s print or PDF dialog. * Export as CSV: Downloads your task data as a CSV (Comma-Separated Values) file. * Export as Excel: Downloads your task data as an Excel workbook with formatting, a frozen header row, outline grouping, and automatically sized columns. 2. **Refresh:** Reloads all chart data from Salesforce without closing the chart or losing your current view. 3. **Expand** :Expands a parent task to reveal its children (see also Expand All). 4. **Toggle Right Panel:** Shows or hides the task details editor panel on the right side of the chart. 5. **Toggle Left Panel:** Shows or hides the task tree and filters panel on the left side of the chart. 6. **Horizontal Scroll:** Enables automatic horizontal scrolling to keep the current selection visible as you edit. Useful when viewing narrow time windows or deep task hierarchies. 7. **Overdue:** Highlights tasks whose end date has passed and whose progress is below 100%. Turn it on or off to flag at-risk tasks with an amber background in both the task list and the chart. 8. **Critical Path:** Highlights the longest zero-slack dependent chain of tasks that determines the project's minimum completion date. Any slip on a critical task delays the project end date. Toggle on/off to focus on schedule-critical work. 9. **Delete:** Removes all selected rows from the chart and Salesforce. Available only when rows are selected and deletion is permitted. 10. **Redo:** Restores the last undone action. Disabled when there are no actions to redo. 11. **Undo:** Reverses the last action. Disabled when there are no changes to undo. 12. **Save:** Commits all pending changes to Salesforce. Disabled until unsaved changes exist. Displays the count of pending edits in parentheses (e.g., "Save (3)"). 13. **Zoom In:** Increases detail to show a narrower time window, moving through finer views (day → week → month → year). Disabled at the finest level. 14. **Zoom Out:** Decreases detail to show a broader time window, moving through coarser views (year → month → week → day). Disabled at the coarsest level. 15. **View:** A selector to choose between Day, Week, Month, Year, or Full (auto-fit) time scales. 16. **Date Picker:** A calendar input that lets you select a reference date to center the visible timeline. Valid range is constrained by the project's earliest and latest task dates. 17. **Create a Baseline:** Captures the current schedule as a new named snapshot, stored in Salesforce. Disabled while unsaved changes exist. Each baseline records every task's start date, end date, and progress percentage. 18. **Select Baseline:** A dropdown listing all saved baselines plus a "None" option. Selecting a baseline overlays neutral gray reference bars beneath current task bars for variance comparison. 19. **Scheduling Mode:** Controls how the Gantt Chart recalculates task dates when dependencies change. Choose from three modes: * MS Project: Uses dependencies while respecting the position you set for a task. * Auto: Automatically adjusts task dates based on the dependency chain. * Manual: Applies the dates you enter without automatically rescheduling other tasks. Any dependency or constraint violations are flagged but not enforced. 20. **Move Left (Outdent):** Promotes the selected row(s) out one level in the hierarchy. Disabled if already at the top level. 21. **Move Right (Indent)**: Nests the selected row(s) under the row above as children. Disabled if the row above is not a valid parent. 22. **Move Down:** Shifts the selected row(s) down within their parent. Disabled if already at the bottom or reordering is not permitted. 23. **Move Up:** Shifts the selected row(s) up within their parent. Disabled if already at the top or reordering is not permitted. 24. **Collapse All:** Collapses all parent tasks to hide their children. 25. **Expand All:** Expands all parent tasks to show their children. ### Edit Panel 26. **Delete:** Removes all selected rows from the chart and Salesforce. Available only when rows are selected and deletion is permitted. 27. **Dependencies:** Links between tasks that define scheduling relationships from a predecessor to a successor. This supports four link types, Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), and Start-to-Finish (SF), with optional lag or lead time. 28. **Assignees:** A task type that acts as a container and automatically rolls up its children's dates and progress. The start and end dates are read-only and are derived from the earliest child start date and the latest child end date. A task automatically becomes a Summary when it gains children. 29. **Details:** The Details tab in the right panel lets you edit a task’s core properties, including its fields, dates, and type. It includes a type switcher for Task, Milestone, and Summary, along with the editable fields for the selected task. For Summary tasks, the date fields are locked because they are derived from the task's children. 30. **Summary:** Acts as a container and automatically rolls up its children's dates and progress. Its start and end dates are read-only and are derived from the earliest child start date and the latest child end date. A task automatically becomes a Summary when it gains children. 31. **Milestone:** A Milestone is a zero-duration task type displayed as a diamond marker on a single date. It can represent an event, deadline, or checkpoint. A Milestone converts to a Task if its end date is set to differ from its start date. 32. **Task:** This is the layout where both the left panel, which contains the task grid and tree, and the right panel, which contains the editor, are visible at the same time alongside the timeline. 33. **Split View:** Refers to the layout where both the left panel (task grid/tree) and the right panel (editor) are visible simultaneously alongside the timeline. ### TimeLine 34. **Segment:** A Segment is a work-time block defined by a start and end date. It is used to exclude non-working periods, such as weekends and holidays, from task scheduling. Segment is configured in the Rules tab under Segment Rules. 35. **Dependencies :** The Dependencies tab in the right panel lists a task’s predecessors and successors. From here, you can add, edit lag or lead, and delete dependency links. 36. **Deadline End:** is a Target End deadline rule that represents a preferred finish boundary. Unlike a hard constraint, it does not lock the schedule but signals the intended end date. 37. **Deadline Start:** Deadline Start is a Target Start deadline rule that represents a preferred start boundary. Like Deadline End, it is advisory rather than enforced. ### Table View 38. **Action:** A context-dependent operation available on a task or dependency, such as Insert Before, Insert After, Add Child, or Delete, typically accessible via the right-click context menu on the timeline. 39. **Active Filter :** An Interactive Filter is a column-level filter panel with two tabs. The Values tab provides an Excel-style multi-select checklist, while the Conditions tab lets you filter text, number, and date fields using different operators. The filter is applied automatically with a 500ms debounce, so no manual Apply click is needed. 40. **Progress:** The completion percentage of a task (0–100%). Can be edited by dragging the progress handle inside a task bar, or via the Details/inline editor. Parent/summary progress is automatically rolled up from children. 41. **End Date:** The date a task is scheduled to finish. Editable on regular tasks via drag, resize, or the inline editor. Read-only on Summary tasks (auto-calculated from children). 42. **Start Date:** The date a task is scheduled to begin. Editable on regular tasks. Read-only on Summary tasks. 43. **Interactive Filter** : A column-level filter panel with two tabs: a **Values** tab (Excel-style multi-select checklist) and a **Conditions** tab (operator-based filtering for text, number, and date fields). Applies with a 500ms debounce; no manual Apply click needed. 44. **Quick Filter:** A search field that filters tasks by name or other indexed fields, based on the component configuration. 45. **hierarchical:** The hierarchical structure of tasks in the left panel, where parent tasks contain child tasks. Supports expand/collapse, drag-to-reorder, indent/outdent, and inline editing. {% endcolumn %} {% column width="8.333333333333314%" %} {% endcolumn %} {% endcolumns %} ## 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** * Icon Name : standard:chart * Enable multi-selet : ***Checked*** * Enable editing : ***Checked*** * Enable deletion : ***Checked*** * Enable checklist : ***Checked*** * Gantt Configuration JSON : [JSON string configuration ](#gantt-chart-relation-configuration) * Default View :**monthly** * Zoom Level : **100** * Show only work hours : **Checked** * 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 : 100 * List panel open by default: **Checked** * Row Height : 40 * Left Panel Width (%) : **50** * Right Panel Width (%) : **30** Below is a step by step tutorial to configure the **GM - Gantt Chart** component.👇 {% embed url="" %} ### **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: {% code expandable="true" %} ```json { "tasksConfig": [ { "taskObjectApiName": "Project__c", "titleFieldName": "Name", "fromDateFieldName": "StartDate__c", "toDateFieldName": "EndDate__c", "taskIconName": "standard:folder", "taskColor": [ { "exp": { "Status": "Completed" }, "color": "#04844b" }, { "exp": { "Status": "in-progress" }, "color": "#ff9500" }, { "color": "#ef8c80", "default": true } ], "acceptedChildren": [ { "apiName": "gmpkg__GanttTask__c", "parentFieldName": "gmpkg__Project__c" } ] }, { "taskObjectApiName": "gmpkg__GanttTask__c", "titleFieldName": "Name", "fromDateFieldName": "gmpkg__StartDate__c", "toDateFieldName": "gmpkg__EndDate__c", "progressFieldName": "gmpkg__Progress__c", "orderFieldName": "gmpkg__Order__c", "taskIconName": "standard:task", "taskColor": "#ef8c80", "taskDetailFields": [ "Name", "gmpkg__StartDate__c", "gmpkg__EndDate__c" ], "taskPopoverFields": [ "Name" ], "taskListFields": [ "Name" ], "acceptedChildren": [ { "apiName": "gmpkg__GanttTask__c", "parentFieldName": "gmpkg__Parent__c" } ], "resourceConfig": { "objectApiName": "gmpkg__GanttTaskAssignment__c", "taskIdField": "gmpkg__Task__c", "resourceField": "gmpkg__Resource__c" } } ], "projectConfig": { "resourceConfig": [ { "objectApiName": "gmpkg__GanttProjectResource__c", "kind": "human", "iconName": "standard:user", "titleField": "gmpkg__User__r.Name", "subtitleField": "gmpkg__User__r.Email", "avatarUrlField": "gmpkg__User__r.SmallPhotoUrl", "filter": { "gmpkg__ProjectId__c": { "operator": "=", "value": "$recordId" } } } ], "expandedLevels": 2 }, "dependenciesConfig": { "objectApiName": "Custom_Dependency__c", "predecessorFieldApiName": "PredecessorId__c", "successorFieldApiName": "SuccessorId__c", "typeField": { "fieldApiName": "Type__c", "mapping": { "FS": "Finish-Start", "SS": "Start-Start", "FF": "Finish-Finish", "SF": "Start-Finish" } }, "lagConfig": { "type": { "fieldApiName": "LagMode__c", "mapping": { "Immediate": "Immediate", "Lag": "Lag by", "Lead": "Lead by" } }, "amount": { "fieldApiName": "LagAmount__c" }, "unit": { "fieldApiName": "LagUnit__c", "mapping": { "Days": "days", "Weeks": "weeks" } } } } } ``` {% endcode %} ## ToolBar The toolbar sits above the Gantt Chart and holds every action you need to view, edit, and save your schedule. Buttons are enabled or disabled based on context — for example, **Delete** only becomes available once rows are selected, and **Save** stays greyed out until there are unsaved changes. ### Data and Changes | Button | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Refresh** | Reloads all chart data from Salesforce without closing the chart or losing your current view. | | **Save** | Commits all pending changes to Salesforce. Disabled until unsaved changes exist, and displays the number of pending edits in parentheses — for example, *Save (3)*. | | **Undo** | Reverses the last action. Disabled when there is nothing to undo. | | **Redo** | Restores the last undone action. Disabled when there is nothing to redo. | | **Delete** | Removes all selected rows from the chart and from Salesforce. Available only when rows are selected and deletion is permitted. | | **Export** | A menu of options for saving your task data as a file: **Print** opens the browser print/PDF dialog, **Export as CSV** downloads a comma-separated file, and **Export as Excel** downloads a formatted workbook with a frozen header row, outline grouping, and auto-sized columns. | ### Timeline View | Button | Description | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Zoom In** | Narrows the visible time window to show more detail, stepping through finer scales (year → month → week → day). Disabled at the finest level. | | **Zoom Out** | Widens the visible time window to show less detail, stepping through coarser scales (day → week → month → year). Disabled at the coarsest level. | | **View** | A selector for the timeline scale: **Day**, **Week**, **Month**, **Year**, or **Full**, which auto-fits the entire project into the visible area. | | **Date Picker** | A calendar input for choosing a reference date to centre the timeline on. The selectable range is bounded by the project's earliest and latest task dates. | | **Horizontal Scroll** | Enables automatic horizontal scrolling so the current selection stays visible as you edit. Useful when working in narrow time windows or deep task hierarchies. | ### Layout | Button | Description | | ---------------------- | ----------------------------------------------------------------------------- | | **Toggle Left Panel** | Shows or hides the task tree and filters panel on the left side of the chart. | | **Toggle Right Panel** | Shows or hides the Edit Panel on the right side of the chart. | | **Expand All** | Expands every parent task in the tree to reveal all children. | | **Collapse All** | Collapses every parent task so only top-level rows remain visible. | ### Highlighting | Button | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Overdue** | Highlights tasks whose end date has passed while progress is still below 100%. When enabled, at-risk items are flagged with an amber background in both the task list and the chart. | | **Critical Path** | Highlights the longest zero-slack chain of dependent tasks — the sequence that determines the project's minimum completion date. Any slip on a critical task pushes the project end date. | ### Baselines A baseline is a saved snapshot of your schedule, used to compare the plan against reality as work progresses. | Button | Description | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Create a Baseline** | Captures the current schedule as a new named snapshot stored in Salesforce, recording every task's start date, end date, and progress. Disabled while unsaved changes exist, so save first. | | **Select Baseline** | A dropdown listing all saved baselines, plus a **None** option. Selecting one overlays neutral grey reference bars beneath the current task bars so you can see variance at a glance. | ### Scheduling | Button | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Scheduling Mode** | Controls how the chart recalculates task dates when dependencies change. **MS Project** is dependency-aware but respects where you place a task. **Auto** re-anchors tasks fully automatically. **Manual** applies no automatic rescheduling — violations are flagged but not enforced. | ### Reordering These actions apply to the selected row and change its position within the task hierarchy. | Button | Description | | -------------- | ---------------------------------------------------------------- | | **Move Up** | Moves the selected task one position earlier among its siblings. | | **Move Down** | Moves the selected task one position later among its siblings. | | **Move Right** | Indents the task, making it a child of the row above. | | **Move Left** | Outdents the task, promoting it one level up in the hierarchy. | {% hint style="info" %} Indenting a task turns its new parent into a **Summary** task, whose dates and progress are then rolled up from its children. {% endhint %} ### Filters | Button | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Quick Filter** | A saved filter you can apply to the task list in one click. | | **Interactive Filter** | A filter built on the fly from the values in a column, letting you narrow the task list without a saved definition. | | **Active Filter** | Any filter currently applied. A filter-summary row appears in the task list header — for example, *= Active* or *contains "bug"* — along with a **Clear All Filters** option. | {% hint style="info" %} Stacking an interactive filter on top of an existing filter can return an empty task list, since the two conditions are combined. If the chart looks empty after filtering, clear all filters and reapply one at a time. {% endhint %} {% embed url="" %} ## Edit Panel The Edit Panel is the panel on the right side of the Gantt Chart. It is where you review project health and edit the properties of individual tasks without leaving the timeline. Use **Toggle Right Panel** in the toolbar to show or hide it. The panel is context sensitive: * When no task is selected, it displays the **project overview**. * When a task is selected, it switches to the **task editor**, organized into tabs. ### Project Overview Selecting the project row or deselecting all tasks displays a summary of the whole project. | Element | Description | | ---------------- | --------------------------------------------------------------------------------------------------- | | Task breakdown | The number of tasks in each status: **Done**, **In Progress**, and **New**. | | Milestones | The total number of milestones in the project. | | Overdue | The number of tasks whose end date has passed while progress is below 100%. | | Progress slider | Drag to set the project's overall completion percentage. The breakdown above updates automatically. | | Mark as complete | Sets the project to 100% complete in a single click. | ### Details The **Details** tab is where you edit a task's core properties. **Task type switcher** : Convert the selected record between the three task types: * **Task** : the standard work unit, drawn as a bar spanning a start and end date. * **Milestone** : a zero-duration marker drawn as a diamond on a single date, used for events, deadlines, and checkpoints. * **Summary** : a container that rolls up the dates and progress of its children. A task becomes a Summary automatically as soon as it gains children. **Fields** : Name, start date, end date, progress, and any additional fields exposed in your Gantt configuration. {% hint style="info" %} On a Summary task, the start and end dates are read-only. They are derived from the earliest child start date and the latest child end date. {% endhint %} ### Dependencies The **Dependencies** tab lists every link attached to the selected task, split into **predecessors** (tasks that come before) and **successors** (tasks that come after). From here you can: * Add a new dependency by selecting the linked task and the dependency type Finish-to-Start, Start-to-Start, Finish-to-Finish, or Start-to-Finish. * Apply a **lag** to push the linked task later, or a **lead** (a negative lag) to pull it earlier. Lag is set as an amount plus a unit, such as 2 days or 1 week. * Delete an existing link. Dependencies can also be created directly on the timeline by dragging from the edge of one task bar to another. ### Assignees The **Assignees** tab manages who is allocated to the selected task. Search the project resource pool, then add or remove resources as needed. {% hint style="info" %} On a Summary task, the assignee list is read-only and shows the resources rolled up from its children. {% endhint %} ### Rules The **Rules** tab holds the scheduling rules that govern when a task can be worked on. #### Segment Rules A segment is a work-time block defined by a start and end date. Segments let you exclude non-working periods weekends, holidays, or planned shutdowns so they are not counted in a task's duration. #### Deadlines Deadlines mark a preferred boundary rather than a fixed one. **Target Start** signals the intended start date and **Target End** the intended finish date. Neither locks the schedule; they are advisory and simply flag the intent. #### Date Constraints Date constraints fall into two categories. **Hard locks** pin the task to an exact date, regardless of any other schedule changes. Marked with a red edge tick. * **MSO** : Must Start On : task start must equal this exact date * **MFO** : Must Finish On : task end must equal this exact date **Range constraints** set a boundary instead of a fixed date, leaving the scheduler some flexibility. Marked with an amber edge tick. * **SNET** : Start No Earlier Than : task start must be on or after this date * **SNLT** : Start No Later Than : task start must be on or before this date * **FNET** : Finish No Earlier Than : task end must be on or after this date * **FNLT** : Finish No Later Than : task end must be on or before this date How strictly constraints are enforced depends on the active **Scheduling Mode**. In Manual mode, violations are flagged but not corrected. {% embed url="" %} ## Task Scheduling Mode Scheduling mode controls what happens when you move a task. It determines whether the Gantt Chart records your move as a **date constraint** pinned to that task, or as an adjustment to the **dependency** linking it to its predecessor. The mode is set from the **Scheduling Mode** button in the toolbar and applies to the whole chart, not to individual tasks. ### Available Modes
ModeMoving a taskWhat drives the schedule
MS ProjectSets a date constraint on the taskConstraints take priority over dependencies
AutoAdjusts the lag or lead on the task's dependencyDependencies remain in control
ManualApplies your dates as enteredYou do the chart does not reschedule on your behalf
Choose **MS Project** when you need individual tasks to hold fixed dates. Choose **Auto** when you want the dependency chain to drive the schedule and downstream tasks to shift automatically. Choose **Manual** when you want full control over task dates and no automatic rescheduling. ### MS Project Mode In this mode, moving a task manually sets a date constraint on it. The constraint that gets applied depends on which dates you change.
What you changeConstraint applied
Start dateSNET — Start No Earlier Than
Finish dateFNET — Finish No Earlier Than
Task bar position SNET — Start No Earlier Than
Once a constraint is in place, it governs where the task sits. Constraints take priority over dependencies, so the constraint date is honored even when it conflicts with the task's links. Removing the constraint hands control back to the dependency chain, and the task returns to the position its links dictate. For the full list of available date constraints, including hard locks and the remaining range constraints, see **Date Constraints** in the Edit Panel section. ### Auto Mode In this mode, moving a task does not create a constraint. Instead, the Gantt Chart adjusts the lag or lead on the dependency connecting the task to its predecessor. The link stays intact, and the dependency chain stays in control of the schedule. Because the chain is preserved, moving a task also moves everything downstream of it. #### Constrained tasks in Auto mode A task carrying a constraint from earlier work will not move, even in Auto mode. When this happens, a message appears prompting you to force the move. To force it, hold the **Command** key while dragging. ### Manual Mode In this mode moving a task neither sets a constraint nor adjusts the dependency, and no other task is rescheduled as a result. Dependencies and date constraints are still recorded and still visible on the chart they simply are not enforced. Where a task's dates conflict with its links or its constraints, the violation is **flagged but not corrected**, leaving the decision to you. Use Manual mode when you are laying out a schedule by hand, working with dates fixed by an outside commitment, or drafting a plan before the dependency logic is settled. ### Switching Between Modes Switching mode changes how future moves are recorded. Constraints already set on tasks are retained, so returning to **MS Project** mode restores constraint-driven scheduling. {% hint style="info" %} Whether switching back to MS Project mode repositions tasks that were moved while in Auto mode, or only affects moves made from that point onward. {% endhint %} {% embed url="" %}