Graph API to create Tab in MS Teams with custom SPFx WebPart

[UdayG]

Hello Experts,

I have created SPFx WebPart and deployed it in SharePoint. I have enabled "Team" scope and this works fine along with team context when I add it in MS Teams manually.

Now, I am trying to create Tab programmatically using Graph API endpoints as below,

API:  https://graph.microsoft.com/v1.0/teams/xxxx-9532-4b0c-997f-60704a3f8cd8/channels/19:c09b7d2b2cc546xx...

Body:

{
"displayName": "Opportunity Summary",
"canUpdateConfiguration":true,
"teamsApp@odata.bind" : "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps('8f4b04a6-a79e-4677-b81c-dff4e34d9989')",
"configuration": {"entityId": "d500-452a-885d-b091d9151dbe",
"contentUrl": "https://xxxxx.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team00...",
"websiteUrl": null,
"removeUrl": null
}
}

The tab is getting created successfully but unable to load WebPart in the tab. Below is a response when I hit this API call,

{

"@odata.context": "https://graph.microsoft.com/v1.0/$metadata#teams('xxxxxx-9532-4b0c-997f-60704a3f8cd8')/channels('19%...",

"id": "181f19b8-87f2-484e-be2f-59bc896a45f1",

"displayName": "Opportunity Summary",

"webUrl": "https://teams.microsoft.com/l/entity/xxxxxxx-a79e-4677-b81c-dff4e34d9989/_djb2_msteams_prefix_238254...",

"configuration": {

"entityId": "d500-452a-885d-b091d9151dbe",

"contentUrl": "https://xxxxx.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team00...",

"removeUrl": null,

"websiteUrl": null

}

}

I search a lot to define configuration entity in the body for custom deployed SPFx Teams App but did not find any solution.

Further analysis, I tried to find out manually deployed app configuration entity but seems that list guid, id and webinstanceId is generating dynamically as below,

{

"id": "a75956d0-131c-44e3-a484-f59dd2b6ea7e",

"displayName": "SPFx Summary WebPart",

"webUrl": "https://teams.microsoft.com/l/entity/xxxxx-a79e-4677-b81c-dff4e34d9989/_djb2_msteams_prefix_70e2b7d4...",

"configuration": {

"entityId": "sharepointtab_45b23925-551a-4d81-a0b9-9d46297098c1",

"contentUrl": "https://xxxxx.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team00...",

"removeUrl": "https://xxxxx.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team00...",

"websiteUrl": null,

"dateAdded": "2019-11-04T07:08:09.086Z"

}

}

Please guide me to defined configuration parameters in the body of Create Tab Graph API endpoints for deployed custom SPFx Teams App.

Thanks,

Uday G

[#2]

@UdayG , Thanks for reporting this issue, We are looking into it.

[#3]

Any update on this matter? Having the same issue.

[#4]

Not really a great solution, but we have found that if you do not pass in a configuration but only provide the displayName and binding property in the JSON body, the tab is created with a "Set up" button that the user then needs to click to finish provisioning the tab: 

{
  "displayName": "My Custom Tab", 
  "teamsApp@odata.bind" : "<a href="<a href="https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/xxxxx-yyyy-wwww-vvvv-1234567890" target="_blank">https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/xxxxx-yyyy-wwww-vvvv-1234567890</a>" target="_blank"><a href="https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/xxxxx-yyyy-wwww-vvvv-1234567890</a" target="_blank">https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/xxxxx-yyyy-wwww-vvvv-1234567890</a</a>>"
}

Then, this is shown in the tab:

Clicking "Set up tab" gives this prompt: 

We also found that trying to add a tab to a team created with a Graph API call with a token with App Permissions would cause this to fail (show a broken icon rather than the Team icon) because the "General" folder was not created in the Team (until a user clicks the "Files" tab).  Creating the team with an access token with "Delegated Permissions" worked because the channel folder was set up properly (see https://techcommunity.microsoft.com/t5/teams-developer/adding-a-team-using-microsoft-graph-api-app-v...).

We are also still looking for a way to setup the tab for the user in advance, but at least this gets it to work.

Mary