Forum Discussion
Graph API to create Tab in MS Teams with custom SPFx WebPart
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:c09b7d2b2cc546xxxc3f3a0e6d979f65@thread.skype/tabs
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/team0042/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=30A56BEF-D500-452A-885D-B091D9151DBE",
"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,
{
"id": "a75956d0-131c-44e3-a484-f59dd2b6ea7e",
"displayName": "SPFx Summary WebPart",
"webUrl": "https://teams.microsoft.com/l/entity/8f4b04a6-a79e-4677-b81c-dff4e34d9989/_djb2_msteams_prefix_70e2b7d4-a4e8-48a0-aff9-02f03885f93e?label=SPFx+Teams+Together&context=%7b%0d%0a++%22canvasUrl%22%3a+%22https%3a%2f%2fhexawaretek.sharepoint.com%2fsites%2fteam0042%2f_layouts%2f15%2fTeamsLogon.aspx%3fSPFX%3dtrue%26dest%3d%2fsites%2fteam0042%2f_layouts%2f15%2fteamshostedapp.aspx%253Flist%3d1ef02590-ede8-4825-a70f-43002f62bcf9%2526id%3d1%2526webPartInstanceId%3d731b7934-fdd2-4d3b-8ba1-2132cb4b14c9%22%2c%0d%0a++%22channelId%22%3a+%2219%3ac09b7d2b2cc546cfbc3f3a0e6d979f65%40thread.skype%22%2c%0d%0a++%22subEntityId%22%3a+null%0d%0a%7d&groupId=6880a93f-9532-4b0c-997f-60704a3f8cd8&tenantId=3d661275-2f86-4c66-a403-89012031c616",
"configuration": {
"entityId": "sharepointtab_45b23925-551a-4d81-a0b9-9d46297098c1",
"contentUrl": "https://hexawaretek.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team0042/_layouts/15/teamshostedapp.aspx%3Flist=1ef02590-ede8-4825-a70f-43002f62bcf9%26id=1%26webPartInstanceId=731b7934-fdd2-4d3b-8ba1-2132cb4b14c9",
"removeUrl": "https://hexawaretek.sharepoint.com/sites/team0042/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/sites/team0042/_layouts/15/teamshostedapp.aspx%3Flist=1ef02590-ede8-4825-a70f-43002f62bcf9%26id=1%26webPartInstanceId=731b7934-fdd2-4d3b-8ba1-2132cb4b14c9%26removeTab",
"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
3 Replies
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-vs-delegated/td-p/1049694).
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
UdayG , Thanks for reporting this issue, We are looking into it.
- Any update on this matter? Having the same issue.
