|
| 1 | +--- |
| 2 | +title: Building Microsoft Teams Tabs using SharePoint Framework |
| 3 | +description: You can build your Microsoft Teams tabs using SharePoint Framework and utilize the tooling |
| 4 | +ms.date: 11/08/2018 |
| 5 | +ms.prod: sharepoint |
| 6 | +--- |
| 7 | + |
| 8 | +# Building Microsoft Teams Tabs using SharePoint Framework |
| 9 | + |
| 10 | +Starting with SharePoint Framework v1.7, you can build your Microsoft Team tabs using SharePoint Framework tooling and use SharePoint as a host for your solutions. |
| 11 | + |
| 12 | +There are following benefits on using SharePoint Framework as the platform for your Microsoft Teams tabs: |
| 13 | + |
| 14 | +- Development model is similar as for SharePoint Framework web parts |
| 15 | +- Technically any web part can be exposed as a tab in the Microsoft |
| 16 | +- You have difference scoping options on exposing your custom tab as a web part and tab in your tenant |
| 17 | +- Your tab will be executed in the context of the underlaying SharePoint site behind of the specific team. This means that you can take advantage of any SharePoint specific APIs or functionalities in your web part. |
| 18 | + |
| 19 | +> [!IMPORTANT] |
| 20 | +> This feature is currently in preview and is subject to change. It is not currently supported for use in production environments. Your feedback and input around this capability is welcome using the [SharePoint Dev Docs issue list](https://github.com/SharePoint/sp-dev-docs/issues). |
| 21 | +
|
| 22 | +## Development process |
| 23 | + |
| 24 | +You can start developing Microsoft Teams tabs simply by using the `with beta` version of the SharePoint Framework 1.7 packages. High level steps to get started are as follows. |
| 25 | + |
| 26 | +1. Start SharePoint Framework Yeoman generator with the `plusbeta` switch, so that the created solution will use the preview packages. |
| 27 | + |
| 28 | + ``` |
| 29 | + yo @microsoft/sharepoint --plusbeta |
| 30 | + ``` |
| 31 | +
|
| 32 | +1. Create a solution with a client-side web part |
| 33 | +1. Deploy web part using tenant-scoped deployment option to your SharePoint app catalog |
| 34 | +1. Package `manifest.json` located in the `/teams` folder in your solution as a zip file . This file was automatically configured with default settings when your solution was created |
| 35 | +1. Deploy your zip file (application) to the Microsoft Teams and start add a new tab in the preferred channel |
| 36 | +
|
| 37 | +> [!NOTE] |
| 38 | +> You can also follow the detailed steps to get started from the [Building Microsoft Teams tab using SharePoint Framework](web-parts/get-started/using-web-part-as-ms-teams-tab.md) tutorial. |
| 39 | +
|
| 40 | +## Deployment options |
| 41 | +
|
| 42 | +There are few different options on getting the developed Microsoft Teams tab deployed. As both SharePoint and Microsoft Teams have their own app catalog, deployment requires operations on both services. Visibility of the new functionality can be controlled on the exact deployment mechanism. |
| 43 | +
|
| 44 | +Following table shows the deployment options in table style matrix. Top row shows the Microsoft Teams deployment options and first column mapped SharePoint deployment options. |
| 45 | +
|
| 46 | +| SharePoint/Teams deployment type | Manifest deployed to Store | Manifest deployed to Teams channel catalog | |
| 47 | +|-----------|------|-------------| |
| 48 | +| SharePoint tenant-scoped deployment | Solution available in all teams and all SharePoint sites | Solution available in specific team and all SharePoint Sites | |
| 49 | +| Site collection app catalog with tenant-scoped option in SharePoint site behind of the Team | Not an option | Solution is available in the specific site collection and specific team | |
| 50 | +| SharePoint site level deployment | Not an option | Solution is available in specific SharePoint site and in specific team | |
| 51 | +
|
| 52 | +See following resources for additional details around the different options in both systems: |
| 53 | +
|
| 54 | +- [Upload an app package to Microsoft Teams](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload) |
| 55 | +- [Tenant-scoped solution deployment for SharePoint Framework solutions](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/tenant-scoped-deployment) |
| 56 | +
|
| 57 | +## Detecting if web part is in Teams context |
| 58 | +
|
| 59 | +Page context in a web part has by default a reference to the Teams JavaScript SDK, so that you can easily get access on the Teams context when your web part is rendered as a tab. |
| 60 | +
|
| 61 | +```javascript |
| 62 | + this.context.microsoftTeams |
| 63 | +``` |
| 64 | + |
| 65 | +> [!NOTE] |
| 66 | +> See more information around th Microsoft Teams tab context from the [Microsoft Teams development documentation](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-context?view=msteams-client-js-latest). |
| 67 | +
|
| 68 | +## See also |
| 69 | + |
| 70 | +- [Building Microsoft Teams tab using SharePoint Framework - Tutorial](web-parts/get-started/using-web-part-as-ms-teams-tab.md) |
0 commit comments