Wednesday 15 January 2020

Create Microsoft Teams manifest manually for Personal app powered by SPFx

SPFx 1.10 was released recently which now includes support for Teams personal apps. Catch the announcement here: https://developer.microsoft.com/en-us/sharepoint/blogs/announcing-sharepoint-framework-1-10-extending-sharepoint-framework-across-microsoft-365/

To deploy a personal app with an SPFx package, you have the option of deploying the package to the SharePoint tenant app catalog and clicking on the "Sync to Teams" button which then makes the app available in Teams as shown here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction

But what if you are coming at it from the Teams app point of view? You already have a Teams app with a bot or a messaging extension and want to add the SPFx powered personal app to it. You probably don't want to use the "Sync to Teams" option in this case because then your SPFx web-part will be available as a separate app in the Teams app catalog.

Fortunately, it's very simple to define a staticTab in the Teams manifest which points to the SPFx webpart. This then makes the SPFx webpart available as a teams personal app:

Notice the teams and personal query string parameters as they are very important. You will also have to replace the component id with the id of your web-part.

I have also updated the official MS Docs with this approach:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

Thanks to my colleague Jarbas for working with me in figuring out this one!

1 comment:

Ananth said...

Hi,

Thanks for the guidance this is useful. I was able to deploy a SPFX web part as a tab in a Personal app. However, I keep experiencing a problem with the loading of the web part.

The first time I sign-in to the teams desktop app, the web part loads fine. But when I navigate away from the personal app and re-visit it, the web part does not load. Instead, I get the following message

Can't load the application on this page. Use the browser Back button to retry. If the problem persists, contact the administrator of the site and give them the information in Technical Details.

The web part I deployed is a basic "Hello World" example take from Microsoft docs. Nothing particular I am doing in that web part.

Are you able to advise what could be the possible reason for the problem.