Displaying Microsoft Planner Plans and Planner Tasks in SharePoint with the Lightning Conductor

The Lightning Conductor is a powerful content aggregation web part that provides business users the ability to build aggregated views of content within SharePoint or Microsoft Teams tabs. Content that can be aggregated includes SharePoint Lists such as Tasks, and Documents, content from Search such as items from a specific content type, or from Microsoft Graph Entities such as Microsoft Planner, OneDrive, Messages, Users, Events and more. Within this video and post, we’ll look at how you can build an aggregated view of Microsoft Planner Plans in SharePoint, and link that web part instance to the Microsoft Planner Tasks in SharePoint.

Displaying Microsoft Planner Plans in SharePoint

Within Microsoft 365, there are several tools related to the assigning of tasks. Microsoft ToDo is used for creating your own personal task list, SharePoint Task lists are useful for teams using a Microsoft SharePoint site, and Microsoft Planner is useful either directly or within Microsoft Teams to assign tasks to team members around a project.

We will overcome some of the confusion by allowing Planner Plans and Planner Tasks to be easily displayed within Microsoft SharePoint. To begin, follow these steps:

1. Add an instance of the Lightning Conductor to your SharePoint page
2. Click the Configure button to start the Quick Configuration Dialog.
3. Select Planner Plans from the “What list data do you want to view?” field.
4. Select the default for “How do you want to refine it?“
5. Leave the default as Microsoft Graph for the “Where should the data come from?“.
6. Leave the default as “Grid View” for the How shall we display it?” field.
7. Click Save.

Displaying Microsoft Planner Tasks in SharePoint

In the following steps, we’ll add another instance of the Lightning Conductor to display the Microsoft Planner Tasks in SharePoint. Following which, we will connect the two web parts together to provide the ability to select a Microsoft Planner Plan in SharePoint, and see the related Microsoft Planner Tasks in SharePoint.

1. Add another instance of the Lightning Conductor to your SharePoint page
2. Click the Configure button to start the Quick Configuration Dialog.
3. Select Planner Tasks from the “What list data do you want to view?” field.
4. Select the default for “How do you want to refine it?“
5. Leave the default as Microsoft Graph for the “Where should the data come from?“.
6. Leave the default as “Grid View” for the How shall we display it?” field.
7. Click Save.

You should now have two instances of the Lightning Conductor on the page showing your Microsoft Planner Plans and Microsoft Planner Tasks.

We will now connect the two instances together:

Connect the Lightning Conductor Microsoft Planner Plans view to the Microsoft Planner Tasks view

In order to have the ability to select a Microsoft Planner Plan, so that we can display the related Microsoft Planner Tasks, we need to turn on the ability to select a row within the Lightning Conductor displaying Microsoft Planner Plans. To turn on Selecting Rows, follow these steps:

1. In the first instance of the Lightning Conductor, Edit the default view by clicking the cog icon.

2. Select the Display tab, and turn on Allow selecting rows.
3. Click Save.
4. In the second instance of the Lightning Conductor, Edit the default view by clicking the cog icon.
5. Click the Column Tab to display the selected columns.
6. Click the filter icon for the Plan column.

7. In the Filter Configuration dialog, leave the operator as ‘=’.
8. Click the connect icon as shown below

9. Choose the Lightning Conductor as the data source.
10. Choose Selected Items as the Lightning Conductor’s properties.
11. Select title from the Selected Item’s properties.
12. Click Save to close the Connect value to data source dialog.
13. Click Save again to close the Configure View.

You will now have the ability to view Planner Plans, select a plan, and see the related Planner Tasks.