Cannot add spfx webpart as a tab to channel in Teams by using Microsoft Graph

[stkBul]

Category

• Bug

Describe the bug

I'm trying to add a custom spfx webpart to a channel in MS Teams by using this endpoint
POST https://graph.microsoft.com/v1.0/teams/{id}/channels/{id}/tabs
and this body
{
"displayName": "",
"teamsApp@odata.bind" : "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/",

}
Before last week (8th of June, 2020), every time I used to use the endpoint, there was popup window in the tab saying 'Setup this tab' and Save button.
Now the tab is just empty. It works if I add the spfx webpart manully via the add button.

Steps to reproduce

1. Follow the guidelines to create spfx webpart for Teams.
2. Push the app to Teams from the App catalog.
3. Use the Graph endpoint to add the webpart as a tab to a channel

Expected behavior

The tab should not be empty and the spfx webpart should be loaded in the tab.

Environment details (development & target environment)

DELETE THIS LINE BEFORE SUBMITTING - Complete the following (if ignored you'll be prompted for it before we can address your issue... save the time and provide it in your initial submission).

• Your Developer Environment: Windows 10
• Target Environment: SharePoint Online
• Framework: Node.js v10
• Browser(s): Chrome v79
• Tooling: VS Code | SPFx v1.10.0 | Visual Studio 2019]

@VesaJuvonen

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[JarbasHorst]

Hello @stkBul

usually if configuration is not provided for a tab, the first user just needs to select Set up tab to configure it. If the tab is just empty, I would assume that the Graph Teams API is not working properly or that Microsoft Teams is handling empty tab configuration in a different way now. Maybe it would be a good idea to open this issue under Microsoft Graph docs.

I hope it helps.

Regards,
Jarbas

[stkBul]

thank you @JarbasHorst

@BrianTJackett Can you help me here? Should I report this issue in Microsoft Graph or is it something you are already working on?

Best regards
Stefan

[vman]

Ideally, SPFx based tabs should be fully configurable when adding to a channel with the Graph API. The "Setup this tab" screen shown adds an extra step for the first user to go and configure the tab.

We have previously discussed with @patmill that when adding an SPFx Tab to teams through the UI, there is actually some additional work that goes on behind the scenes. An entry is created in a SharePoint list that stores the configuration data for the tab, and then the tab config is updated to point to the _layouts page to render the tab, and a query string pointing to the SharePoint item that contains the settings data.

The way teams normally works is that the URL in the manifest is a URL to the create phase. That phase then updates teams and says "OK, this is the actual URL to view this tab".

The missing part right now is this "create phase" url to set from the Graph for SPFx tabs so they are configured automatically and we don't see the "Setup this tab" screen.

[primalairlabs]

We have the same situation with built-in tabs like Onenote, Streams, Planner we create using graph. Before we just got this popup to set them up but now nothing happens anymore. This affects also tabs we created months ago but never configured.

Can easily be reproduced using graph explorer:

POST V1.0 https://graph.microsoft.com/v1.0/teams/[teamsID]/channels/[channelID]

{"displayName":"A simple test OneNote","teamsApp@odata.bind":"https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/0d820ecd-def2-4297-adad-78056cde7c78"}

Creates the Tab for me, but then it stays empty.

Console only shows:

