A SharePoint Framework (SPFx) web part for project management with five views — Portfolio, Gantt chart, List, Kanban board, and Dashboard — all backed by SharePoint lists.
- Portfolio View — Cross-project overview showing all projects as summary cards with computed health indicators, progress bars, task counts, and a mini date-range timeline. Accessible from the project selector dropdown.
- Health Status — Automatic "On Track / At Risk / Overdue" indicators computed from each task's dates and progress percentage — no manual entry required. Shown as badges in the List, Kanban, Gantt tooltip, and Portfolio views, with a "By Health" Gantt bar color option.
- Gantt Chart — Custom SVG timeline with drag-to-move, drag-to-resize, dependency arrows, phase grouping, zoom levels (Day / Week / Month / Quarter), and a today indicator
- List View — Sortable, Excel-style grid with inline status and priority editing, overdue highlighting, progress bars, and health badges
- Kanban Board — Drag-and-drop cards across status columns (Not Started → In Progress → On Hold → Completed → Cancelled), with health badges on each card
- Project management — Each project gets its own SharePoint list with 15 pre-built columns (status, priority, dates, assignee, % complete, phase, milestones, dependencies, and more)
- Display settings — Customize colors (including by health), header theme, week numbering, bar style, row height, and show/hide toggles including health badges
- Export — Download tasks as Excel, export a full PowerPoint project report (cover, summary, Gantt chart, and recent activity), or save the Gantt as a high-resolution PNG
- Import — Bring in tasks from Excel/CSV files (including MS Project exports) or directly from Microsoft Planner, with a column-mapping screen for non-standard headers
- Autocomplete — Phase and Assigned To fields suggest values already used in the project
- Accessible from the project selector dropdown (⊞ Portfolio) — not a tab in the view switcher
- Responsive card grid showing all projects at a glance
- Each card shows: project name, manager avatar, manual status badge, computed health badge, overall progress bar, task count breakdown (Done / Active / At Risk / Overdue), and a mini timeline bar with a today marker
- Header bar shows aggregate health summary (X On Track / Y At Risk / Z Overdue) across all projects
- Sort cards by name, health, status, or completion percentage
- Click any card to navigate directly into that project's Gantt view
- Colored project title bar at the top of the timeline
- Two-row toolbar: project/task actions on the first row; view and zoom controls on the second
- Sticky task list on the left; scrollable SVG timeline on the right
- Four zoom levels: Day, Week, Month, Quarter
- Task bars color-coded by status, priority, phase, or health; progress overlay shows % complete
- Drag a bar horizontally to move dates; drag the right edge to resize
- Dependency arrows drawn between tasks
- Phase rows collapse/expand to group related tasks
- Hover tooltip shows task name, dates, status, priority, assignee, % complete, and health indicator
- Today line with red indicator
- Click any column header to sort ascending/descending
- Change status or priority inline via dropdown — saves to SharePoint immediately
- Health column shows an automatic On Track / At Risk / Overdue badge for each task
- Overdue tasks highlighted in red
- Phase group rows visually separate tasks
- Subtasks indented under their parent
- Five columns matching task statuses
- Drag cards between columns to update status
- Cards show priority color, tags, health badge, due date, assignee avatar, and progress bar
- Add Task button in each column
Click any task name or + Add Task to open the task panel. It has three tabs:
| Tab | Key fields |
|---|---|
| Basic | Name, description, dates, status, priority, % complete slider, assigned to |
| Details | Phase (auto-colors the bar), milestone toggle, custom bar color picker, notes |
| Links | Parent task (sub-task hierarchy), dependencies (removable chips + dropdown) |
Click ⚙ Options in the toolbar (visible when a project is selected) to open the settings panel.
| Setting | Options |
|---|---|
| Color Coding | By Status, By Priority, By Phase (each phase gets a consistent auto-color), By Health (On Track = blue, At Risk = orange, Overdue = red) |
| Header Color | Dark (default), Navy, Teal, Purple, Light |
| Week Numbering | ISO weeks (W23, W24…) or Project-relative (W1, W2, W3… from the first task's start date) |
| Bar Style | Gradient or Flat |
| Row Height | Compact (32px), Normal (40px), Spacious (52px) |
| Show / Hide | Weekend shading, dependency arrows, progress % on bars, assignee name on bars, health status badges |
Settings are applied live and remembered for the session.
Project-relative week numbers are particularly useful for presentations — stakeholders can refer to "Week 3" without needing to know the calendar date.
All export options are in the ⋯ menu (top-right of the toolbar).
Downloads <ProjectName> - Tasks.xlsx with all task columns (name, phase, dates, status, priority, assignee, % complete, milestone flag, notes). Columns are auto-sized to their content.
Downloads <ProjectName> - Project Report.pptx — a four-slide deck:
| Slide | Contents |
|---|---|
| Cover | Project title, status, date range, description, and project manager |
| Summary | Task counts by status, overall progress bar, and status breakdown |
| Gantt Timeline | Full Gantt chart rendered as a high-resolution PNG image |
| Summary & Recent Activity | Project overview on the left; tasks completed or updated in the past 7 days on the right |
Renders the full Gantt chart — every task, the complete date range, the project title bar, and the current color/theme settings — as a clean 2× high-resolution PNG. No browser window cropping. Suitable for pasting directly into Word or email.
The export uses the current Display Settings, so you can tune colors and layout before exporting.
| Requirement | Version |
|---|---|
| Node.js | 18.x |
| SharePoint Online | Any |
| SPFx | 1.20.0 |
| Permissions | Site Member or above (list creation requires Site Owner on first use) |
For Planner import, a Microsoft 365 admin must approve Graph API permissions once after deployment (see Planner Import Setup).
The web part supports Microsoft 365 guest users (Azure AD B2B external collaborators) with a small set of caveats.
Once a guest has been invited to the SharePoint site and granted Site Member (Contribute) permission by a Site Owner, they can:
| Feature | Supported |
|---|---|
| View projects, tasks, and all views (Portfolio, Gantt, List, Kanban, Dashboard) | ✅ |
| Add, edit, and delete tasks | ✅ |
| Export to Excel, PowerPoint, and PNG | ✅ (all client-side) |
| Be assigned to tasks | ✅ (Assigned To is a plain-text field — no Azure AD lookup required) |
| Import tasks from Excel / CSV | ✅ |
| Feature | Limitation | Workaround |
|---|---|---|
| Create new projects | Requires "Manage Lists" permission — guests cannot be Site Owners | An internal Site Owner or Member creates the project; guests work within it |
| Planner import | Requires Group.Read.All Graph permission; guests typically cannot read organizational Planner plans |
Export the Planner plan to Excel first, then import via the Excel path |
- In the SharePoint site, go to Settings → Site Permissions → Invite People
- Enter the guest's email address — they'll receive an invitation email
- Grant them Edit (Contribute) permission, which maps to Site Member access
- An internal Site Owner should create any new projects before the guest arrives; the guest can then manage all tasks within those projects
Note: Guests must accept the SharePoint invitation and sign in with their Microsoft account (personal, work, or school) before they can access the site. This is standard Microsoft 365 B2B guest behavior and is not specific to this web part.
No build required. Download the pre-built
.sppkgfrom the latest release, upload it to your App Catalog, and you're done. The steps below are only needed if you want to modify or develop the web part.
- Go to the latest release and download
sharepoint-smart-gantt-chart.sppkg - Upload it to your SharePoint App Catalog (tenant-wide or site collection)
- Approve any API permission requests if prompted (required for Planner import only — see Planner Import Setup)
- Add the Smart Gantt Chart web part to any SharePoint page
That's it — no Node.js, no build tools, no configuration files.
git clone <repo-url>
cd SharePointSmartGanttChart
npm installconfig/serve.json is excluded from the repo (it contains your tenant URL). Copy the example file and fill in your tenant:
cp config/serve.json.example config/serve.jsonThen edit config/serve.json:
{
"port": 4321,
"https": true,
"initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"
}gulp trust-dev-certgulp serveThe browser will open to your SharePoint workbench. Add the Smart Gantt Chart web part from the toolbox.
# Bundle (minified)
gulp bundle --ship
# Package the .sppkg
gulp package-solution --shipUpload sharepoint/solution/sharepoint-smart-gantt-chart.sppkg to your SharePoint App Catalog.
The web part creates and manages two types of lists on the current site:
| List | Purpose |
|---|---|
SmartGantt_Projects |
Registry of all projects (created automatically on first use) |
SGP_<ProjectName>_<id> |
One list per project, containing all tasks |
Project list columns (created automatically):
| Column | Type | Notes |
|---|---|---|
| Title | Text | Task name |
| TaskDescription | Note | Optional description |
| StartDate | DateTime | |
| DueDate | DateTime | |
| Status | Choice | Not Started / In Progress / Completed / On Hold / Cancelled |
| Priority | Choice | Critical / High / Medium / Low |
| PercentComplete | Number | 0–100 |
| AssignedToName | Text | Assignee display name |
| AssignedToEmail | Text | Assignee email |
| Phase | Text | Groups tasks on the Gantt |
| IsMilestone | Boolean | Renders as a diamond on the Gantt |
| ParentTaskId | Number | ID of parent task (for subtask hierarchy) |
| Dependencies | Text | Comma-separated task IDs |
| Notes | Note | Rich notes field |
| TaskColor | Text | Hex color override (auto-colors by status if blank) |
| SortOrder | Number | Display order |
Access import from the ⋯ menu → Import Tasks…
- Drop or browse for a
.xlsx,.xls,.csv, or.odsfile - The importer reads the first sheet and detects headers
- Common column names are auto-mapped (e.g. "Owner" → Assigned To, "Finish" → Due Date)
- Unrecognized columns appear in the column mapper — assign each to a Smart Gantt field or mark as Skip
- A preview shows the first 3 rows with mapped values
- Click Import to create all tasks
Microsoft Project Desktop: Use File → Save As → Excel Workbook (.xlsx) in Project, then import that file. All standard Project columns are recognized automatically.
- Select Microsoft Planner as the source
- Browse the list of Planner plans you have access to
- Select a plan — tasks load automatically
- Planner buckets become Phases; assignments, dates, and % complete are mapped automatically
- Click Import
Planner import requires Graph API permissions approved once by a Microsoft 365 admin:
- Deploy the
.sppkgto the App Catalog - In the SharePoint Admin Center, go to Advanced → API Access
- Approve the following requests:
Microsoft Graph — Tasks.ReadMicrosoft Graph — Group.Read.AllMicrosoft Graph — User.ReadBasic.All
These permissions are tenant-wide and only need to be approved once.
Two ready-to-import .xlsx files are included in docs/sample-data/ to help you try the import feature immediately.
| File | Scenario | Phases | Tasks |
|---|---|---|---|
Tech-Conference-Tasks.xlsx |
Annual tech conference planning, conference days Oct 1–2 2026 | Planning, Content, Logistics, Marketing | 25 |
Website-Rollout-Tasks.xlsx |
Corporate website redesign and launch project | Discovery, Design, Build, Launch | 20 |
Import either file via ⋯ menu → Import Tasks… — all columns are named to match Smart Gantt's auto-mapping, so no manual column mapping is required.
src/
└── webparts/smartGantt/
├── SmartGanttWebPart.ts # Web part entry point
├── SmartGanttWebPart.manifest.json
├── models/
│ └── index.ts # IProject, ITask, IGanttDisplaySettings,
│ # TaskHealth, ProjectHealth, IProjectTaskStats,
│ # color constants, theme definitions
├── utils/
│ └── healthUtils.ts # computeTaskHealth, computeProjectHealth,
│ # healthColor, healthLabel — pure functions, no React
├── services/
│ ├── SharePointService.ts # All SharePoint list operations (PnPjs);
│ # includes getProjectTaskStats, getAllProjectStats
│ ├── ImportService.ts # Excel parsing, Planner Graph calls, batch import
│ └── ExportService.ts # Excel export, SVG/PNG Gantt rendering
└── components/
├── SmartGantt.tsx # Root component — state, routing between views
├── toolbar/
│ └── Toolbar.tsx # Two-row toolbar: project selector (with Portfolio
│ # entry) + view controls
├── gantt/
│ ├── GanttChart.tsx # Custom SVG Gantt chart
│ └── GanttSettings.tsx # Display settings panel
├── views/
│ ├── ListView.tsx # Sortable grid view with health column
│ ├── KanbanView.tsx # Drag-and-drop Kanban board with health badges
│ ├── DashboardView.tsx # Summary stats and recent activity
│ └── PortfolioView.tsx # Cross-project card grid with health and stats
├── panels/
│ ├── ProjectPanel.tsx # Create / edit project side panel
│ └── TaskPanel.tsx # Create / edit task side panel (3 tabs)
├── common/
│ ├── AutocompleteField.tsx # Reusable keyboard-navigable suggestion input
│ └── HealthBadge.tsx # On Track / At Risk / Overdue / Done pill badge
└── import/
├── ImportPanel.tsx # 4-step import flow
└── ColumnMapper.tsx # Column mapping UI with auto-map and preview
| Library | Version | Purpose |
|---|---|---|
| SPFx | 1.20.0 | SharePoint web part framework |
| React | 17.0.1 | UI |
| Fluent UI | 8.125.6 | Microsoft design system components |
| PnPjs | 3.26.0 | SharePoint REST API client |
| SheetJS (xlsx) | 0.18.5 | Excel/CSV file parsing and export |
| pptxgenjs | 4.0.1 | PowerPoint export |
| date-fns | 2.30.0 | Date calculations for Gantt rendering and export |
Microsoft Graph is accessed via the SPFx built-in msGraphClientFactory — no extra SDK required.
The web part has one property pane setting:
| Property | Default | Description |
|---|---|---|
| Title | Smart Gantt Chart | Web part display title |
All other configuration (projects, tasks, colors, display settings) is managed through the web part UI itself.
"You do not have permission to create lists" — Project creation requires Site Owner permissions. Ask your SharePoint site owner to create the first project, after which Site Members can manage all tasks within it.
"Planner plans are not showing up" — The three Microsoft Graph permissions (Tasks.Read, Group.Read.All, User.ReadBasic.All) have not been approved. A Microsoft 365 admin must approve them once in SharePoint Admin Center → Advanced → API Access. See Planner Import Setup.
gulp serve fails with a certificate error — Run gulp trust-dev-cert once to install the local dev certificate, then retry gulp serve.
gulp serve fails with a Node version error — SPFx 1.20.0 requires Node 18.x exactly. Use nvm-windows to switch: nvm use 18.
Portfolio view is slow to load — Stats for all projects are fetched in parallel on first visit. For portfolios with 20+ projects, this may take several seconds. A loading spinner is displayed while fetching. Stats are cached until the next project or task change.
Display settings reset after a page reload — This is expected behavior in the current version. Settings are session-only and reset on reload. See Known Limitations.
- MS Project Desktop (.mpp files) — the binary
.mppformat cannot be parsed in a browser. Use File → Save As → Excel in Project Desktop instead. - Planner import requires admin approval of Graph permissions (one-time setup).
- Dependencies imported from Excel are stored as text and not auto-resolved to task IDs across imports.
- Display settings are session-only and reset on page reload. Future work could persist them to the web part property bag.
- The web part requires Site Owner permissions on the SharePoint site for the first project creation (list creation). Subsequent task operations work with Site Member permissions.
- Guest users cannot create projects (list creation requires elevated permissions), but can fully manage tasks in existing projects. See External / Guest User Access for setup instructions.
- Portfolio view loads task stats for all projects in parallel on first visit. For portfolios with 30+ projects this may take a few seconds; a spinner is shown while loading.
| Portfolio view | Gantt chart |
|
|
| List view with Health column | Kanban board |
|
|
| Display Settings | Export menu |
 |
|
| Task panel — Details tab | Task panel — Links tab |
|
|
MIT © 2026 Sean Regan