How to use SPFx powered Microsoft Teams apps in Outlook and Office
SharePoint Framework (SPFx) is an extensibility model for Microsoft 365 enabling developers to build different kinds of extensibility for Microsoft Viva, Microsoft Teams, Outlook, Microsoft 365 app (Office), and SharePoint. SPFx has multiple benefits like automatic Single Sign On, automatic hosting in the customer tenant, reuse same code across the service and industry standard web stack tooling.
- How do you target SPFx powerwed Microsoft Teams solutions also to Outlook and Office?
- That is a great question. This is actually automatic for all Microsoft Teams apps as long they are using Microsoft Teams JS SDK v2 and a mininim of Teams manifest version of 1.3. This means that any Microsoft Teams app is also available from the Outlook and Office if they are using relatively new versions of the dependencies.
This blog post is part of a month long SPFx series for January 2023. Each business day we’ll publish a new blog post covering different aspects of the SPFx.
This means that starting from the SPFx v1.16, any SPFx solution which is targeting Microsoft Teams, can be also exposed in Outlook or in Microsot 365 app (Office). You can also natively access the Teams JS SDK v2 in the context of the SPFx solution and detect the actual host running the code as shown in the below picture which is output from the default new project scaffolding.
By default we are also making the new web parts to support Microsof Teams by adding the Teams as supported host in the
supportedHosts property at the web part manifest as shown in the below picture.
You will also need to consider the solution packaging and to ensure that you are using Teams manifest version 1.13 or newer, which will be then detected properly as part the deployment of the package. Notice that this is not currently supported with the automated
Sync to Teams feature, but you can create used manifest manually and package that as part of your solution package. See the
TeamsSPFxApp.zip file in the below picture which will be automatically packaged to the solution package and also synced automatically to Microsoft Teams as part of the deployment.
Here’s an example solution story for this particular video which we prepared for the Ignite 2022 announcement. You can find this sample from GitHub. This is a React component which renders a dashboard style sample experience for end users.
We also demonstrated the setup and required steps in a recent Microsoft 365 Platform Community call and have released following recording from that demo.
I tried this process and can’t get the Teams solutions visible in Outlook or Office - what could be wrong?
This experience is still in preview for Outlook and Office, so it will not work in a normal production tenant. To enable the preview feature, you will need to configure the tenant to be in preview status for Office. See following article for more details – Extend Teams apps across Microsoft 365.
Notice that it can take up to 5 days for this setting to be applied.
Does this mean that the SPFx support is still in preview?
Is there a way for me to target only one of the services – like only Outlook?
Not currently, but this in the plans for the Teams manifest.
At some point you were able to build Office add-ins with SPFx – is this the same thing?
No. We did preview Office add-in model with SPFx few years back, but this is not the same model. This model focuses first on the Microsoft Teams personal app experience and exposing that across the other services. Other scenarios will be provided future.
Here are some initial references to get started with the SPFx in your development. Please do provide us with feedback and suggestions on what is needed to help you to get started with the SPFx development for Microsoft 365.
- SPFx documentation – https://aka.ms/spfx
- Issues and feedback around SPFx - https://aka.ms/spfx/issues
- Microsoft 365 Platform Community – https://aka.ms/m365/community
- Public SPFx and other community calls – https://aka.ms/m365/calls
- These calls are for everyone to take advantage to stay up to date on the art of possible within Microsoft 365 and to provide guidance for beginners and more advance users
- SPFx samples in the Microsoft 365 Unified Sample gallery – https://aka.ms/m365/samples
We will provide more details on the different options and future direction of the SPFx in upcoming blog posts. This post focused on the getting started steps with SPFx - more details coming up with this series with one post within each business day of January 2023.