How to Show all Your Microsoft Planner Plans in Your SharePoint Page

The Microsoft Graph API connection allows you to retrieve all your Microsoft Planner Plans and display them on your SharePoint pages.

To do this, simply use the “My Planner Plans” use case. Follow the steps below closely to get started.

NOTEThe plans shown may vary depending on the user viewing the SharePoint page.

TABLE OF CONTENTS

• Prerequisites
• What is the “My Planner Plans” Use Case?
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit the Design Element
  • Step 4: Connect to Microsoft Graph API
  • Step 5: Use the My Planner Plans Use Case
  • Step 6: Connect
  • Step 7: Map Items
  • Step 8: Save

Prerequisites

• You must have ShortPoint SPFx version 8.6.0.0 and up installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have the Microsoft Graph API connection enabled. Go to How to Enable Microsoft Graph Integration for MS Graph API Connections to learn how.
• You must authorize the necessary permissions (Tasks.Read and Group.Read.All) in the API access page. To check, go to your SharePoint Admin Center > Advanced > API access.
• You must have the Design Element you want to use to connect on your SharePoint page. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.).

What is the “My Planner Plans” Use Case?

The My Planner Plans use case is a Microsoft Graph API GET query that retrieves all the plans of the signed-in user.

The typical structure of this use case is:

https://graph.microsoft.com/v1.0/me/planner/plans

With this use case, you can showcase all your Microsoft Plans and even redirect your page viewers to the source page. This makes your plans accessible without having to switch platforms.

You must enable the following permissions in the SharePoint Admin Center to use it:

• Tasks.Read - this permission allows the app to read all of the signed-in user’s tasks and task lists, including any shared with them. However, this will not allow creating, deleting, or updating of tasks.
• Group.Read.All - this permission allows the app to retrieve all groups and read their properties and memberships. It can also retrieve calendars, conversations, files, and other group content that the signed-in user has access to.

NOTEIf you haven’t given access to the permissions above, go to your SharePoint Admin Center > Advanced > API access.

Step-by-step Tutorial

Follow the steps below to learn how to use the My Planner Plans use case:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Select the ShortPoint web part and click the Edit Properties icon:

Step 2: Switch to Grid Mode

NOTEShortPoint Connect is currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Edit the Design Element

NOTEYou can use any Design Element you want. For best results, we recommend using Design Elements that allow listing of multiple items (e.g. Icon List, Image List, Simple List, etc.). For this guide, we’ll use Tiles.

Click the cogwheel icon of the Design Element you’ll use:

Step 4: Connect to Microsoft Graph API

Go to the Connect tab:

Select Microsoft Graph API:

NOTEYou need to enable the Microsoft Graph API connection before using it. Learn more about it in How to Enable Microsoft Graph Integration for MS Graph API Connections.

Step 5: Use the My Planner Plans Use Case

Search for My Planner Plans and select it:

Step 6: Connect

Click Run Query:

Select Connect:

Step 7: Map Items

Go to the Tiles tab:

NOTEIf you’re using any other Design Element, item mapping can usually be done in the Items tab. But, since we’re using the Tiles Design Element, it’s located in the Tiles tab.

Delete default content:

Use the link icon to map the properties you want to be displayed:

You can map any property you want. In our case, we used the following properties:

1. #title in the Title field - shows the name of the plans as the titles.
2. #webUrl - links to the actual Microsoft plan.

(Optional) If the Design Element you’re using allows icons, choose the icon you want to be shown:

NOTECheck out ShortPoint Connect: Basic Tutorial to learn more about mapping properties.

Step 8: Save

Click Preview to see how the Design Element will look:

Click Update to apply your changes:

Select the eye icon to see your page in real time:

Once satisfied, click Save:

Congratulations! Your Microsoft Plans are now accessible in your SharePoint sites.

Related articles:

• How to Enable Microsoft Graph Integration for MS Graph API Connections
• Connection Type: Microsoft Graph API
• Microsoft Graph API: Use Cases