Microsoft Planner Gantt Chart with Power Apps – download your own!

[If you’re just looking for the download link, it’s at the end of this blog post]

So far (May 15th, 2021) there has been 11957 votes on the Microsoft Planner UserVoice for a feature to get a Gantt chart view in Microsoft Planner. The latest reply from the Planner Team is, that people should start using Microsoft Project. Obviously, that is not always possible, so I wanted to give it a shot whether it is feasible to create a Power Apps canvas app to provide the missing functionality.

Few years ago I wrote an article in LinkedIn introducing a way to create a Gantt chart in Power Apps based on task data stored in Azure SQL Database. This time the data is stored in Microsoft Planner and the implementation method as well as features have evolved in various ways.

I implemented the app and in this blog post I will introduce it from end user perspective. I will walk through some technical implementation highlights in later posts.

Features

View multiple plans on the same chart

You can choose up to four plans and have them displayed on the same Gantt Chart.

Each selected plan is assigned a distinct color so that it is easy to identify which task belongs to which plan.

Smart month range selection

By default the chart displays the previous month, the current month and three upcoming months. You can easily alter the month range by changing the start or end month.

You can also click on the month column on the actual chart to only choose the specific month.

Implementation of the month selector is already described in another blog post.

View assignees of the task

Images of task assignees are displayed once the user clicks on the right angle bracket next to the task. The name of the assignee is displayed on mouse hover.

You can reveal assignees of all tasks by clicking on the Display all assignees.

Task indicator explained

All the elements of a one single task are indicated below.

Task color is always light green unless the task is already completed – completed tasks are filled with light gray. The task dashed border color matches the color assigned to the plan.

There are two things about the task dates that need explaining:

  1. All tasks that are In Progress and that do not have a due date set are displayed on the chart as if the due date was today
  2. If task start date is not set, a date calculated five days backwards from the due date is used

Task buckets and categories (a.k.a. labels)

The bucket of each task is displayed on the left hand side of the chart. All the named categories/labels that are set on the task are displayed on the right.

Note that only labels that have a specific name set in the Planner are displayed.

Filtering

In addition to the month range filter described earlier, you can also apply other types of filters on the displayed tasks.

Filter by status

You can choose to include only items that you are one of the assignees of. You can also exclude completed tasks. By default neither of the filters are selected.

Filter by bucket

You can choose any of the available buckets to filter by that specific bucket. Only one bucket can be selected at a time.

Filter by category

The labels that are assigned a unique named can be used for filtering. The filtering applies logical conjunction on the tasks – this means that if you have two labels selected to be filtered by, each included task must have at least both those two labels defined.

Note, that Filter by category panel is visible only when there is just one plan selected.

There are six categories/labels available to be used via Planner Connector. This is an obvious drawback as Planner nowadays supports over ten different labels.

Filter by plan

You can also exclude one or more plans from the chart by unselecting the plan at the top of the screen.

Creating new tasks

You can easily create a new task to one of the plans selected to be shown on the chart. You simply click on the desired date below the last task on the chart. Add new task dialog is displayed where you can select target plan, start date (default is the date you clicked on the chart), due date (default is ten days from the start date), bucket, task title and emoji for the task.

When your done with filling in the task data and want to create the task, you can either click on the Save button, which performs the creation of the new task, closes the dialog and refreshed the gantt chart. Alternatively you can click on the Save and open button, which performs the same operations, but in addition also opens the newly created task in Planner for further editing in another tab. With that, you can then fill in some additional information that is not supported in the task creation dialog, such as specifying assignees or labels, creating checklist items, notes or comments or adding attachments.

Accessing Planner

There are multiple places throughout the app providing a link to a specific Planner plan or task. All links open the plan in a new browser tab.

Plan selection page

You can open desired plan on the front page of the app from the upper right corner of each plan tile.

Selected plans display area

Each selected plan in Planner can be also access via the upper horizontal listing of plans on the gantt chart page.

Task lane on the chart

You can open a specific task in Planner by clicking on the icon on the task row.

Use a parameter to preselect a single plan

You can provide a plan parameter to the app to force a single plan to be preselected by default when the app is opened. Very handy e.g. when surfacing the Gantt Chart as a Teams tab!

Read more about it in this blog post.

Download the app and start using it!

The Gantt Chart app is published in my Git repository planner-gantt-chart. It can be downloaded and imported into the desired Power Platform environment as instructed in the README documentation.

Here is a direct link to download the file: https://github.com/TerhoAntila/planner-gantt-chart/raw/main/PlannerGanttChart.zip

13 Comments

  1. It seems that the list of plans showed by ”Planner.ListMyPlansV2” is not complete somehow. I found a similar issue (https://powerusers.microsoft.com/t5/Using-Flows/Planner-ListMyPlansV2-value-returns-only-Recent-Plans-and-not/td-p/681180) but in my case the list of shown plans is not the same as ”Recent” in the planner app…
    Additionaly, I found the ”Planner.ListMyPlansV2” is deprecated? https://docs.microsoft.com/en-us/connectors/planner/#list-my-plans-%5Bdeprecated%5D

    Like

    1. Hmm, I wasn’t aware of the issue with the list of plans, thanks for pointing that out!

      Yes, I’m aware of the deprecation of that specific method – upgrading it is on my backlog.

      Like

  2. Hello, great app concept.
    Currently fails to import with the very limited message, Something went wrong. Pleaser try again later.
    Suggestions to progress would be great.

    Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s