Issue with Adding Planner Tab to Teams Using Graph API - Content Perpetually Loading

Joah Lenzo 30 Reputation points
2024-04-09T06:18:27.91+00:00

Hello,

I've been encountering an issue for the past 2-3 weeks, which seems to coincide with the release of the new Planner version. When attempting to add a Planner tab to a Microsoft Teams channel using the Microsoft Graph API, the tab is successfully added, but the content within the tab is stuck on loading indefinitely and never actually displays.

What I'm trying to accomplish: I'm trying to programmatically add a Planner tab to a Teams channel using the Graph API. The process worked seamlessly until recent weeks.

Steps already taken:

  • I've followed the documentation available for the Graph API to ensure my request is formatted correctly.
  • Reviewed the API versioning (using 1.0) to confirm compatibility with the latest Planner features.
  • Double-checked the dynamic values and placeholders in the URLs within my request body for accuracy.

Code sample:
{

"displayName": "$PlannerTabName",

"******@odata.bind": "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/com.microsoft.teamspace.tab.planner",

"configuration": {

"entityId": "$GeneralChannelID",

"contentUrl": "https://tasks.teams.microsoft.com/teamsui/{tid}/Home/PlannerFrame?page=7&auth_pvr=OrgId&auth_upn={userPrincipalName}&groupId={groupId}&planId=$PlannerID&channelId={channelId}&entityId={entityId}&tid={tid}&userObjectId={userObjectId}&subEntityId={subEntityId}&sessionId={sessionId}&theme={theme}&mkt={locale}&ringId={ringId}&PlannerRouteHint={tid}",

"removeUrl": "https://tasks.teams.microsoft.com/teamsui/{tid}/Home/PlannerFrame?page=13&auth_pvr=OrgId&auth_upn={userPrincipalName}&groupId={groupId}&planId=$PlannerID&channelId={channelId}&entityId={entityId}&tid={tid}&userObjectId={userObjectId}&subEntityId={subEntityId}&sessionId={sessionId}&theme={theme}&mkt={locale}&ringId={ringId}&PlannerRouteHint={tid}",

"websiteUrl": "https://tasks.office.com/{tid}/Home/PlanViews/$PlannerID?Type=PlanLink&Channel=TeamsTab"
```  }

}

**Issues encountered:**

- The Planner tab is added to the Teams channel, but the content is constantly in a loading state and never fully renders.

**Unique aspects of my scenario/configuration:**

- This issue began occurring around the time of the latest Planner update release.

- There have been no changes to my request format or the API version I'm using.

**Questions for the community:**

- Has anyone else experienced this issue with the Graph API and Planner integration recently?

- Are there any known workarounds or solutions to ensure the content loads correctly in the Planner tab?

- Could there be changes in the Planner or Graph API that require updates to the request format?**Issues encountered:**

    The Planner tab is added to the Teams channel, but the content is constantly in a loading state and never fully renders.
  
  **Unique aspects of my scenario/configuration:**
  
  ```sql
  This issue began occurring around the time of the latest Planner update release.
  
  
     There have been no changes to my request format or the API version I'm using.

Questions for the community:

Has anyone else experienced this issue with the Graph API and Planner integration recently?

Are there any known workarounds or solutions to ensure the content loads correctly in the Planner tab?

Could there be changes in the Planner or Graph API that require updates to the request format?

Microsoft Teams Development
Microsoft Security Microsoft Graph
Microsoft Teams Microsoft Teams for business Other
{count} votes

Accepted answer
  1. Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator
    2024-04-10T06:14:58.7133333+00:00

    We used below graph API to add a planner tab to a team's channel, and it got added successfully.

    The planner tab got loaded with content displayed properly.

    User's image

    User's image

    And as per this documentation, For Planner tabs, configuration is not supported.

    https://learn.microsoft.com/en-us/graph/teams-configuring-builtin-tabs#planner-tabs

    Thanks, 

    Prasad Das

    ************************************************************************* 

    If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. Jelle Hellmann 5 Reputation points
    2024-08-07T16:24:22.04+00:00

    We had the same problem.. that with the new Planner the Tab would show "The was a problem reaching this app".

    Saw, that you manually can link the specific plan, by selecting the dropdown from the tab -> Settings -> User's image

    After this retrieving the the data via Graph Explorer :

    https://graph.microsoft.com/v1.0/teams/{team-id}/channels/{channel-id}/tabs?$expand=teamsApp

    you can retrieve the updated Values for the tabs-config. The important thing is the entityId as far as i could figure out. It needs to follow this pattern

    "entityId": "tt.c_{channelId}_p_{planId}_h_{uniqueId}"

    https://learn.microsoft.com/en-us/answers/questions/1692763/show-a-planner-plan-as-a-tab-inside-teams-channel

    Where uniqueId has to be 13 chars long only numbers.

    "configuration": {
                    "entityId": "tt.c_{channelId}_p_{planId}_h_{uniqueId}",
                    "contentUrl": "https://tasks.teams.microsoft.com/teamsui/{tid}/Home/PlannerFrame?page=7&auth_pvr=OrgId&auth_upn={userPrincipalName}&groupId={groupId}&planId=$PlannerID&channelId={channelId}&entityId={entityId}&tid={tid}&userObjectId={userObjectId}&subEntityId={subEntityId}&sessionId={sessionId}&theme={theme}&mkt={locale}&ringId={ringId}&PlannerRouteHint={tid}&tabVersion=20200228.1_s",
                    "removeUrl": "https://tasks.teams.microsoft.com/teamsui/{tid}/Home/PlannerFrame?page=13&auth_pvr=OrgId&auth_upn={userPrincipalName}&groupId={groupId}&planId=$PlannerID&channelId={channelId}&entityId={entityId}&tid={tid}&userObjectId={userObjectId}&subEntityId={subEntityId}&sessionId={sessionId}&theme={theme}&mkt={locale}&ringId={ringId}&PlannerRouteHint={tid}&tabVersion=20200228.1_s",
                    "websiteUrl": "https://tasks.office.com/$TenantID/Home/PlanViews/$PlannerID?Type=PlanLink&Channel=TeamsTab"
                }
    

    Where $TenantID and $PlannerID need to be replaced with your values.

    Not sure if this will be working forever, but at least that is what worked for us now.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.