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👇
ToolBar
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).
Refresh: Reloads all chart data from Salesforce without closing the chart or losing your current view.
Expand :Expands a parent task to reveal its children (see also Expand All).
Toggle Right Panel: Shows or hides the task details editor panel on the right side of the chart.
Toggle Left Panel: Shows or hides the task tree and filters panel on the left side of the chart.
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.
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.
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.
Delete: Removes all selected rows from the chart and Salesforce. Available only when rows are selected and deletion is permitted.
Redo: Restores the last undone action. Disabled when there are no actions to redo.
Undo: Reverses the last action. Disabled when there are no changes to undo.
Save: Commits all pending changes to Salesforce. Disabled until unsaved changes exist. Displays the count of pending edits in parentheses (e.g., "Save (3)").
Zoom In: Increases detail to show a narrower time window, moving through finer views (day → week → month → year). Disabled at the finest level.
Zoom Out: Decreases detail to show a broader time window, moving through coarser views (year → month → week → day). Disabled at the coarsest level.
View: A selector to choose between Day, Week, Month, Year, or Full (auto-fit) time scales.
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.
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.
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.
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).
Move Left (Outdent): Promotes the selected row(s) out one level in the hierarchy. Disabled if already at the top level.
Move Right (Indent): Nests the selected row(s) under the row above as children. Disabled if the row above is not a valid parent.
Move Down: Shifts the selected row(s) down within their parent. Disabled if already at the bottom or reordering is not permitted.
Move Up: Shifts the selected row(s) up within their parent. Disabled if already at the top or reordering is not permitted.
Collapse All: Collapses all parent tasks to hide their children.
Expand All: Expands all parent tasks to show their children.
Edit Panel
Delete: Removes all selected rows from the chart and Salesforce. Available only when rows are selected and deletion is permitted.
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.
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.
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.
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.
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.
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.
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
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.
Dependencies : The right panel tab listing a task's predecessors and successors, with options to add, edit lag/lead, and delete dependency links.
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.
Deadline Start: A "Target Start" deadline rule representing a preferred start boundary. Like Deadline End, it is advisory rather than enforced.
Table View
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.
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.
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.
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).
Start Date: The date a task is scheduled to begin. Editable on regular tasks. Read-only on Summary tasks.
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.
Quick Filter: A search field that filters tasks by name or other indexed fields, based on the component configuration.
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.
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 :
Select an Project record and edit the page in the Lightning App Builder.
From the components list, drag and drop the component GM - Gantt Chart.
The component is now ready for configuration in the Lightning App Builder.
The property values can be configured to tailor the needs of the end-user.
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
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.👇
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 objectfieldName: 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 typemultiple: 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:
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
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
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
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
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.
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
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.
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.
Filters
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.
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.
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.
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.
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.
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
MS Project
Sets a date constraint on the task
Constraints take priority over dependencies
Auto
Adjusts the lag or lead on the task's dependency
Dependencies remain in control
Manual
Applies your dates as entered
You 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.
Start date
SNET — Start No Earlier Than
Finish date
FNET — 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.
Last updated
Was this helpful?