> 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 **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:point\_down:
{% columns fullWidth="false" %} {% column width="91.66666666666669%" %} ### **ToolBar** 1. **Export** : A toolbar menu offering options to save your task data as a file. \ Includes: **Print** (opens a browser print/PDF dialog), **Export as CSV** (downloads task data as a comma-separated file), and **Export as Excel** (downloads an Excel workbook with formatting, frozen header row, outline grouping, and auto column widths). 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 the current date and whose progress is less than 100%. Toggle on/off to flag at-risk items with an amber background in both the task list and 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 chart recalculates task dates when dependencies change. Three modes: **MS Project** (dependency-aware but respects your placement), **Auto** (fully automatic re-anchoring), and **Manual** (no automatic rescheduling; violations 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 enforce scheduling relationships (predecessor → successor). 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, automatically rolling up its children's dates and progress. Start/end dates are read-only and derived from the earliest child start and latest child end. A task becomes a Summary automatically when it gains children. 29. **Details:** The right panel tab for editing a task's core properties (fields, dates, type). Includes a type switcher (Task / Milestone / Summary) and editable fields. Summary task date fields are locked since they are derived from children. 30. **Summary:** A task type that acts as a container, automatically rolling up its children's dates and progress. Start/end dates are read-only and derived from the earliest child start and latest child end. A task becomes a Summary automatically when it gains children. 31. **Milestone:** A zero-duration task type rendered as a diamond marker on a single date, representing an event, deadline, or checkpoint. Converts to a Task if its end date is set to differ from its start. 32. **Task:** The standard work unit, rendered as a draggable bar spanning a defined start and end date. Duration is multi-day or single-day and can be edited by dragging/resizing. 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 work-time block defined by a start and end date, used to exclude non-working periods (weekends, holidays) from task scheduling. Configured in the Rules tab under Segment Rules. 35. **Dependencies :** The right panel tab listing a task's predecessors and successors, with options to add, edit lag/lead, and delete dependency links. 36. **Deadline End:** A "Target End" deadline rule representing a preferred finish boundary. Unlike a hard constraint, it doesn't lock the schedule but signals the intended end date. 37. **Deadline Start:** A "Target Start" deadline rule representing 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 :** A filter currently applied to the task grid. When active, a filter-summary row appears in the grid header (e.g., "= Active", "contains 'bug'") and a Clear All Filters option is displayed. 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="" %}