Step 15
To enable the solution to be made available in Teams, simply update the manifest file.
Update the supportedHosts property to include TeamsTab.
{
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
}A TeamsTab will allow the user to add the tab to inside a Team channel. A TeamsPersonalApp will allow the user to add the app to the main sidebar.
To deploy a solution to Teams, you must set the skipFeatureDeployment option to true. This will allow the solution to be deployed at the tenant level, which is required to sync to Teams. If you do not set this option, then the Sync to Teams option will not be available.
Increment the version number from 0.0.0.1 to 0.0.0.2. Since the solution is already deployed to the app catalog, we will need to increment the version in order to upgrade the existing solution in the app catalog.
Update the render function and set the "Source URL" to the render method, otherwise it will assume you want to store the solution in the teams site.
public render(): void {
// Render the application
SPDashboard.render(this.domElement, this.context, "/sites/dev");
}
From the root of the project, run the npm run all command to build all solutions.
Upload the new package and re-deploy the solution.
Select the app package and click on the Files ribbon tab. Click on the Sync to Teams option to make the app available in Teams.
Access the Teams app or in the web browser. Click on the ... ellipsis and select More apps.
This may take a little time, but refresh after a couple minutes if you do not see the Build for your org option under Apps.
Once you see your app deployed, click on it to view the app information. Next, click on the Add to a team option to add it to an existing team channel.
Search for the target team channel to deploy the app to. Click on Set up a tab to complete the request.
Lastly, view the tab to confirm the dashboard app is available in the selected team channel.
