Skip to content

Commit 4faf817

Browse files
anooptanoopt
authored
Merge pull request #205 from anoopt/main
Merge PR #204
2 parents 60c2710 + e0d12c0 commit 4faf817

33 files changed

Lines changed: 36139 additions & 0 deletions

‎samples/ChartCard-Plan-Tracker/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
release
13+
solution
14+
temp
15+
*.sppkg
16+
.heft
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# OSX
22+
.DS_Store
23+
24+
# Visual Studio files
25+
.ntvs_analysis.dat
26+
.vs
27+
bin
28+
obj
29+
30+
# Resx Generated Code
31+
*.resx.ts
32+
33+
# Styles Generated Code
34+
*.scss.ts

‎samples/ChartCard-Plan-Tracker/README.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Plan Tracker
2+
3+
## Summary
4+
5+
**Plan Tracker** is a SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner. It allows users to view buckets, tasks, project members, and personal assignments in an organized and customizable interface. Tasks can be sorted by priority or due date, and include visual status indicators, inline navigation, and plan-level insights.
6+
7+
![Plan Tracker in action](./assets/plan-tracker-screenshot-01.png)
8+
![Plan Tracker in action](./assets/plan-tracker-screenshot-02.png)
9+
![Plan Tracker in action](./assets/plan-tracker-screenshot-03.png)
10+
![Plan Tracker in action](./assets/plan-tracker-screenshot-04.png)
11+
12+
## Used SharePoint Framework Version
13+
14+
![version](https://img.shields.io/badge/version-1.21.1-green.svg)
15+
16+
## Applies to
17+
18+
- [SharePoint Framework](https://aka.ms/spfx)
19+
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
20+
21+
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
22+
23+
## Prerequisites
24+
25+
- A valid Microsoft 365 tenant
26+
- Microsoft Planner license
27+
- Microsoft Graph API permissions for Planner and Users
28+
- SPFx development environment set up
29+
30+
## Required Microsoft Graph API Permissions
31+
32+
To ensure proper functionality, the following Graph API permissions must be **approved in the SharePoint Admin Center** under **API Access** after deployment:
33+
34+
The **Plan Tracker** ACE requires the following **delegated Microsoft Graph API permissions**. These must be approved by a tenant administrator in the [Microsoft 365 Admin Center](https://admin.microsoft.com).
35+
36+
| Permission Type | Permission Scope | Description |
37+
|------------------|--------------------------|-----------------------------------------------------|
38+
| Delegated | `Planner.Read` | Read tasks, buckets, and plans in Planner |
39+
| Delegated | `Group.Read.All` | Access Planner plan group membership |
40+
| Delegated | `User.ReadBasic.All` | Read user basic profiles (for task assignees) |
41+
| Delegated | `Organization.Read.All` | Read tenant ID (used for Planner URL generation) |
42+
43+
> **Note:** This solution uses read-only permissions to ensure safe, non-destructive access to Planner data.
44+
45+
46+
> These are declared in `package-solution.json` under `webApiPermissionRequests`.
47+
48+
49+
## Solution
50+
51+
| Solution | Author(s) |
52+
| ----------- | ------------------------------------------------------- |
53+
| plan-tracker | Ahmad Jad Alhak, [ahmad-jad-alhak](https://github.com/ahmad-jad-alhak) |
54+
55+
## Version history
56+
57+
| Version | Date | Comments |
58+
| ------- | ------------- | -------------------------- |
59+
| 1.0 | July 10, 2025 | Initial release |
60+
61+
## Disclaimer
62+
63+
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
64+
65+
---
66+
67+
## Minimal Path to Awesome
68+
69+
- Clone this repository
70+
- Navigate to the solution folder:
71+
```bash
72+
cd plan-tracker
73+
```
74+
- Install dependencies and start the local server:
75+
```bash
76+
npm install
77+
gulp serve
78+
```
79+
80+
## Features
81+
82+
This extension offers the following features:
83+
84+
- View Planner buckets and task summaries in card-based layouts
85+
- Filter and sort tasks by due date and priority
86+
- View only “My Tasks” assigned to the current user
87+
- Display project members from the Planner plan
88+
- Navigate directly to Microsoft Planner for any task
89+
- Customize card title and icon via property pane
90+
91+
> Designed with usability, performance, and modern UI alignment in mind.
92+
93+
## References
94+
95+
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
96+
- [Building for Microsoft Teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
97+
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
98+
- [Publish SPFx apps to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
99+
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp)
100+
101+
102+
## Quick Navigation & Views
103+
104+
Plan Tracker includes three main views for navigating and interacting with your Planner data:
105+
106+
### 1. Planner Buckets View
107+
- Displays all Planner buckets in a clean card layout.
108+
- Allows drill-down into specific buckets.
109+
- Tasks are shown with color-coded status and icons.
110+
- Sorting options: **Priority** and **Due Date**.
111+
112+
### 2. My Tasks View
113+
- Shows only tasks assigned to the current user.
114+
- Same task layout as Planner view, with sorting support.
115+
- Great for quickly reviewing individual work items.
116+
117+
### 3. Project Members View
118+
- Displays members associated with the Planner plan.
119+
- Useful for understanding team composition and responsibilities.
120+
121+
All views support consistent styling, vertical alignment, and adaptive layouts.
122+
123+
## Mapping Task Status to Short Names and Colors
124+
125+
Plan Tracker supports a customizable mapping between Planner task status and their visual representation.
126+
127+
| Status | Short Name | Color |
128+
|---------------|------------|-----------|
129+
| Not Started | NS | `#E0E0E0` |
130+
| In Progress | WIP | `#ffb900` |
131+
| Completed | COM | `#4CAF50` |
132+
133+
> These mappings are editable through the **Property Pane** using a collection data control. "Name" is locked, but users can change `shortName` and `color`.

‎samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-01.png‎

236 KB
Loading

‎samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-02.png‎

35.2 KB
Loading

‎samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-03.png‎

140 KB
Loading

‎samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-04.png‎

118 KB
Loading

‎samples/ChartCard-Plan-Tracker/assets/sample.json‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
[
2+
{
3+
"name": "pnp-sp-fx-aces-plan-tracker",
4+
"source": "pnp",
5+
"title": "Plan Tracker",
6+
"shortDescription": "SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner with bucket views, task management, and team insights.",
7+
"url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ChartCard-Plan-Tracker",
8+
"longDescription": [
9+
"Plan Tracker is a SharePoint Framework (SPFx) Adaptive Card Extension (ACE) that provides a visually engaging and interactive dashboard for Microsoft Planner. It allows users to view buckets, tasks, project members, and personal assignments in an organized and customizable interface. Tasks can be sorted by priority or due date, and include visual status indicators, inline navigation, and plan-level insights."
10+
],
11+
"creationDateTime": "2025-07-10",
12+
"updateDateTime": "2025-07-10",
13+
"products": [
14+
"SharePoint",
15+
"Viva",
16+
"Microsoft Planner"
17+
],
18+
"metadata": [
19+
{
20+
"key": "CLIENT-SIDE-DEV",
21+
"value": "React"
22+
},
23+
{
24+
"key": "SPFX-VERSION",
25+
"value": "1.21.1"
26+
}
27+
],
28+
"thumbnails": [
29+
{
30+
"type": "image",
31+
"order": 100,
32+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-01.png",
33+
"alt": "Plan Tracker main dashboard showing Planner buckets and tasks"
34+
},
35+
{
36+
"type": "image",
37+
"order": 200,
38+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-02.png",
39+
"alt": "Plan Tracker showing task details and status indicators"
40+
},
41+
{
42+
"type": "image",
43+
"order": 300,
44+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-03.png",
45+
"alt": "Plan Tracker My Tasks view for current user"
46+
},
47+
{
48+
"type": "image",
49+
"order": 400,
50+
"url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ChartCard-Plan-Tracker/assets/plan-tracker-screenshot-04.png",
51+
"alt": "Plan Tracker Project Members view"
52+
}
53+
],
54+
"authors": [
55+
{
56+
"gitHubAccount": "ahmad-jad-alhak",
57+
"pictureUrl": "https://github.com/ahmad-jad-alhak.png",
58+
"name": "Ahmad Jad Alhak"
59+
}
60+
],
61+
"references": [
62+
{
63+
"name": "Viva Connections Extensibility guidance",
64+
"description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
65+
"url": "https://aka.ms/viva/connections/extensibility"
66+
},
67+
{
68+
"name": "Adaptive Card Documentation",
69+
"description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
70+
"url": "https://adaptivecards.io/"
71+
},
72+
{
73+
"name": "Adaptive Card Extension Design Guidance",
74+
"description": "Design guidance for laying out Adaptive Card Extensions.",
75+
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
76+
}
77+
]
78+
}
79+
]

‎samples/ChartCard-Plan-Tracker/config/config.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"plan-tracker-adaptive-card-extension": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/adaptiveCardExtensions/planTracker/PlanTrackerAdaptiveCardExtension.js",
9+
"manifest": "./src/adaptiveCardExtensions/planTracker/PlanTrackerAdaptiveCardExtension.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"PlanTrackerAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/planTracker/loc/{locale}.js",
17+
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
18+
}
19+
}

‎samples/ChartCard-Plan-Tracker/config/deploy-azure-storage.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "plan-tracker",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎samples/ChartCard-Plan-Tracker/config/package-solution.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "plan-tracker-client-side-solution",
5+
"id": "8ba748c1-18b3-470d-9e21-66d9cbdbb9a0",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.21.1"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "plan-tracker description"
20+
},
21+
"longDescription": {
22+
"default": "plan-tracker description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "plan-tracker Feature",
31+
"description": "The feature that activates elements of the plan-tracker solution.",
32+
"id": "3fe73b26-ba0e-4d3d-a91c-0f351c287fde",
33+
"version": "1.0.0.0"
34+
}
35+
],
36+
"webApiPermissionRequests": [
37+
{
38+
"resource": "Microsoft Graph",
39+
"scope": "Group.Read.All"
40+
},
41+
{
42+
"resource": "Microsoft Graph",
43+
"scope": "User.Read.All"
44+
},
45+
{
46+
"resource": "Microsoft Graph",
47+
"scope": "Organization.Read.All"
48+
},
49+
{
50+
"resource": "Microsoft Graph",
51+
"scope": "Planner.Read"
52+
}
53+
]
54+
},
55+
"paths": {
56+
"zippedPackage": "solution/plan-tracker.sppkg"
57+
}
58+
}

0 commit comments

Comments
 (0)