|
| 1 | +--- |
| 2 | +title: "Tutorial: Build meeting apps for Microsoft Teams with SPFx" |
| 3 | +description: Build meeting apps for Microsoft Teams with the SharePoint Framework. |
| 4 | +ms.date: 04/28/2021 |
| 5 | +ms.prod: sharepoint |
| 6 | +localization_priority: Normal |
| 7 | +--- |
| 8 | + |
| 9 | +# Build meeting apps for Microsoft Teams with SPFx |
| 10 | + |
| 11 | +The SharePoint Framework (SPFx) v1.8 release introduced the ability to use SPFx web parts to implement Microsoft Teams tabs. Using SharePoint Framework can simplify Microsoft Teams app development as explained in [Build for Microsoft Teams using SharePoint Framework](build-for-teams-overview.md). |
| 12 | + |
| 13 | +Developers can create apps for Microsoft Teams meetings using the same techniques used to create custom tabs. In this tutorial, you'll learn how to implement a custom Microsoft Teams meeting app using a SPFx web part. |
| 14 | + |
| 15 | +Microsoft Teams meeting apps must support configurable tabs in the **[groupchat](/microsoftteams/platform/resources/schema/manifest-schema#configurabletabs)** scope. This enables the [pre-meeting](/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings#pre-meeting-app-experience) and [post-meeting](/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings#post-meeting-app-experience) chats. Refer to the following documentation for additional requirements: [Create apps for Teams meetings: Prerequisites and considerations](/en-us/microsoftteams/platform/apps-in-teams-meetings/create-apps-for-teams-meetings#prerequisites-and-considerations) |
| 16 | + |
| 17 | +> [!IMPORTANT] |
| 18 | +> This tutorial requires SPFx v1.11 or higher. |
| 19 | +
|
| 20 | +## Create a Microsoft Teams tab project |
| 21 | + |
| 22 | +1. Create a new project directory in your favorite ___location: |
| 23 | + |
| 24 | + ```console |
| 25 | + md teams-meeting-app |
| 26 | + ``` |
| 27 | + |
| 28 | +1. Go to the project directory: |
| 29 | + |
| 30 | + ```console |
| 31 | + cd teams-meeting-app |
| 32 | + ``` |
| 33 | + |
| 34 | +1. Create a new solution by running the Yeoman SharePoint Framework Generator: |
| 35 | + |
| 36 | + ```console |
| 37 | + yo @microsoft/sharepoint |
| 38 | + ``` |
| 39 | + |
| 40 | +1. When prompted, enter the following values (*select the default option for all prompts omitted below*): |
| 41 | + |
| 42 | + - **What is your solution name?**: teams-meeting-app |
| 43 | + - **Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?**: Yes |
| 44 | + - **Which type of client-side component to create?**: WebPart |
| 45 | + - **What is your Web part name?**: MyFirstTeamsMeetingApp |
| 46 | + - **What is your Web part description?**: My first Microsoft Teams meeting app |
| 47 | + - **Which framework would you like to use?**: No JavaScript web framework |
| 48 | + |
| 49 | + At this point, Yeoman creates the folders & files for the project and then installs the required dependencies. |
| 50 | + |
| 51 | +1. Next, enter the following to open the web part project in Visual Studio Code: |
| 52 | + |
| 53 | + ```console |
| 54 | + code . |
| 55 | + ``` |
| 56 | + |
| 57 | +## Update the web part manifest to make it available for Microsoft Teams |
| 58 | + |
| 59 | +Locate the **./src/webparts/\*\*/manifest.json** file for the web part you'll use as the tab for the meeting app solution. Locate the `supportedHosts` property to include `"TeamsTab"`: |
| 60 | + |
| 61 | +```json |
| 62 | +{ |
| 63 | + "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", |
| 64 | + "id": "..", |
| 65 | + "alias": "MyFirstTeamsMeetingAppWebPart", |
| 66 | + "componentType": "WebPart", |
| 67 | + "version": "*", |
| 68 | + |
| 69 | + //... |
| 70 | + |
| 71 | + "supportedHosts": ["SharePointWebPart", "TeamsTab"], |
| 72 | + |
| 73 | + //... |
| 74 | +} |
| 75 | +``` |
| 76 | + |
| 77 | +## Update code to be aware of the Microsoft Teams context |
| 78 | + |
| 79 | +1. Open **./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts** for the needed edits to make the solution aware of the Microsoft Teams context, if it's used as a tab. |
| 80 | +1. Update the `render()` method as follows. |
| 81 | + |
| 82 | + Notice how we're rendering different content dependent if the code is rendered as a tab in Microsoft Team or as a web part in SharePoint. We can detect if solution is hosted by Microsoft Teams by checking the `this.context.sdks.microsoftTeams` property. |
| 83 | + |
| 84 | + ```typescript |
| 85 | + public render(): void { |
| 86 | + |
| 87 | + let title: string = 'ERR: not in Microsoft Teams'; |
| 88 | + let subTitle: string = 'ERR: not in Microsoft Teams'; |
| 89 | + |
| 90 | + if (this.context.sdks.microsoftTeams) { |
| 91 | + if (this.context.sdks.microsoftTeams.context.meetingId) { |
| 92 | + title = "Welcome to Microsoft Teams!"; |
| 93 | + subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId; |
| 94 | + } else { |
| 95 | + title = "Welcome to Microsoft Teams!"; |
| 96 | + subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName; |
| 97 | + } |
| 98 | + } |
| 99 | + |
| 100 | + this.domElement.innerHTML = ` |
| 101 | + <div class="${ styles.myFirstTeamsMeetingApp }"> |
| 102 | + <div class="${ styles.container }"> |
| 103 | + <div class="${ styles.row }"> |
| 104 | + <div class="${ styles.column }"> |
| 105 | + <span class="${ styles.title }">${title}</span> |
| 106 | + <p class="${ styles.subTitle }">${subTitle}</p> |
| 107 | + </div> |
| 108 | + </div> |
| 109 | + </div> |
| 110 | + </div>`; |
| 111 | + } |
| 112 | + ``` |
| 113 | + |
| 114 | +## Prepare the Microsoft Teams app for deployment |
| 115 | + |
| 116 | +When a SPFx solution is used in a Microsoft Teams app, it must be deployed to both SharePoint Online and Microsoft Teams. Refer to [Deployment options for SharePoint Framework solutions for Microsoft Teams](deployment-spfx-teams-solutions.md) for details on the deployment options. |
| 117 | + |
| 118 | +Meeting apps require details in the Microsoft Teams app manifest file that aren't created automatically by SharePoint Online. Therefore, you must use the [Developer-provided Microsoft Teams app manifest & package](deployment-spfx-teams-solutions.md#developer-provided-microsoft-teams-app-manifest--package) option. |
| 119 | + |
| 120 | +This means you'll need to create the app manifest file, and the app package file. |
| 121 | + |
| 122 | +### Create the Microsoft Teams app manifest |
| 123 | + |
| 124 | +Create a new file **./teams/manifest.json**. |
| 125 | + |
| 126 | +Add the following JSON to the file: |
| 127 | + |
| 128 | +```json |
| 129 | +{ |
| 130 | + "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json", |
| 131 | + "manifestVersion": "1.8", |
| 132 | + "packageName": "{{SPFX_PACKAGE_NAME}}", |
| 133 | + "id": "{{SPFX_COMPONENT_ID}}", |
| 134 | + "version": "1.0", |
| 135 | + "developer": { .. }, |
| 136 | + "name": { |
| 137 | + "short": "{{SPFX_COMPONENT_NAME}}" |
| 138 | + }, |
| 139 | + "description": { |
| 140 | + "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}", |
| 141 | + "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}" |
| 142 | + }, |
| 143 | + "icons": { |
| 144 | + "outline": "{{SPFX_COMPONENT_ID}}_outline.png", |
| 145 | + "color": "{{SPFX_COMPONENT_ID}}_color.png" |
| 146 | + }, |
| 147 | + "accentColor": "#004578", |
| 148 | + "configurableTabs": [ |
| 149 | + { |
| 150 | + "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}", |
| 151 | + "canUpdateConfiguration": false, |
| 152 | + "scopes": [ |
| 153 | + "team", |
| 154 | + "groupchat" |
| 155 | + ], |
| 156 | + "context": [ |
| 157 | + "channelTab", |
| 158 | + "privateChatTab", |
| 159 | + "meetingSidePanel", |
| 160 | + "meetingDetailsTab", |
| 161 | + "meetingChatTab" |
| 162 | + ] |
| 163 | + } |
| 164 | + ], |
| 165 | + "validDomains": [ |
| 166 | + "*.login.microsoftonline.com", |
| 167 | + "*.sharepoint.com", |
| 168 | + "resourceseng.blob.core.windows.net" |
| 169 | + ], |
| 170 | + "webApplicationInfo": { |
| 171 | + "resource": "https://{teamSiteDomain}", |
| 172 | + "id": "00000003-0000-0ff1-ce00-000000000000" |
| 173 | + } |
| 174 | +} |
| 175 | +``` |
| 176 | + |
| 177 | +With the basic Teams app manifest created, you need to make the following changes to it: |
| 178 | + |
| 179 | +- Locate the values `{{SPFX_COMPONENT_*}}` in the JSON... these values need to be updated. Set the multiple instances of `{{SPFX_COMPONENT_ID}}` to the component's ID. This is found in the `id` property in the **./src/webparts/\*\*/manifest.json** file. |
| 180 | +- Replace the `packageName` property with the name of your Teams app. |
| 181 | +- Replace the `developer` object with the same object and values set in your **./config/package-solution.json** file. |
| 182 | +- Replace the `name` & `description` objects with real values indicate the name and description of the app. |
| 183 | + |
| 184 | +> [!NOTE] |
| 185 | +> For information about the properties in the Microsoft Teams app manifest, see [Manifest schema for Microsoft Teams](/microsoftteams/platform/resources/schema/manifest-schema). |
| 186 | + |
| 187 | +> [!IMPORTANT] |
| 188 | +> Don't replace the `{teamSiteDomain}` string in the app manifest file. This placeholder is replaced with the tenant's SharePoint Online URL at runtime by Microsoft Teams. |
| 189 | + |
| 190 | +### Create the Microsoft Teams app package |
| 191 | + |
| 192 | +To make your SPFx solution available for use in Microsoft Teams, it must be packaged & deployed to SharePoint Online. |
| 193 | + |
| 194 | +1. Create the Microsoft Teams app package named **TeamsSPFxApp.zip** by compressing the contents of the **./teams** folder. |
| 195 | + |
| 196 | + > [!IMPORTANT] |
| 197 | + > Don't compress the folder, instead compress the contents of the folder. If you ZIP the folder, it will create a top-level subfolder in the resulting ZIP file which isn't a valid app package for Microsoft Teams. |
| 198 | + |
| 199 | +1. Save the **TeamsSPFxApp.zip** in the SPFx solution's **./src/teams** folder. |
| 200 | + |
| 201 | +## Package and deploy to SharePoint Online |
| 202 | + |
| 203 | +1. Execute the following commands to build bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. |
| 204 | + |
| 205 | + ```console |
| 206 | + gulp bundle --ship |
| 207 | + ``` |
| 208 | + |
| 209 | +1. Execute the following task to package your solution. This creates an updated **./sharepoint/solution/\*.sppkg** package. |
| 210 | + |
| 211 | + ```console |
| 212 | + gulp package-solution --ship |
| 213 | + ``` |
| 214 | + |
| 215 | +1. Next, deploy the package that was generated to the tenant App Catalog. |
| 216 | + |
| 217 | + Go to your tenant's SharePoint App Catalog. |
| 218 | + |
| 219 | +1. Upload or drag and drop the **./sharepoint/solution/\*.sppkg** to the tenant's App Catalog. |
| 220 | + |
| 221 | +  |
| 222 | + |
| 223 | + This deploys the client-side solution package. |
| 224 | + |
| 225 | + Ensure that the **Make this solution available to all sites in the organization** option is selected, so that the web part can be used by Microsoft Teams. |
| 226 | + |
| 227 | +  |
| 228 | + |
| 229 | +1. Select **Deploy**. |
| 230 | + |
| 231 | +At this point, the solution is deployed to SharePoint Online and is available to all SharePoint Online sites. |
| 232 | + |
| 233 | +## Publish the meeting app to the Microsoft Teams app store |
| 234 | + |
| 235 | +To make your meeting app available in Microsoft Teams, you'll have synchronize your solution with teams. |
| 236 | + |
| 237 | +> [!NOTE] |
| 238 | +> During the testing phase, you can sideload your meeting app to Microsoft Teams instead of deploying it to your organization's app store. To do this, you can skip this section and jump to the [Test the meeting app](#test-the-meeting-app) section. |
| 239 | + |
| 240 | +1. Select the package in the SharePoint tenant App Catalog and select the **Sync to Teams** button at in the ribbon in the **Files** tab. |
| 241 | + |
| 242 | +  |
| 243 | + |
| 244 | + SharePoint Online will detect the **TeamsSPFxApp.zip** file in the **\*.sppkg** package and deploy it to the Microsoft Teams app store instead of automatically creating the app manifest and app package. |
| 245 | + |
| 246 | +1. Confirm that you can see the status message on the top-right corner. |
| 247 | + |
| 248 | +  |
| 249 | + |
| 250 | +## Test the meeting app |
| 251 | + |
| 252 | +The last step is to test the meeting app in Microsoft Teams. To do this, you'll create a meeting that isn't a channel meeting and has at least one person invited to it: |
| 253 | + |
| 254 | +1. Open the Microsoft Teams desktop client. |
| 255 | +1. Create a new meeting using the **Calendar** app in the left-hand app bar. |
| 256 | +1. Invite someone to the meeting. |
| 257 | +1. Save the meeting. |
| 258 | +1. From the **Calendar** app, open the test meeting you created. |
| 259 | +1. Select the **+** (plus) button to the right of the existing tabs. |
| 260 | + |
| 261 | +  |
| 262 | + |
| 263 | +1. Select your custom meeting app |
| 264 | + |
| 265 | +Once the app has been installed into the meeting, when you go back to the meeting detail page, you'll see the app as a new tab. The tab will load in the pre/post meeting experience as shown in the following screenshot: |
| 266 | + |
| 267 | + |
| 268 | + |
| 269 | +> [!IMPORTANT] |
| 270 | +> At the current time, the in-meeting experience for an SPFx-based Teams meeting app doesn't work. During a meeting, if you select the app, the meeting app will load in a tab but render a SharePoint Online error page. |
| 271 | +> |
| 272 | +> This is currently due to a limitation in Microsoft Teams that will be resolved in the first half of 2021. |
| 273 | + |
| 274 | +## See also |
| 275 | + |
| 276 | +- [Building Microsoft Teams Tabs using SharePoint Framework](integrate-with-teams-introduction.md) |
| 277 | +- [Deployment options for SharePoint Framework solutions for Microsoft Teams](deployment-spfx-teams-solutions.md) |
| 278 | +- [Microsoft Teams: developer platform](/microsoftteams/platform/overview) |
| 279 | +- [Microsoft Teams: Apps in Teams meetings](/microsoftteams/platform/apps-in-teams-meetings/teams-apps-in-meetings) |
| 280 | +- [Microsoft Teams: Build an app for meetings](/microsoftteams/platform/apps-in-teams-meetings/create-apps-for-teams-meetings?tabs=javascript) |
0 commit comments