0-angular-jquery.min-eee9041.js:114 TypeError: Cannot read property 'replace' of undefined at https://statics.teams.cdn.office.net/hashedjs/3.2-app.min-0f0e437.js:4:2570831 at f (https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:127:115) at https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:127:345 at m.$eval (https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:142:180) at m.$digest (https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:139:290) at m.$digest (https://statics.teams.cdn.office.net/hashedjs/3.2-app.min-0f0e437.js:4:3086225) at https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:142:267 at e (https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:41:350) at https://statics.teams.cdn.office.net/hashedjs/0-angular-jquery.min-eee9041.js:44:275 undefined (anonymous) @ 0-angular-jquery.min-eee9041.js:114 (anonymous) @ 0-angular-jquery.min-eee9041.js:85 (anonymous) @ 3.1-app.min-84b23e5.js:2 f @ 0-angular-jquery.min-eee9041.js:127 (anonymous) @ 0-angular-jquery.min-eee9041.js:127 $eval @ 0-angular-jquery.min-eee9041.js:142 $digest @ 0-angular-jquery.min-eee9041.js:139 m.$digest @ 3.2-app.min-0f0e437.js:4 (anonymous) @ 0-angular-jquery.min-eee9041.js:142 e @ 0-angular-jquery.min-eee9041.js:41 (anonymous) @ 0-angular-jquery.min-eee9041.js:44 setTimeout (async) Zf.k.defer @ 0-angular-jquery.min-eee9041.js:44 $evalAsync @ 0-angular-jquery.min-eee9041.js:142 (anonymous) @ 0-angular-jquery.min-eee9041.js:126 g @ 0-angular-jquery.min-eee9041.js:127 $$resolve @ 0-angular-jquery.min-eee9041.js:129 c @ 0-angular-jquery.min-eee9041.js:128 f @ 0-angular-jquery.min-eee9041.js:127 (anonymous) @ 0-angular-jquery.min-eee9041.js:127 e @ 0-angular-jquery.min-eee9041.js:41 (anonymous) @ 0-angular-jquery.min-eee9041.js:44 setTimeout (async) Zf.k.defer @ 0-angular-jquery.min-eee9041.js:44 (anonymous) @ 0-angular-jquery.min-eee9041.js:126 g @ 0-angular-jquery.min-eee9041.js:127 $$resolve @ 0-angular-jquery.min-eee9041.js:129 resolve @ 0-angular-jquery.min-eee9041.js:128 f @ 0-angular-jquery.min-eee9041.js:127 (anonymous) @ 0-angular-jquery.min-eee9041.js:127 e @ 0-angular-jquery.min-eee9041.js:41 (anonymous) @ 0-angular-jquery.min-eee9041.js:44 setTimeout (async) Zf.k.defer @ 0-angular-jquery.min-eee9041.js:44 (anonymous) @ 0-angular-jquery.min-eee9041.js:126 g @ 0-angular-jquery.min-eee9041.js:127 then @ 0-angular-jquery.min-eee9041.js:128 (anonymous) @ 3.1-app.min-84b23e5.js:1992 n.getHeaderExtensions @ 3.1-app.min-84b23e5.js:1992 a.calculateSlowHeaderExtensions @ 3.1-app.min-84b23e5.js:714 a.calculateHeaderExtensions @ 3.1-app.min-84b23e5.js:714 a.refreshMessagesHeader @ 3.1-app.min-84b23e5.js:714 a.initialize @ 3.1-app.min-84b23e5.js:714 a @ 3.1-app.min-84b23e5.js:714 invoke @ 0-angular-jquery.min-eee9041.js:37 R.instance @ 0-angular-jquery.min-eee9041.js:85 n @ 0-angular-jquery.min-eee9041.js:60 g @ 0-angular-jquery.min-eee9041.js:54 (anonymous) @ 0-angular-jquery.min-eee9041.js:53 (anonymous) @ 0-angular-jquery.min-eee9041.js:58 d @ 0-angular-jquery.min-eee9041.js:55 l @ 0-angular-jquery.min-eee9041.js:59 (anonymous) @ 0-angular-jquery.min-eee9041.js:270 $digest @ 0-angular-jquery.min-eee9041.js:140 m.$digest @ 3.2-app.min-0f0e437.js:4 $apply @ 0-angular-jquery.min-eee9041.js:142 (anonymous) @ 0-angular-jquery.min-eee9041.js:270 dispatch @ 0-angular-jquery.min-eee9041.js:1 v.handle @ 0-angular-jquery.min-eee9041.js:1

[BrianTJackett]

@stkBul I was made aware of a similar situation by @VesaJuvonen. I've been keeping a list of reported instances and had a few conversations with one of the Teams API PMs. I've not heard that there were any service / API level changes (need to confirm), only updates to the documentation.

For completeness sake, do you experience the same behavior on the /beta version endpoint?

[stkBul]

@BrianTJackett Yes, it is the same behavior with the beta version endpoint.

[BrianTJackett]

@stkBul @JarbasHorst @vman In my initial testing I am not able to reproduce a blank tab being created. I am greeted with a "Ready to set up the tab?" screen as shown below. Can someone share a screenshot of the behavior you are experiencing of a blank tab? Or is the "Ready to set up the tab?" experience the blank tab that you are referring to?

(using Postman with delegated and app-only authentication separately)
POST https://graph.microsoft.com/v1.0/teams/[teamId]/channels/[channelId]/tabs
{
"displayName":"A simple test OneNote", "teamsApp@odata.bind":"https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/0d820ecd-def2-4297-adad-78056cde7c78"
}

I will try to set aside some time today or tomorrow to further test with different permissions and configurations.

[BrianTJackett]

@primalairlabs See example request in my comment above. Did you include "/tabs" at the end of your request? I do not see that in your example.

[vman]

Hi @BrianTJackett , I believe the issue only happens for custom Teams tabs built with SharePoint Framework (SPFx). The out of the box tabs (including SharePoint tabs) work fine.

These ones: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

[JarbasHorst]

Hello @BrianTJackett ,

I have been able to reproduce @primalairlabs issue.

Here the request data:

POST https://graph.microsoft.com/v1.0/teams/{teamsId}/channels/{channelId}/tabs
BODY:

{
  "displayName": "A simple test OneNote",
  "teamsApp@odata.bind": "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/0d820ecd-def2-4297-adad-78056cde7c78"
}

@BrianTJackett I can send you my tenant information if it helps debugging this issue.

Regards,
Jarbas

[BrianTJackett]

@vman Thanks for the additional info. Looking at our internal cases I see at least 2 reported cases of blank tabs or errors when adding out of the box tabs for Planner and OneNote. I can re-test with SPFx custom web part but will take me a little longer to test that out. (New laptop and I haven't yet set it up for SPFx development :) )