Sp-dev-docs: Cannot add spfx webpart as a tab to channel in Teams by using Microsoft Graph

[stkBul]

Category

• [x] 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": "",
"[email protected]" : "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","[email protected]":"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", "[email protected]":"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",
  "[email protected]": "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 :) )

[stkBul]

@BrianTJackett, What @vman said, the issue which I face is about custom SPFx webpart.

[BrianTJackett]

I was able to reproduce the blank tab for a custom SPFx web part when specifying values for only displayName and [email protected].

I was then able to "fix" the tab by sending a PATCH request (update tab) adding the appropriate contentUrl and removeUrl copied from an existing tab that was successful installed using the UI.

When I get a chance will try to add those 2 additional properties during initial adding of tab.

[stkBul]

@BrianTJackett I don't believe that we can auto generate the contentUrl and removeUrl when adding the tab via the endpoint.

[vman]

Agree with @stkBul here. I tried to include the details in my comment above https://github.com/SharePoint/sp-dev-docs/issues/5892#issuecomment-644807828

I believe what we need is some guidance around the format of the contentUrl property so that SPFx custom tabs are able to be resolved when added via the Graph. I believe the same things which happen to resolve the tab when you add it via the UI should happen when the tab is added via the Graph as well.

[BrianTJackett]

Agreed @vman and @stkBul. I would look to the PnP / SPFx team for guidance on how to pre-calculate the required fields. Do you have any details you can share about prior conversations on how the UI is performing that step?

[vman]

I have added some details about my conversation with @patmill in my comment above https://github.com/SharePoint/sp-dev-docs/issues/5892#issuecomment-644807828 But other than that, I don't have much more information about the inner workings sorry :(

[primalairlabs]

@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.

@BrianTJackett yeah sorry, was a copy-paste glitch commenting here. It will throw an error without it anyways.

[primalairlabs]

@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.

@BrianTJackett here you can follow it step by step. Is this still the right thread for my issue or should I start posting somewhere else as you mention you have already two tickets open? By the way, I have it on multiple tenants.

[BrianTJackett]

@primalairlabs I don't own or open cases, but others have shared various cases (multiple internal and external platforms) with me since they were calling Graph as part of the process. If you have the means to open a premier case, support ticket or otherwise you can do so.

[stkBul]

@BrianTJackett Have you got any chance to work on the issue?

It is a bit disappointing that there is no resolution yet.
The customer even created Microsoft support ticket where the Developer support engineer confirmed that it was bug in the product, but no progress yet.

[BrianTJackett]

I was tracking an escalated internal case that was shared with me, but then the conversation moved to a channel I don't have visibility / access into. Let me see if I can get a progress update.

[BrianTJackett]

Still awaiting response from the engineer assigned to look into this. I did get a link to their work item for tracking purposes. Some people have reported only experiencing this in the desktop client but I and others are are seeing in web UI and desktop client.

[vman]

Thanks for keeping us in the loop @BrianTJackett! We are actively interested in this issue as it's affecting one of our products. Please let me know if I can help in any way.

[vman]

I noticed on a few tenants that the "Setup this tab" screen is back.

[primalairlabs]

Also highly interested in an update here. We do custom provisioning using graph and currently, the tabs that need configuration don't work anymore for many of our customers.

[BrianTJackett]

@stkBul @vman @primalairlabs I heard back from on an internal case opened for this. An update was pushed to a number of rings (might not be 100% fully deployed). I verified in my lab tenant that the "ready to set up this tab?" prompt is now showing properly after adding a custom SPFx app. I did have to remove and re-add the custom SPFx app from the team first, but can't say for sure if that is required.

Please re-test and let me know if working or not for you. Thanks.

[primalairlabs]

Hello there
I can confirm that for our case it started to work again. Happy!
Thanx!

On Wed, Aug 5, 2020 at 3:39 PM Brian T. Jackett [e-mail]
wrote:

@stkBul https://github.com/stkBul @vman https://github.com/vman
@primalairlabs https://github.com/primalairlabs I heard back from on an
internal case opened for this. An update was pushed to a number of rings
(might not be 100% fully deployed). I verified in my lab tenant that the
"ready to set up this tab?" prompt is now showing properly after adding a
custom SPFx app. I did have to remove and re-add the custom SPFx app from
the team first, but can't say for sure if that is required.

Please re-test and let me know if working or not for you. Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SharePoint/sp-dev-docs/issues/5892#issuecomment-669199366,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APQCRVYJYNYJTYIEQXPMSGDR7FOKVANCNFSM4N7QG2YA
.

[VesaJuvonen]

Based on the latest discussion, we can considered then this to be resolved. Thanks @BrianTJackett for the assistance here. Thanks also @primalairlabs, @vman, @stkBul, @JarbasHorst for the input on this. Good to have things back for now.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues