Updates from: 06/17/2022 01:25:04
Service Microsoft Docs article Related commit history on GitHub Change details
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
Title: Designing your meeting extension
-description: Learn how to design apps in Teams meetings and get the Microsoft Teams UI Kit, in-meeting tab and use cases, responsive behavior and shared meeting stage, and theme and navigation.
+description: Learn how to design apps in Teams meetings and get the Microsoft Teams UI Kit, in-meeting tab, use cases, responsive behavior, shared meeting stage, theme, and navigation.
ms.localizationpriority: medium
Optimize your in-meeting tab to fit edge-to-edge within the 280 pixel-wide ifram
Remember the following if you allow scrolling: * Content in the iframe contents should only scroll vertically.
-* Users should only see the content they've scrolled to (nothing above or below).
+* Users should only see the content they've scrolled to (nothing above or below).
* The scrollbar is part of the iframe content. :::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-scrolling.png" alt-text="Example shows how the in-meeting tab scrolls." border="false":::
We recommend keeping your appΓÇÖs experience scoped to just the meeting stage. Y
#### Don't: Include competing surfaces
-Your app should only ask users to focus on a single surface a time, whether it's collaborating on the stage or responding to an in-meeting dialog. (Note: You canΓÇÖt keep dialogs being triggered by other apps while your app is on the stage.)
+Your app should only ask users to focus on a single surface a time, whether it's collaborating on the stage or responding to an in-meeting dialog. (Note: You canΓÇÖt keep dialogs being triggered by other apps while your app is on the stage.)
:::column-end::: :::row-end:::
platform Auth Aad Sso Bots https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md
Open [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/ma
## Code sample
-|**Sample name** | **Description** |**.NET** |
-|-|--|--|
-|Bot framework SDK | Sample for using the bot framework SDK. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/46.teams-auth)|
+|**Sample name** | **Description** |**.NET** |**C#** |**Node.js** |
+|-|--|--|--|--|
+|Bot framework SDK | This sample code demonstrates how to get started with authentication in a bot for Microsoft Teams. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/46.teams-auth)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation-sso-quickstart/csharp_dotnetcore/BotConversationSsoQuickstart)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation-sso-quickstart/js)|
## Step-by-step guide
platform Apps Localization https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/apps-localization.md
Title: Localize your app
-description: Describes considerations for localizing your Microsoft Teams app.
+description: Learn considerations for localizing your Microsoft Teams app and localize strings in your app manifest.
ms.localizationpriority: medium
-keywords: teams publish store office publishing AppSource localization language
Last updated 05/15/2018 # Localize your app
platform Apps Package https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/apps-package.md
Title: Package your app
-description: Learn how to package your Microsoft Teams app for testing, uploading, and store publishing.
+description: Learn how to package your Microsoft Teams app with icons for testing, uploading, and store publishing.
ms.localizationpriority: high
platform Deep Links https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/deep-links.md
Title: Create deep links
-description: Learn how to describe Teams deep links and how to use them in your apps.
+description: Learn how to create deep links and how to use and navigate them in your Microsoft Teams apps with tabs.
ms.localizationpriority: high
While it's recommended to use the strongly typed APIs of TeamsJS, it's possible
Example: `https://teams.microsoft.com/l/meeting/new?subject=test%20subject&attendees=joe@contoso.com,bob@contoso.com&startTime=10%2F24%2F2018%2010%3A30%3A00&endTime=10%2F24%2F2018%2010%3A30%3A00&content=ΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïtest%3AcontentΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇïΓÇï` > [!NOTE]
-> The search parameters don't support `+` signal in place of whitespace (` `). Ensure your uri encoding code returns `%20` for spaces for example, `?subject=test%20subject` is good, but `?subject=test+subject` is bad.
+> The search parameters don't support `+` signal in place of whitespace (``). Ensure your uri encoding code returns `%20` for spaces for example, `?subject=test%20subject` is good, but `?subject=test+subject` is bad.
The query parameters are:
platform Share To Teams From Personal App Or Tab https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md
Title: Share to Teams from personal app or tab
-description: Learn to add the Share in Teams embedded on your personal app or tab
+description: Learn how to enable the Share to Teams button on your personal app or tab, limitations and end user experience.
ms.localizationpriority: medium
-keywords: Share Teams Share to Teams
# Share to Teams from personal app or tab
platform Share To Teams From Web Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/share-to-teams-from-web-apps.md
Title: Share to Teams from web apps
description: Learn to add the Share to Teams embedded button on your website, with a website preview, using Code samples ms.localizationpriority: medium
-keywords: Share Teams Share to Teams
+ # Share to Teams from web apps
-Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages. When you select, it launches the Share to Teams experience in a pop-up window. This allows you to share a link directly to any person or Microsoft Teams channel without switching the context. This document guides you on how to create and embed a Share to Teams button for your website, craft your website preview, and extend Share to Teams for Education.
+Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages. When you select Share to Teams button, it launches the Share to Teams experience in a pop-up window. This allows you to share a link directly to any person or Microsoft Teams channel without switching the context.
+
+The following image displays the pop-up window for Share to Teams preview experience:
+ > [!NOTE] > > * Only the desktop versions of Microsoft Edge and Google Chrome are supported.
-> * Use of Freemium or guest accounts is not supported.
+> * Use of Freemium or guest accounts is not supported.
+
+You can also add link unfurling for the links shared through Share to Teams button hosted in web app, personal app or tab. For more information, see [link unfurling](~/messaging-extensions/how-to/link-unfurling.md).
-The following image displays the Share to Teams pop-up experience:
+The following image displays the link unfurling experience through Share to Teams button:
++
+> [!NOTE]
+> Link unfurling in share to Teams is currently available only in public developer preview.
+This article guides you on how to create and embed a Share to Teams button for your website, craft your website preview, and extend Share to Teams for Education.
## Embed a Share to Teams button
The following image displays the Share to Teams pop-up experience:
After completing this, the Microsoft Teams icon gets added to your website. The following image shows the Share to Teams icon:
- ![Share to Teams icon](~/assets/icons/share-to-teams-icon.png)
+ :::image type="content" source="~/assets/icons/share-to-teams-icon.png" alt-text="Share to Teams icon" border="true":::
-1. Alternatively, if you want a different icon size for the Share-to Teams button, use the `data-icon-px-size` attribute.
+1. Alternatively, if you want a different icon size for the Share to Teams button, use the `data-icon-px-size` attribute.
```html <div
platform Share To Teams Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/build-and-test/share-to-teams-overview.md
Title: Share to Teams overview
-description: Describes how to create share-to-teams button
+description: Learn share to Teams overview and where you can create share-to-teams button in the Teams apps and tab apps.
ms.localizationpriority: mediumss
-keywords: Share to Teams overview
# Share to Teams
platform Add Default Install Scope https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/add-default-install-scope.md
Title: Configure default install options for your app
-description: Describes how to specify your app's default install options and default capability for shared scopes.
+description: Learn how to specify your Teams app's default install options and default capability for shared scopes.
ms.localizationpriority: medium
platform Apps Publish Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/apps-publish-overview.md
Title: Overview - Distribute your app
-description: Describes the options for publishing your Microsoft Teams app, uploading your app, and GCC.
+description: In this article, learn the options for publishing your Microsoft Teams app, uploading and deploying your app, and GCC.
ms.localizationpriority: high
-keywords: deploy publish app upload gcc
# Distribute your Microsoft Teams app
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/post-publish/overview.md
Title: Maintain and support your published app
-description: What to think about once your store is listed on the Teams store and AppSource.
+description: Learn to maintain your published Microsoft Teams app and what to think about once your store is listed on the Teams store and AppSource.
ms.localizationpriority: high
Create the link using the following URL appended with your app ID: `https://team
## Complete Microsoft 365 Certification
-[Microsoft 365 Certification](/microsoft-365-app-certification/docs/certification) offers assurances that data and privacy are adequately secured and protected when a third-party Office app or add-in is installed in your Microsoft 365 ecosystem. Certification confirms that your app is compatible with Microsoft technologies, compliant with cloud app security best practices, and supported by Microsoft.
+[Microsoft 365 Certification](/microsoft-365-app-certification/docs/certification) offers assurances that data and privacy are adequately secured and protected when a third-party Office app or an add-in is installed in your Microsoft 365 ecosystem. The certification confirms that your app is compatible with Microsoft technologies, is compliant with cloud app security best practices, and is supported by Microsoft.
+
+## Stop app distribution
+
+You can remove an app from the [Microsoft commercial marketplace](/azure/marketplace/overview) to prevent its discovery and use.
+
+To stop distribution of an app after you've published, follow the steps:
+
+1. On the **Product overview** page, select **Stop selling**. It removes the app from the Microsoft AppSource.
+1. To initiate de-listing of the app, on **Partner Center**, select the **Overview** page, and then select **Stop selling**.
+
+After you stop the distribution of an app, you can still see it in Partner Center with a **Not available** status. If you decide to list the app again, follow the instructions to [Publish your app to the Microsoft Teams store](/concepts/deploy-and-publish/appsource/publish#teams-app-submission).
## See also
platform Teams Store Ranking Parameters https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/post-publish/teams-store-ranking-parameters.md
Title: Microsoft Teams store ranking parameters
-description: The Microsoft Teams store ranks app search results in the store using a set of ranking parameters to deliver relevant search results to users.
+description: Learn Microsoft Teams store ranks app search results in the store using a set of ranking parameters to deliver relevant search results to users.
ms.localizationpriority: high
platform Test Preview For Monetized Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/Test-preview-for-monetized-apps.md
Title: Test preview for monetized apps
-description: Create and test SaaS Preview offers for Teams app before pushing the offer live.
+description: Learn how to create and test SaaS Preview offers for Teams app before pushing the offer live. You can test the end-to-end purchase experience for your monetized apps in Teams.
ms.localizationpriority: high
-keywords: teams apps SaaS offer preview offer test preview monetized saas
# Test preview for monetized apps
platform Include Saas Offer https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/include-saas-offer.md
Title: Include a SaaS offer with your app
-description: Learn how to monetize your Microsoft Teams app with subscription plans.
+description: Learn how to monetize your Microsoft Teams app with subscription plans and include a SaaS offer with your Microsoft Teams app.
platform Monetize Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/monetize-overview.md
Title: Monetize your app overview
-description: Learn how to monetize your Microsoft Teams app.
+description: Learn how to monetize your Microsoft Teams app that includes choose a pricing model with Saas offer.
platform Submission Checklist https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/submission-checklist.md
Title: Prepare your store submission
-description: Describes the final steps before submitting your Microsoft Teams app to be listed on the store. Learn to validate your app package, compile testing instructions, and create your store listing details.
+description: Learn the final steps before submitting your Microsoft Teams app to be listed on the store. Learn to validate your app package and more.
ms.localizationpriority: high
-keywords: submission store distribute validate app package guidelines localize
# Prepare your Microsoft Teams store submission
You've designed, built, and tested your Microsoft Teams app. Now you're ready to
See the following video to learn more about publishing your app to the Microsoft Teams app store: <br>
-> [!VIDEO https://www.microsoft.com/videoplayer/embed/RE4WG3l]
+> [!VIDEO <https://www.microsoft.com/videoplayer/embed/RE4WG3l>]
<br> Before you submit your app to [Partner Center](/office/dev/store/use-partner-center-to-submit-to-appsource), ensure you've done the following.
platform Teams Store Validation Guidelines https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md
Title: Microsoft Teams store validation guidelines
-description: Describes the guidelines every app submitted to the Teams store (AppSource) must follow.
+description: In this article, you'll have the guidelines that every app submitted to the Teams store (AppSource) must follow.
platform Publish https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/publish.md
Title: Overview - Publish your app to the Microsoft Teams store
-description: Describes the process for submitting your app to Partner Center and getting it published to the Microsoft Teams store (and AppSource).
+description: Learn the process for submitting your app to Partner Center and getting it published to the Microsoft Teams store (and AppSource).
Apps published to the Teams store also automatically list on [Microsoft AppSourc
## Understand the publishing process
-When you feel your app is production ready, you can begin the process of getting it listed on the Teams store.
+If your app is production ready, you can begin the process of getting it listed on the Teams store.
> [!TIP] > Following the pre-submission steps closely can increase the possibility that Microsoft approves your app for publishing.
When you feel your app is production ready, you can begin the process of getting
* **Deep functional and experience tests**
- Your app is thoroughly reviewed by a validator to ensure compliance with the [Microsoft Commercial Marketplace certification policies](/legal/marketplace/certification-policies).
+ Your app is thoroughly reviewed by a validator to ensure compliance with the [Microsoft Commercial Marketplace certification policies](/legal/marketplace/certification-policies).
There will be a focus on deep functional and user experience testing, usability checks, and metadata checks. App validation is performed across desktop, web, and mobile clients. We work hard to provide you a detailed test report in 24 working hours post submission. * **Guided app publish through concierge service**
platform Resolve Submission Issues https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/appsource/resolve-submission-issues.md
Title: Resolve issues with your store submission
-description: Understand how to troubleshoot and correct problems with your Microsoft Teams store submission.
+description: In this article, learn how to troubleshoot and correct problems with your Microsoft Teams store submission.
platform Design Teams App Advanced Ui Components https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-advanced-ui-components.md
Title: Design your app with advanced UI components
-description: Learn about the Teams UI components, such as Breadcrumbs, Notification bar, Stage view along with relevant use cases.
+description: Learn about the Teams UI components, such as breadcrumbs, notification bar, stage view along with relevant use cases.
ms.localizationpriority: medium
platform Design Teams App Basic Ui Components https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/design-teams-app-basic-ui-components.md
Title: Design your app with basic Fluent UI components
-description: Learn about the primitive UI components commonly used to build Microsoft Teams apps and get the Microsoft Teams UI Kit. Learn about components, such as breadcrumbs, card, carousel, dropdown, coachmark, picker, pivot, toggle, tooltip, and more.
+description: Learn the UI components used to build Microsoft Teams apps and get the Teams UI Kit. Learn about fluent kit breadcrumb button card carousel dropdown coachmark picker pivot toggle tooltip
ms.localizationpriority: medium
-keywords: UI components fluent kit breadcrumb button card carousel dropdown coachmark picker pivot toggle tooltip
+ # Designing your Microsoft Teams app with basic Fluent UI components
platform Personal Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/personal-apps.md
Title: Designing your personal app
-description: Learn how to design a Teams personal app and get the Microsoft Teams UI Kit, create components, such as, dashboard, form, task board for Mobile and Desktop experience. Learn the best practices for developing personal apps.
+description: Learn how to design a Teams personal app and get the Microsoft Teams UI Kit, create components, such as, dashboard, form, task board for Mobile and Desktop experience.
ms.localizationpriority: medium
platform Planning Checklist https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/planning-checklist.md
Title: Questions to help plan Teams app development
-description: Questions to consider while you plan your app, understand your user and their need, understand the user problems that your app would solve, plan user authentication and their onboarding experience
+description: Questions to consider while you plan your app, understand your user and their needs, problems that your app solves, user authentication and their onboarding experience.
ms.localizationpriority: high
platform Device Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/device-capabilities-overview.md
Use the tools present in [Microsoft Teams JavaScript client SDK](/javascript/api
## Integrate device capabilities
-After getting access to device capabilities, use Teams media capability APIs to [integrate media capabilities](mobile-camera-image-permissions.md) with the Teams platform to enhance the user experience. These integrated capabilities allow your app to:
+After getting access to device capabilities, use Teams media capability APIs to [integrate media capabilities](media-capabilities.md) with the Teams platform to enhance the user experience. These integrated capabilities allow your app to:
* Capture and share images. * Scan QR or barcode using [scanner control](qr-barcode-scanner-capability.md).
After getting access to device capabilities, use Teams media capability APIs to
* Share location using [location picker](location-capability.md). Also, you can integrate the Teams native [people picker control](people-picker-capability.md) that allows users to search and select people in the web app experience.+
+## Code sample
+
+| Sample Name | Description | Node.js |
+|:|:--|:|
+|Device permissions | Describes how to demonstrates Microsoft Teams tab sample app for device permissions. |[View](<https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-device-permissions/nodejs>)|
platform Location Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/location-capability.md
You must ensure to handle these errors appropriately in your Teams app. The foll
## See also
-* [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
+* [Integrate media capabilities](media-capabilities.md)
* [Integrate QR code or barcode scanner capability in Teams](qr-barcode-scanner-capability.md) * [Integrate People Picker in Teams](people-picker-capability.md)
platform Media Capabilities https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/media-capabilities.md
+
+ Title: Integrate media capabilities
+
+description: Learn how to use Teams JavaScript client SDK to enable media capabilities using code examples
+keywords: camera image microphone capabilities native device permissions media api
+
+ms.localizationpriority: medium
+++
+# Integrate media capabilities
+
+You can integrate native device capabilities, such as camera and microphone with your Teams app. For integration, you can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) that provides the necessary tools for your app to access a userΓÇÖs [device permissions](native-device-permissions.md). Use suitable media capability APIs to integrate the device capabilities, such as camera and microphone with the Teams platform within your Microsoft Teams app, and build a richer experience. The media capability is available for Teams web client, desktop, and mobile. To integrate media capabilities, you must update the app manifest file and call the media capability APIs.
+
+For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the respective APIs, which allow you to use native media capabilities. It is important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app.
+
+## Advantages
+
+The main advantage of integrating device capabilities in your Teams apps is it leverages native Teams controls to provide a rich and immersive experience to your users. The following scenarios showcase the advantages of media capabilities:
+
+* Allow the user to capture the rough mockups drawn on a physical whiteboard through the cell phone and use the captured images as poll options in Teams group chat.
+
+* Allow the user to record audio message and attach it to an incident ticket.
+
+* Allow the user to scan the physical documents from the smartphone to file a car insurance claim.
+
+> [!NOTE]
+>
+> * Currently, Teams doesn't support device permissions in pop out chat window, tabs, and the meeting side panel.</br>
+> * The device permissions are different in the browser. For more information, see [browser device permissions](browser-device-permissions.md).
+> * The request permissions prompt is automatically displayed on mobile when a relevant Teams API is initiated. For more information, see [request device permissions](native-device-permissions.md).
+
+## Update manifest
+
+Update your Teams app [manifest.json](../../resources/schem#devicepermissions) file by adding the `devicePermissions` property and specifying `media`. It allows your app to ask for requisite permissions from users before they start using the camera to capture the image, open the gallery to select an image to submit as an attachment, or use the microphone to record the conversation. The update for app manifest is as follows:
+
+``` json
+"devicePermissions": [
+ "media",
+],
+```
+
+## Media capability APIs
+
+The [selectMedia](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true), [getMedia](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediachunk?view=msteams-client-js-latest&preserve-view=true), and [viewImages](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageuri?view=msteams-client-js-latest&preserve-view=true) APIs enable you to use native media capabilities as follows:
+
+* Use the native **microphone** to allow users to **record audio** (record 10 minutes of conversation) from the device.
+* Use native **camera control** to allow users to **capture and attach images** on the go.
+* Use native **gallery support** to allow users to **select device images** as attachments.
+* Use native **image viewer control** to **preview multiple images** at one time.
+* Support **large image transfer** (from 1 MB to 50 MB) through the SDK bridge.
+* Support **advanced image capabilities** by allowing users to preview and edit images.
+* Scan documents, whiteboard, and business cards through the camera.
+
+> [!IMPORTANT]
+>
+> * The `selectMedia`, `getMedia`, and `viewImages` APIs can be invoked from multiple Teams surfaces, such as task modules, tabs, and personal apps. For more details, see [Entry points for Teams apps](../extensibility-points.md).</br>
+> * `selectMedia` API supports both camera and microphone capabilities through different input configurations.
+> * The `selectMedia` API for accessing microphone capability supports for mobile clients only.
+
+The following table lists set of APIs to enable your device's media capabilities:
+
+| API | Description |
+| | |
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true) (**Camera)**| This API allows users to **capture or select media from the device camera** and return it to the web-app. The users can edit, crop, rotate, annotate, or draw over images before submission. In response to `selectMedia`, the web-app receives the media IDs of selected images and a thumbnail of the selected media. This API can be further configured through the [ImageProps](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageprops?view=msteams-client-js-latest&preserve-view=true) configuration. |
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true) (**Microphone**)| Set the [mediaType](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediatype?view=msteams-client-js-latest&preserve-view=true) to `4` in `selectMedia` API for accessing microphone capability. This API also allows users to record audio from the device microphone and return recorded clips to the web-app. The users can pause, re-record, and play recording preview before submission. In response to **selectMedia**, the web-app receives media IDs of the selected audio recording. <br/> Use `maxDuration`, if you require to configure a duration in minutes for recording the conversation. The current duration for recording is 10 minutes, after which the recording terminates. |
+| [**getMedia**](/javascript/api/@microsoft/teams-js/microsoftteams.media.mediachunk?view=msteams-client-js-latest&preserve-view=true)| This API retrieves the media captured by `selectMedia` API in chunks, irrespective of the media size. These chunks are assembled and sent back to the web app as a file or blob. Breaking media into smaller chunks facilitates large file transfer. |
+| [**viewImages**](/javascript/api/@microsoft/teams-js/microsoftteams.media.imageuri?view=msteams-client-js-latest&preserve-view=true)| This API enables the user to view images in full-screen mode as a scrollable list.|
+
+# [Mobile](#tab/mobile)
+
+The following image depicts the web app experience of `selectMedia` API for the image capability:
++
+> [!NOTE]
+>
+> In devices with Android version under 7, the `selectMedia` API launches the native Android camera experience instead of the native Teams camera experience.
+
+The following image depicts the web app experience of `selectMedia` API for the microphone capability:
++
+# [Desktop](#tab/desktop)
+
+The following image depicts the web app experience of `selectMedia` API for the image capability:
++++
+## Error handling
+
+Ensure to handle these errors appropriately in your Teams app. The following table lists the error codes and the descriptions under which the errors are generated:
+
+|Error code | Error name | Description|
+| | | -- |
+| **100** | NOT_SUPPORTED_ON_PLATFORM | API is not supported on the current platform.|
+| **404** | FILE_NOT_FOUND | File specified is not found in the given location.|
+| **500** | INTERNAL_ERROR | Internal error is encountered while performing the required operation.|
+| **1000** | PERMISSION_DENIED |Permission is denied by the user.|
+| **3000** | NO_HW_SUPPORT | The hardware does not support the capability.|
+| **4000**| INVALID_ARGUMENTS | One or more arguments are invalid.|
+| **8000** | USER_ABORT |User aborts the operation.|
+| **9000**| OLD_PLATFORM | Platform code is outdated and does not implement this API.|
+| **10000**| SIZE_EXCEEDED | Return value is too big and has exceeded the platform size boundaries.|
+
+## Code snippets
+
+* Call `selectMedia` API for capturing images using camera:
+
+```javascript
+let imageProp: microsoftTeams.media.ImageProps = {
+ sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
+ startMode: microsoftTeams.media.CameraStartMode.Photo,
+ ink: false,
+ cameraSwitcher: false,
+ textSticker: false,
+ enableFilter: true,
+};
+let mediaInput: microsoftTeams.media.MediaInputs = {
+ mediaType: microsoftTeams.media.MediaType.Image,
+ maxMediaCount: 10,
+ imageProps: imageProp
+};
+microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
+ if (error) {
+ if (error.message) {
+ alert(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ alert(" ErrorCode: " + error.errorCode);
+ }
+ }
+ if (attachments) {
+ let y = attachments[0];
+ img.src = ("data:" + y.mimeType + ";base64," + y.preview);
+ }
+});
+```
+
+* Call `getMedia` API to retrieve large media in chunks:
+
+```javascript
+let media: microsoftTeams.media.Media = attachments[0]
+media.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
+ if (blob) {
+ if (blob.type.includes("image")) {
+ img.src = (URL.createObjectURL(blob));
+ }
+ }
+ if (error) {
+ if (error.message) {
+ alert(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ alert(" ErrorCode: " + error.errorCode);
+ }
+ }
+});
+```
+
+* Call `viewImages` API by ID, which is returned by `selectMedia` API:
+
+```javascript
+// View images by id:
+// Assumption: attachmentArray = select Media API Output
+let uriList = [];
+if (attachmentArray && attachmentArray.length > 0) {
+ for (let i = 0; i < attachmentArray.length; i++) {
+ let file = attachmentArray[i];
+ if (file.mimeType.includes("image")) {
+ let imageUri = {
+ value: file.content,
+ type: 1,
+ }
+ uriList.push(imageUri);
+ } else {
+ alert("File type is not image");
+ }
+ }
+}
+if (uriList.length > 0) {
+ microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
+ if (error) {
+ if (error.message) {
+ output(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ output(" ErrorCode: " + error.errorCode);
+ }
+ }
+ });
+} else {
+ output("Url list is empty");
+}
+```
+
+* Call `viewImages` API by URL:
+
+```javascript
+// View Images by URL:
+// Assumption 2 urls, url1 and url2
+let uriList = [];
+if (URL1 != null && URL1.length > 0) {
+ let imageUri = {
+ value: URL1,
+ type: 2,
+ }
+ uriList.push(imageUri);
+}
+if (URL2 != null && URL2.length > 0) {
+ let imageUri = {
+ value: URL2,
+ type: 2,
+ }
+ uriList.push(imageUri);
+}
+if (uriList.length > 0) {
+ microsoftTeams.media.viewImages(uriList, (error: microsoftTeams.SdkError) => {
+ if (error) {
+ if (error.message) {
+ output(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ output(" ErrorCode: " + error.errorCode);
+ }
+ }
+ });
+} else {
+ output("Url list is empty");
+}
+```
+
+* Call `selectMedia` and `getMedia` APIs for recording audio through microphone:
+
+```javascript
+let mediaInput: microsoftTeams.media.MediaInputs = {
+ mediaType: microsoftTeams.media.MediaType.Audio,
+ maxMediaCount: 1,
+};
+microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
+ if (error) {
+ if (error.message) {
+ alert(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ alert(" ErrorCode: " + error.errorCode);
+ }
+ }
+ // If you want to directly use the audio file (for smaller file sizes (~4MB)) if (attachments) {
+ let audioResult = attachments[0];
+ var videoElement = document.createElement("video");
+ videoElement.setAttribute("src", ("data:" + y.mimeType + ";base64," + y.preview));
+ //To use the audio file via get Media API for bigger audio file sizes greater than 4MB audioResult.getMedia((error: microsoftTeams.SdkError, blob: Blob) => {
+ if (blob) {
+ if (blob.type.includes("video")) {
+ videoElement.setAttribute("src", URL.createObjectURL(blob));
+ }
+ }
+ if (error) {
+ if (error.message) {
+ alert(" ErrorCode: " + error.errorCode + error.message);
+ } else {
+ alert(" ErrorCode: " + error.errorCode);
+ }
+ }
+});
+```
+
+## See also
+
+* [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
+* [Integrate location capabilities in Teams](location-capability.md)
+* [Integrate People Picker](people-picker-capability.md)
+* [Requirements and considerations for application-hosted media bots](~/bots/calls-and-meetings/requirements-considerations-application-hosted-media-bots.md)
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/native-device-permissions.md
Title: Request device permissions for your Microsoft Teams app
-description: Learn how to update your app manifest and request access to native features involving user consent, location, QR code and barcode, image, audio, and video capabilities
+keywords: teams apps capabilities permissions device native scan qr barcode image audio video
+description: How to update your app manifest in order to request access to native features that usually require user consent, such as scan qr, barcode, image, audio, video capabilities
ms.localizationpriority: medium
-# Request device permissions for your Microsoft Teams app
+# Request device permissions for your Teams app
You can enrich your Teams app with native device capabilities, such as camera, microphone, and location. This document guides you on how to request user consent and access the native device permissions. > [!NOTE] >
-> * To integrate media capabilities within your Microsoft Teams mobile app, see [Integrate media capabilities](mobile-camera-image-permissions.md).
+> * To integrate media capabilities within your Microsoft Teams web client, desktop, and mobile, see [Integrate media capabilities](media-capabilities.md).
> * To integrate QR or barcode scanner capability within your Microsoft Teams mobile app, see [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md).
-> * To integrate location capabilities within your Microsoft Teams mobile app, see [Integrate location capabilities](location-capability.md).
+> * To integrate location capabilities within your Microsoft Teams web client, desktop, and mobile, see [Integrate location capabilities](location-capability.md).
## Native device permissions
+You must request the device permissions to access native device capabilities. The device permissions work similarly for all app constructs, such as tabs, task modules, or messaging extensions. The user must go to the permissions page in Teams settings to manage device permissions. You can build richer experiences on the Teams platform with the help of device capabilities, such as:
You must request the device permissions to access native device capabilities. The device permissions work similarly for all app constructs, such as tabs, task modules, or message extensions. The user must go to the permissions page in Teams settings to manage device permissions. By accessing the device capabilities, you can build richer experiences on the Teams platform, such as:
-* Capture and view images.
-* Scan QR or barcode.
-* Record and share short videos.
-* Record audio memos and save them for later use.
-* Use the location information of the user to display relevant information.
+* Capture and view images
+* Scan QR or barcode
+* Record and share short videos
+* Record audio memos and save them for later use
+* Use the location information of the user to display relevant information
> [!NOTE]
+>
> * Currently, Teams doesn't support device permissions for multi-window apps, tabs, and the meeting side panel. > * Device permissions are different in the browser. For more information, see [browser device permissions](browser-device-permissions.md).
+> * Currently, Microsoft Teams support for QR barcode scanner capability is only available for mobile clients.
## Access device permissions
-The [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) provides the tools necessary for your Teams mobile app to access the userΓÇÖs [device permissions](#manage-permissions) and build a richer experience.
-
-While access to these features is standard in modern web browsers, you must inform Teams about the features you use by updating your app manifest. This update allows you to ask for permissions while your app runs on the Teams desktop client.
+The [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) provides the tools necessary for your Teams app to access the userΓÇÖs [device permissions](#manage-permissions) and build a richer experience.
-> [!NOTE]
-> Currently, Microsoft Teams support for media capabilities and QR barcode scanner capability is only available for mobile clients.
+While access to these features is standard in modern web browsers, you must inform Teams about the features you use by updating your app manifest. This update allows you to ask for permissions while your app runs on the Teams desktop.
## Manage permissions
A user can manage device permissions in Teams settings by selecting **Allow** or
1. Select the app for which you need to choose the settings. 1. Select your desired settings.
- ![Device permissions mobile settings screen](../../assets/images/tabs/MobilePermissions.png)
+ <!-- ![Device permissions mobile settings screen](../../assets/images/tabs/MobilePermissions.png) -->
+
+ :::image type="content" source="~/assets/images/tabs/MobilePermissions.png" alt-text="Mobile Permissions." border="true":::
# [Desktop](#tab/desktop)
A user can manage device permissions in Teams settings by selecting **Allow** or
1. Select **Settings** > **Permissions** from the drop-down menu. 1. Select your desired settings.
- ![Device permissions desktop settings screen](~/assets/images/tabs/device-permissions.png)
+ <!-- ![Device permissions desktop settings screen](~/assets/images/tabs/device-permissions.png) -->
+
+ :::image type="content" source="~/assets/images/tabs/device-permissions.png" alt-text="Device permission." border="true":::
Update your app's `manifest.json` by adding `devicePermissions` and specifying w
], ```
-Each property allows you to prompt the user to ask for their consent:
+Each property allows you to prompt the users to ask for their consent:
| Property | Description | | | |
navigator.permissions.query({name:'geolocation'}).then(function(result) {
## Use Teams APIs to get device permissions
-Leverage appropriate HTML5 or Teams API, to display a prompt for getting consent to access device permissions.
+Leverage appropriate HTML5 or Teams API to display a prompt for getting consent to access device permissions.
> [!IMPORTANT] > > * Support for `camera`, `gallery`, and `microphone` is enabled through [**selectMedia API**](/javascript/api/@microsoft/teams-js/microsoftteams.media.media?view=msteams-client-js-latest&preserve-view=true). Use [**captureImage API**](/javascript/api/@microsoft/teams-js/microsoftteams?view=msteams-client-js-latest#captureimage--error--sdkerror--files--file-void-&preserve-view=true) for a single image capture.
-> * Support for `location` is enabled through [**getLocation API**](/javascript/api/@microsoft/teams-js/microsoftteams.location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true). You must use this `getLocation API` for location, as HTML5 geolocation API is currently not fully supported on Teams desktop client.
+> * Support for `location` is enabled through [**getLocation API**](/javascript/api/@microsoft/teams-js/microsoftteams.location?.view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true). You must use this `getLocation API` for location, as HTML5 geolocation API is currently not fully supported on Teams desktop.
For example:
-* To prompt the user to access their location, you must call `getCurrentPosition()`:
+* To prompt the user to access their location you must call `getCurrentPosition()`:
```JavaScript navigator.geolocation.getCurrentPosition (function (position) { /*... */ }); ```
-* To prompt the user to access their camera on desktop or web, you must call `getUserMedia()`:
+* To prompt the user to access their camera on desktop or web you must call `getUserMedia()`:
```JavaScript navigator.mediaDevices.getUserMedia({ audio: true, video: true }); ```
-* To capture the image on mobile, Teams mobile asks for permission when you call `captureImage()`:
+* To capture the images on mobile, Teams mobile asks for permission when you call `captureImage()`:
```JavaScript function captureImage() {
For example:
} ```
-* Notifications will prompt the user when you call `requestPermission()`:
+* Notifications prompts the user when you call `requestPermission()`:
```JavaScript Notification.requestPermission(function(result) { /* ... */ }); ```
-* To use the camera or access photo gallery, Teams mobile asks permission when you call `selectMedia()`:
+* To use the camera or access photo gallery, Teams app asks permission when you call `selectMedia()`:
```JavaScript function selectMedia() {
For example:
} ```
-* To prompt the user to share location on the map interface, Teams mobile asks permission when you call `getLocation()`:
+* To prompt the user to share location on the map interface, Teams app asks permission when you call `getLocation()`:
```JavaScript function getLocation() {
For example:
# [Mobile](#tab/mobile)
- ![Tabs mobile device permissions prompt](../../assets/images/tabs/MobileLocationPermission.png)
+ <!-- ![Tabs mobile device permissions prompt](../../assets/images/tabs/MobileLocationPermission.png) -->
+
+ :::image type="content" source="~/assets/images/tabs/MobileLocationPermission.png" alt-text="Mobile location permission." border="true":::
# [Desktop](#tab/desktop)
- ![Tabs desktop device permissions prompt](~/assets/images/tabs/device-permissions-prompt.png)
+ <!-- ![Tabs desktop device permissions prompt](~/assets/images/tabs/device-permissions-prompt.png) -->
+
+ :::image type="content" source="~/assets/images/tabs/device-permissions-prompt.png" alt-text="Device permission in desktop." border="true":::
## Permission behavior across login sessions
-Device permissions are stored for every login session. It means that if you sign in to another instance of Teams, for example, on another computer, your device permissions from your previous sessions aren't available. Therefore, you must re-consent to device permissions for the new session. It also means, if you sign out of Teams or switch tenants in Teams, your device permissions are deleted from the previous login session.
+Device permissions are stored for every login session. It means that if you sign in to another instance of Teams, for example, on another computer, your device permissions from your previous sessions are not available. Therefore, you must re-consent to device permissions for the new session. It also means, if you sign out of Teams or switch tenants in Teams, your device permissions are deleted from the previous login session.
> [!NOTE] > When you consent to the native device permissions, it is valid only for your _current_ login session.
Device permissions are stored for every login session. It means that if you sign
## See also * [Device permissions for the browser](browser-device-permissions.md)
-* [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
+* [Integrate media capabilities](media-capabilities.md)
* [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md) * [Integrate location capabilities in Teams](location-capability.md)
platform People Picker Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/people-picker-capability.md
Title: Integrate People Picker
-description: How to use Teams JavaScript client SDK to integrate People Picker control
-keywords: people picker control
+description: In this article, learn how to use Teams JavaScript client SDK to integrate People Picker control and advantages of using people picker.
ms.localizationpriority: high
The following image displays the experience of People Picker on mobile and deskt
The People Picker input control allows the user to search and add people using the following steps: 1. Type the name of the required person. The list appears with name suggestions.
-1. Select the name of the required person from the list.
+1. Select the name of the required person from the list.
:::image type="content" source="../../assets/images/tabs/people-picker-control-capability-mobile-updated.png" alt-text="Picker Picker mobile" border="true":::
The People Picker input control allows the user to search and add people using t
The People Picker control on web or desktop is launched in a modal window on top of your web app and to add people use the following steps: 1. Type the name of the required person. The list appears with name suggestions.
-1. Select the name of the required person from the list.
+1. Select the name of the required person from the list.
:::image type="content" source="../../assets/images/tabs/select-people-picker-byname.png" alt-text="People picker by name desktop" border="true":::
The following table lists the error codes and their descriptions:
## See also
-* [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
+* [Integrate media capabilities](~/concepts/device-capabilities/media-capabilities.md)
* [Integrate QR code or barcode scanner capability in Teams](qr-barcode-scanner-capability.md) * [Integrate location capabilities in Teams](location-capability.md)
platform Qr Barcode Scanner Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/device-capabilities/qr-barcode-scanner-capability.md
microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: s
## See also
-* [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
+* [Integrate media capabilities](media-capabilities.md)
* [Integrate location capabilities in Teams](location-capability.md) * [Integrate People Picker in Teams](people-picker-capability.md)
platform Feedback https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/feedback.md
Title: Microsoft Teams developer community help and feedback
-description: The Microsoft Teams product team responds to the developer community across various feedback and support channels.
+description: Learn Microsoft Teams product team responds to the developer community across various feedback and support channels.
ms.localizationpriority: medium
-keywords: teams feedback developer questions issues contact community help request bugs contributions community discussions support
# Support and feedback
platform Glossary https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/glossary.md
Common terms and definitions used in Teams developer documentation.
| Term | Definition | | | |
-| [Media capability](../concepts/device-capabilities/mobile-camera-image-permissions.md) | Native device capabilities, such as, camera and microphone, that you can integrate with your Teams app. <br>**See also**: [Capability](#c); [Device capability](#d) |
+| [Media capability](../concepts/device-capabilities/media-capabilities.md) | Native device capabilities, such as, camera and microphone, that you can integrate with your Teams app. <br>**See also**: [Capability](#c); [Device capability](#d) |
| [Meeting bot](../bots/calls-and-meetings/calls-meetings-bots-overview.md) | Bots that interact with Teams calls and meetings using real-time voice, video, and screen sharing. <br>**See also**: [Call bot](#c); [Chat bot](#c) | | [Meeting lifecycle](../apps-in-teams-meetings/meeting-app-extensibility.md#meeting-lifecycle) | It spans from pre-meeting, in-meeting, and post-meeting app experience. You can integrate tabs, bots, and message extensions in each stage of the meeting lifecycle. <br>**See also**: [In-meeting experience](#i) | | [Meeting stage](../sbs-meetings-stage-view.yml) | A feature of meeting extension app. It's a shared space accessible to all participants during the meeting. It helps participants interact and collaborate with app content in real time. <br>**See also**: [Stage view](#s) |
platform Azure Bot Channels Registration https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/bots/azure-bot-channels-registration.md
Title: Azure bot channel registration
-description: describes Azure bot channels for registration
+description: With this learning module, learn about Azure bot channels for registration and how to enable Teams channel after registration.
localization_priority: Normal
platform Teams Bot Samples https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/bots/teams-bot-samples.md
Title: Teams bot samples
-description: describes Teams samples for Bot Framework
+description: With this learning module, learn about Teams samples for Bot Framework, which includes working samples demonstartaing the functionality.
localization_priority: Normal
platform Messaging Extension Design https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/design/messaging-extension-design.md
Title: Designing your message extension
-description: Learn how to design a Teams message extension and get the Microsoft Teams UI Kit.
-keywords: teams design guidelines reference message extensions tips best practice
+description: Learn how to design a Teams message extension and get the Microsoft Teams UI Kit. Describes teams design guidelines reference message extensions tips best practice
ms.localizationpriority: high
platform Overview Solution https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/overview-solution.md
From designing to building and distributing a Teams app, you can use various too
1. Plan your project and figure out the requirement. 1. Design the app. Use Teams UI Kit and UI Library for designing tabs UI. 1. Build the app with JavaScript using Teams Toolkit.
-1. Extend functionality by adding more Teams capabilities and M365 data with Microsoft Graph.
+1. Extend functionality by adding more Teams capabilities and Microsoft 365 data with Microsoft Graph.
1. Test the app on a developer tenant with sample user data. 1. Deploy the app to Azure. 1. Manage and publish the apps to Store with Developer Portal. Monetize your app with options, such as SaaS offers, in-app purchases, and more.
platform Bots Test https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/bot-v3/bots-test.md
Title: Test and debug your bot
-description: Describes how to test bots in Microsoft Teams
+description: This article describes how to test bots in Microsoft Teams
keywords: teams bots testing ms.localizationpriority: medium
Last updated 03/20/2019
[!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-bots.md)]
-When testing your bot you need to take into consideration both the context(s) you want your bot to run in, as well as any functionality you may have added to your bot that requires data specific to Microsoft Teams. Make sure that the method you chose to test your bot aligns with its functionality.
+When testing your bot you need to take into consideration both the context(s) you want your bot to run in, as well as any functionality you may have added to your bot that requires data specific to Microsoft Teams. Ensure that the method you chose to test your bot aligns with its functionality.
## Test by uploading to Teams
platform Bots With Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/bot-v3/bots-with-tabs.md
Title: Combine bots with tabs
-description: Describes how to use tabs and bots together
+description: This article describes how to use tabs and bots together.
keywords: teams bots tabs development ms.localizationpriority: medium
Last updated 03/15/2018
[!include[v3-to-v4-SDK-pointer](~/includes/v3-to-v4-pointer-bots.md)]
-Bots and tabs work well together, and are often combined into a single back-end service. This section describes best practices and common patterns for using tabs and bots together.
+Bots and tabs work together, and are often combined into a single back-end service. This section describes best practices and common patterns for using tabs and bots together.
## Associating user identities across bot and tab For example: Suppose your tab application uses a proprietary ID system to secure its content. Suppose you also have a bot that can interact with the user. Typically, youΓÇÖll want to show content in the tab that is specific to the viewing user. The challenge is that the user ID in your system is likely different from the Microsoft Teams user ID. So how do you associate these two identities?
-In general, the recommended approach is to sign the user in with the bot using the same identity system used to provide authentication for the tab content. You can implement this via the sign-in action, which typically logs in the user via an OAuth flow.
+In general, the recommended approach is to sign the user in with the bot using the same identity system used to provide authentication for the tab content. You can implement via the sign-in action, which typically logs in the user via an OAuth flow.
This flow works best if your identity provider implements the OAuth 2.0 protocol. You can then associate the Teams user ID with the userΓÇÖs credentials from your own identity service.
This flow works best if your identity provider implements the OAuth 2.0 protocol
## Constructing deep links to tabs in messages from your bot
-You may want to use tabs to show more content than can fit inside of a card, or provide a way to complete complex form-filling tasks using the tab canvas. For example, consider navigating the user to the tab when he or she clicks on the card from your bot. For this to happen, youΓÇÖll need to encode your botΓÇÖs message to include a [deep link](~/concepts/build-and-test/deep-links.md) URL, either through markup or as the target of the openUrl action.
+You want to use tabs to show more content than can fit inside of a card, or provide a way to complete complex form-filling tasks using the tab canvas. For example, consider navigating the user to the tab when he or she clicks on the card from your bot. For this to happen, youΓÇÖll need to encode your botΓÇÖs message to include a [deep link](~/concepts/build-and-test/deep-links.md) URL, either through markup or as the target of the openUrl action.
Deep links rely on an entityId, which is an opaque value that maps to a unique entity in your system. When the tab is created, you ideally store some simple state, For example, flag on your backend indicating the tab has been created in the channel. When your bot constructs a message, it can target the entityId associated with that tab.
platform Developer Preview Intro https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/dev-preview/developer-preview-intro.md
Title: Developer Preview
-description: Describes the features in the Public Developer Preview of Microsoft Teams
+description: In this article, know the features that are in the Public Developer Preview of Microsoft Teams and developer preview app manifest.
ms.localizationpriority: high
-keywords: teams preview developer features
# Public developer preview for Microsoft Teams
platform Faqs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/faqs.md
Title: Frequently asked questions
-description: Answers to some common questions
+description: In this learning article, fetch answers to some frequently asked questions while using the Moodle LMS.
ms.localizationpriority: high
The following image shows user creation restrictions options:
<summary><b>We would like our faculty to be able to synchronize courses to Teams? Are Moodle administrators the only ones who can control synchronization of courses?</b></summary>
-By default only Moodle administrators can configure synchronization. The team owner can control if a course is synchronized to Teams and **Allow configure course sync in course** is enabled. In this case, the team owner is the faculty. The block displays the configuration option to individuals with the appropriate owner permissions.
+By default only Moodle administrators can configure synchronization. The team owner can control if a course is synchronized to Teams and **Allow configure course sync in course** is enabled. In this case, the team owner is the faculty. The block displays the configuration option to individuals with the appropriate owner permissions.
<!-- For more information, see Microsoft 365 block within the Moodle course interface. -->
However, you can access the invite and manually add participant names to the **R
<summary><b>Is there any support site where we can get more help on products and other issues?</b></summary> For support and help on the product and services issues or developer community help see, [Support and Feedback](/microsoftteams/platform/feedback).--
platform M365 Plugins Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/m365-plugins/m365-plugins-overview.md
Title: Microsoft 365 plugins
-description: Microsoft 365 plugins details
+description: In this article, you'll have Microsoft 365 plugins, plugin list and labels, Microsoft 365, and One Note interaction and more.
ms.localizationpriority: high
The following image shows the Microsoft block user interface:
## oEmbed filter
-oEmbed filter plugin simplifies and enhances user experience by simplifying inclusion of the external HTML content within Moodle. The following are the advantages of oEmbed filter.
+oEmbed filter plugin simplifies and enhances user experience by simplifying inclusion of the external HTML content within Moodle. The following are the advantages of oEmbed filter.
* Reduces the time to embed videos to an HTML page. * Enables embedding of multiple video content providers.
The following image shows inclusion of external HTML content within Moodle:
## See also * [Partner apps for Moodle](../partner-apps-for-moodle.md)
-* [Moodle FAQ](../faqs.md)
+* [Moodle FAQ](../faqs.md)
platform Moodle Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/moodle-overview.md
Title: Moodle learning management system
-description: Overview of Moodle LMS integration with Teams
+description: Learn Moodle LMS integration with Teams, Moodle learning management, mConnect and deep links, accessibility, and user requirement scenarios. This integration provides Audio, video calls, chat, coureses and activity management, analytical insigths, and more.
ms.localizationpriority: high
-keywords: moodle LMS mConnect deep links
# Moodle learning management system
platform Partner Apps For Moodle https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/partner-apps-for-moodle.md
Title: Partner apps for Moodle
-description: Introduction to partner apps
+description: Learn partner apps for Moodle, key benefits of partner apps for Moodle, Saas offerings and mConnect. Enable singe-sign-on SSO for users of Teams.
ms.localizationpriority: high
The following table shows the advantages of using partner apps:
## mConnect
-The mConnect app integrates Moodle courses and activities into Teams to enhance users learning experience.
+The mConnect app integrates Moodle courses and activities into Teams to enhance users learning experience.
-Skooler, a trusted Microsoft Gold partner in education, has developed the mConnect app and provides the necessary support.
+Skooler, a trusted Microsoft Gold partner in education, has developed the mConnect app and provides the necessary support.
mConnect allows Moodle administrators to automatically set up Teams for Moodle course and to make all features available for each course in Moodle.
platform Manifest Schema Dev Preview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md
Title: Public developer preview manifest schema reference
-description: Sample manifest file and description of all its components that are supported for Microsoft Teams
+description: Learn sample manifest file and description of all its components that are supported for Microsoft Teams.
-keywords: teams manifest schema Developer Preview
ms.localizationpriority: medium Last updated 11/15/2021
Application permissions allow the app to access data without a signed-in user. F
#### Resource-specific delegated permissions
-Delegated permissions allow the app to access data on behalf of the signed-in user.
+Delegated permissions allow the app to access data on behalf of the signed-in user.
-* **Resource-specific delegated permissions for teams**
+* **Resource-specific delegated permissions for teams**
|**Name**|**Description**| |||
Delegated permissions allow the app to access data on behalf of the signed-in us
* [Understand the Microsoft Teams app structure](~/concepts/design/app-structure.md) * [Enable app customization](~/concepts/design/enable-app-customization.md) * [Localize your app](~/concepts/build-and-test/apps-localization.md)
-* [Integrate media capabilities](~/concepts/device-capabilities/mobile-camera-image-permissions.md)
+* [Integrate media capabilities](~/concepts/device-capabilities/media-capabilities.md)
platform Manifest Schema https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md
Title: Manifest schema reference
-description: Describes the manifest schema for Microsoft Teams
+description: In this article, you'll have the manifest schema for Microsoft Teams reference, schema and sample full manifest.
ms.localizationpriority: high
-keywords: teams manifest schema
# Reference: Manifest schema for Microsoft Teams
To create a Teams app manifest file:
* [Understand the Microsoft Teams app structure](~/concepts/design/app-structure.md) * [Enable app customization](~/concepts/design/enable-app-customization.md) * [Localize your app](~/concepts/build-and-test/apps-localization.md)
-* [Integrate media capabilities](~/concepts/device-capabilities/mobile-camera-image-permissions.md)
+* [Integrate media capabilities](~/concepts/device-capabilities/media-capabilities.md)
* [Public developer preview manifest schema for Microsoft Teams](manifest-schema-dev-preview.md)
platform App Templates https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/app-templates.md
Title: Microsoft Teams app templates description: Learn how to use app templates for Microsoft Teams platform with detailed instructions for deploying and installing an app.
-keywords: Microsoft Teams templates samples demo
ms.localizationpriority: medium
platform Integrate Web Apps Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/integrate-web-apps-overview.md
Title: Integrate web apps
-description: An overview of integrating web applications and device capabilities with Microsoft Teams app.
+description: In this article, you'll get started with integrating web applications and device capabilities with Microsoft Teams app. Power platform to create Power apps, Power Virtual Agents, Virtual Assistant, app templates, Shift connectors, Moodle LMS.
ms.localizationpriority: high
-keywords: power platform power apps people picker deep link virtual agent assistant share-to-Teams
# Integrate web apps
platform Integrating Web Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/integrating-web-apps.md
-description: Best practices or considerations for integrating existing web apps with Microsoft Teams
+description: Learn best practices or considerations for integrating existing web apps with Microsoft Teams. It gives information on API requirements, authentication, and deep-linking of your app with Teams.
Last updated 08/26/2020 ms.localizationpriority: medium
platform Shifts Wfm Connectors https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/shifts-wfm-connectors.md
Last updated 03/09/2020 ms.localizationpriority: medium
-keywords: Microsoft Teams connectors kronos
platform Teams Low Code Solutions https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/teams-low-code-solutions.md
Title: Create low-code custom apps for Microsoft Teams
-description: Learn about the available Microsoft low and no code solutions with Teams an Microsoft Power Platform. Learn about solutions, such as Power Apps, Power Automate, Virtual Assistant, and more.
+description: Learn about the available Microsoft low and no code solutions with Teams an Microsoft Power Platform.
ms.localizationpriority: medium
platform Virtual Assistant https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/samples/virtual-assistant.md
Title: Create Virtual Assistant
-description: Learn how to create Virtual Assistant bot for Microsoft Teams using Code examples and snippets with features such as, Adaptive cards; handling interruptions, task module requests, collaborative app scopes, and message extensions; using skill manifest; Support for multiple languages, claim validation, LUIS integration, and mode.
+description: Learn how to create Virtual Assistant bot for Teams using Code examples and snippets with features such as, Adaptive cards, handling interruptions and more.
ms.localizationpriority: medium
-keywords: teams virtual assistant bots
# Create Virtual Assistant
The following image displays the business functions of Virtual Assistant:
## Create a Teams-focused Virtual Assistant
-Microsoft has published a [Microsoft Visual Studio template](https://marketplace.visualstudio.com/items?itemName=BotBuilder.VirtualAssistantTemplate) for building Virtual Assistants and skills. With the Visual Studio template, you can create a Virtual Assistant, powered by a text based experience with support for limited rich cards with actions. We've enhanced the Visual Studio base template to include Microsoft Teams platform capabilities and power great Teams app experiences. A few of the capabilities include support for rich Adaptive Cards, task modules, teams or group chats, and message extensions. For more information on extending Virtual Assistant to Microsoft Teams, see [Tutorial: Extend Your Virtual Assistant to Microsoft Teams](https://microsoft.github.io/botframework-solutions/clients-and-channels/tutorials/enable-teams/1-intro/).
+Microsoft has published a [Microsoft Visual Studio template](https://marketplace.visualstudio.com/items?itemName=BotBuilder.VirtualAssistantTemplate) for building Virtual Assistants and skills. With the Visual Studio template, you can create a Virtual Assistant, powered by a text based experience with support for limited rich cards with actions. We have enhanced the Visual Studio base template to include Microsoft Teams platform capabilities and power great Teams app experiences. A few of the capabilities include support for rich Adaptive Cards, task modules, teams or group chats, and message extensions. For more information on extending Virtual Assistant to Microsoft Teams, see [Tutorial: Extend Your Virtual Assistant to Microsoft Teams](https://microsoft.github.io/botframework-solutions/clients-and-channels/tutorials/enable-teams/1-intro/).
The following image displays the high level diagram of a Virtual Assistant solution: ![High-level diagram of a Virtual Assistant solution](../assets/images/bots/virtual-assistant/high-level-diagram.png) ### Add Adaptive Cards to your Virtual Assistant
-To dispatch requests properly, your Virtual Assistant must identify the correct LUIS model and corresponding skill associated with it. However, the dispatching mechanism can't be used for card action activities, as the LUIS model associated with a skill, is trained for card action texts. The card action texts are fixed, pre-defined keywords, and not commented from a user.
+To dispatch requests properly, your Virtual Assistant must identify the correct LUIS model and corresponding skill associated with it. However, the dispatching mechanism cannot be used for card action activities, as the LUIS model associated with a skill, is trained for card action texts. The card action texts are fixed, pre-defined keywords, and not commented from a user.
This drawback is resolved by embedding skill information in the card action payload. Every skill should embed `skillId` in the `value` field of card actions. You must ensure that each card action activity carries the relevant skill information, and Virtual Assistant can utilize this information for dispatching.
Virtual Assistant can handle interruptions in cases where a user tries to invoke
To add task module capabilities to a Virtual Assistant, two additional methods are included in the Virtual Assistant activity handler: `OnTeamsTaskModuleFetchAsync` and `OnTeamsTaskModuleSubmitAsync`. These methods listen to task module-related activities from Virtual Assistant, identify the skill associated with the request, and forward the request to the identified skill.
-Request forwarding is done through the [SkillHttpClient](/dotnet/api/microsoft.bot.builder.integration.aspnet.core.skills.skillhttpclient?view=botbuilder-dotnet-stable&preserve-view=true), `PostActivityAsync` method. It returns the response as `InvokeResponse`, which is parsed and converted to `TaskModuleResponse` .
+Request forwarding is done through the [SkillHttpClient](/dotnet/api/microsoft.bot.builder.integration.aspnet.core.skills.skillhttpclient?view=botbuilder-dotnet-stable&preserve-view=true), `PostActivityAsync` method. It returns the response as `InvokeResponse` which is parsed and converted to `TaskModuleResponse` .
```csharp public static TaskModuleResponse GetTaskModuleRespose(this InvokeResponse invokeResponse)
Request forwarding is done through the [SkillHttpClient](/dotnet/api/microsoft.b
``` A similar approach is followed for card action dispatching and task module responses. Task module fetch and submit action data is updated to include `skillId`.
-Activity Extension method `GetSkillId` extracts `skillId` from the payload, which provides details about the skill that needs to be invoked.
+Activity Extension method `GetSkillId` extracts `skillId` from the payload which provides details about the skill that needs to be invoked.
-The code snippets for `OnTeamsTaskModuleFetchAsync` and `OnTeamsTaskModuleSubmitAsync` methods are given in the following section:
+The code snippet for `OnTeamsTaskModuleFetchAsync` and `OnTeamsTaskModuleSubmitAsync` methods are given in the following section:
```csharp // Invoked when a "task/fetch" event is received to invoke task module.
Additionally, you must include all skill domains in the `validDomains` section i
### Handle collaborative app scopes
-Teams apps can exist in multiple scopes including 1:1 chat, group chat, and channels. The core Virtual Assistant template is designed for 1:1 chats. As part of the onboarding experience Virtual Assistant prompts users for name and maintains user state. Since the onboarding experience isn't suited for group chat or channel scopes, it has been removed.
+Teams apps can exist in multiple scopes including 1:1 chat, group chat, and channels. The core Virtual Assistant template is designed for 1:1 chats. As part of the onboarding experience Virtual Assistant prompts users for name and maintains user state. Since the onboarding experience is not suited for group chat or channel scopes, it has been removed.
-Skills should handle activities in multiple scopes, such as 1:1 chat, group chat, and channel conversation. If any of these scopes aren't supported, skills must respond with an appropriate message.
+Skills should handle activities in multiple scopes, such as 1:1 chat, group chat, and channel conversation. If any of these scopes are not supported, skills must respond with an appropriate message.
The following processing functions have been added to Virtual Assistant core:
Once the commands are invoked by a user, the Virtual Assistant can identify an a
} ```
-Some message extension activities don't include the command ID. For example, `composeExtension/selectItem` contains only the value of the invoke tap action. To identify the associated skill, `skillId` is attached to each item card while forming a response for `OnTeamsMessagingExtensionQueryAsync`. This is similar to the approach for [adding adaptive cards to your Virtual Assistant](#add-adaptive-cards-to-your-virtual-assistant).
+Some message extension activities do not include the command ID. For example, `composeExtension/selectItem` contains only the value of the invoke tap action. To identify the associated skill, `skillId` is attached to each item card while forming a response for `OnTeamsMessagingExtensionQueryAsync`. This is similar to the approach for [adding adaptive cards to your Virtual Assistant](#add-adaptive-cards-to-your-virtual-assistant).
```csharp // Invoked when a 'composeExtension/selectItem' invoke activity is received for compose extension query command.
The following image displays a Virtual Assistant with a **book a room** skill:
![Virtual Assistant with a "book a room" skill](../assets/images/bots/virtual-assistant/book-a-room-skill.png)
-Followings are the delta changes introduced to convert it to a skill, which is attached to a Virtual Assistant. Similar guidelines are followed to convert any existing v4 bot to a skill.
+Followings are the delta changes introduced to convert it to a skill which is attached to a Virtual Assistant. Similar guidelines are followed to convert any existing v4 bot to a skill.
### Skill manifest
-A skill manifest is a JSON file that exposes a skill's messaging endpoint, ID, name, and other relevant metadata. This manifest is different than the manifest used for sideloading an app in Microsoft Teams. A Virtual Assistant requires a path to this file as an input to attach a skill. We've added the following manifest to the bot's wwwroot folder.
+A skill manifest is a JSON file that exposes a skill's messaging endpoint, ID, name, and other relevant metadata. This manifest is different than the manifest used for sideloading an app in Microsoft Teams. A Virtual Assistant requires a path to this file as an input to attach a skill. We have added the following manifest to the bot's wwwroot folder.
```bash botskills connect --remoteManifest "<url to skill's manifest>" ..
The corresponding `.lu` file is shown in the following section:
``` With this approach, any command issued by a user to Virtual Assistant related to `book room` or `manage favorites` are identified as a command associated with `Book-a-room` bot and is forwarded to this skill.
-On the other hand, `Book-a-room room` bot needs to use LUIS model to understand these commands if they aren't typed full. For example: `I want to manage my favorite rooms`.
+On the other hand, `Book-a-room room` bot needs to use LUIS model to understand these commands if they are not typed full. For example: `I want to manage my favorite rooms`.
### Multi-Language support
To modify `languages` parameter, update botskills command as follows:
botskills connect --remoteManifest "<url to skill's manifest>" --luisFolder "<path to luisFolder>" --languages "en-us, your_language_culture" --cs ```
-Virtual Assistant uses `SetLocaleMiddleware` to identify current locale and invoke corresponding dispatch model. Bot framework activity has locale field, which is used by this middleware. You can use the same for your skill as well. Book-a-room bot doesn't use this middleware and instead gets locale from Bot framework activity's [clientInfo entity](https://github.com/microsoft/botframework-sdk/blob/master/specs/botframework-activity/botframework-activity.md#clientinfo).
+Virtual Assistant uses `SetLocaleMiddleware` to identify current locale and invoke corresponding dispatch model. Bot framework activity has locale field which is used by this middleware. You can use the same for your skill as well. Book-a-room bot does not use this middleware and instead gets locale from Bot framework activity's [clientInfo entity](https://github.com/microsoft/botframework-sdk/blob/master/specs/botframework-activity/botframework-activity.md#clientinfo).
### Claim validation
-We've added [claimsValidator](https://github.com/nebhagat/msteams-virtual-assistant-dotnet/blob/master/msteams-virtual-assistant-dotnet/Authentication/AllowedCallersClaimsValidator.cs) to restrict callers to the skill. To allow a Virtual Assistant to call this skill, populate `AllowedCallers` array from `appsettings` with that particular Virtual Assistant's app ID.
+We have added [claimsValidator](https://github.com/nebhagat/msteams-virtual-assistant-dotnet/blob/master/msteams-virtual-assistant-dotnet/Authentication/AllowedCallersClaimsValidator.cs) to restrict callers to the skill. To allow a Virtual Assistant to call this skill, populate `AllowedCallers` array from `appsettings` with that particular Virtual Assistant's app ID.
``` "AllowedCallers": [ "<caller_VA1_appId>", "<caller_VA2_appId>" ],
For more information on adding claims validation to a skill, see [add claims val
### Limitation of card refresh
-Updating activity, such as card refresh isn't supported yet through Virtual Assistant ([github issue](https://github.com/microsoft/botbuilder-dotnet/issues/3686)). Hence, we've replaced all card refresh calls `UpdateActivityAsync` with posting new card calls `SendActivityAsync`.
+Updating activity, such as card refresh is not supported yet through Virtual Assistant ([github issue](https://github.com/microsoft/botbuilder-dotnet/issues/3686)). Hence, we have replaced all card refresh calls `UpdateActivityAsync` with posting new card calls `SendActivityAsync`.
### Card actions and task module flows To forward card action or task module activities to an associated skill, the skill must embed `skillId` to it. `Book-a-room` bot card action, task module fetch and submit action payloads are modified to contain `skillId` as a parameter.
-For more information, refer [this](/microsoftteams/platform/samples/virtual-assistant#add-adaptive-cards-to-your-virtual-assistant) section from this documentation.
+For more information refer [this](/microsoftteams/platform/samples/virtual-assistant#add-adaptive-cards-to-your-virtual-assistant) section from this documentation.
### Handle activities from group chat or channel scope
You can also leverage existing skills from [Bot Framework Solutions repository](
## Limitations of Virtual Assistant
-* **EndOfConversation**: A skill must send an `endOfConversation` activity when it finishes a conversation. Based on the activity, a Virtual Assistant ends context with that particular skill and gets back into Virtual Assistant's root context. For Book-a-room bot, there's no clear state where conversation is ended. Hence we haven't sent `endOfConversation` from `Book-a-room` bot and when user wants to go back to root context they can do that by `start over` command.
-* **Card refresh**: Card refresh isn't yet supported through Virtual Assistant.
+* **EndOfConversation**: A skill must send an `endOfConversation` activity when it finishes a conversation. Based on the activity, a Virtual Assistant ends context with that particular skill and gets back into Virtual Assistant's root context. For Book-a-room bot, there is no clear state where conversation is ended. Hence we have not sent `endOfConversation` from `Book-a-room` bot and when user wants to go back to root context they can simply do that by `start over` command.
+* **Card refresh**: Card refresh is not yet supported through Virtual Assistant.
* **Message extensions**: * Currently, a Virtual Assistant can support a maximum of ten commands for message extensions.
- * Configuration of message extensions isn't scoped to individual commands but for the entire extension itself. This limits configuration for each individual skill through Virtual Assistant.
+ * Configuration of message extensions is not scoped to individual commands but for the entire extension itself. This limits configuration for each individual skill through Virtual Assistant.
* Message extensions command IDs have a maximum length of [64 characters](../resources/schem#composeextensions) and 37 characters are used for embedding skill information. Thus, updated constraints for command ID are limited to 27 characters.
-You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-components/tree/main/skills/csharp) or create a new skill altogether from scratch. Tutorials for the later can be found [here](https://microsoft.github.io/botframework-solutions/overview/skills/). Refer to [documentation](/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true) for Virtual Assistant and skills architecture.
+You can also leverage existing skills from [Bot Framework Solutions repository](https://github.com/microsoft/botframework-components/tree/main/skills/csharp) or create a new skill altogether from scratch. Tutorials for the later can be found [here](https://microsoft.github.io/botframework-solutions/overview/skills/). Please refer to [documentation](/azure/bot-service/skills-conceptual?view=azure-bot-service-4.0&preserve-view=true) for Virtual Assistant and skills architecture.
## Code sample
platform Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs.md
Title: Design tabs for desktop, web, and mobile
-description: Learn how to design a Teams tab for desktop, web, and mobile, and get the Microsoft Teams UI Kit. Learn about the tab functionality and appearance, building user authentication, tab notifications, and deep linking in tabs.
+description: Learn how to design a tab for desktop, web, and mobile, and get the Microsoft Teams UI Kit. Learn about the tab, building user authentication, tab notifications, and deep linking.
ms.localizationpriority: high
platform Tabs In Sharepoint https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/tabs-in-sharepoint.md
Title: Add Teams tab to SharePoint description: Learn how to deploy your existing Teams tab to SharePoint as a SharePoint Framework web part using code samples.
-keywords: teams tabs sharepoint framework development
ms.localizationpriority: medium
platform Tabs Link Unfurling https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/tabs-link-unfurling.md
Title: Tabs link unfurling and Stage View
-description: Learn how to unfurl a link, open the Stage View and pin a tab with Microsoft Teams app. Learn about stage view and invoking it using Adaptive card using code example and sample.
+description: Learn how to unfurl a link, open the Stage View and pin a tab with Teams app. Learn invoking it using Adaptive card using code example and sample.
ms.localizationpriority: medium
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/what-are-tabs.md
You can have multiple channels or group tabs, and up to 16 personal tabs per app
* [Custom tabs in Microsoft Teams](/microsoftteams/built-in-custom-tabs#develop-custom-tabs) * [Request device permissions](../concepts/device-capabilities/native-device-permissions.md)
-* [Integrate media capabilities](../concepts/device-capabilities/mobile-camera-image-permissions.md)
+* [Integrate media capabilities](../concepts/device-capabilities/media-capabilities.md)
* [Integrate a QR or barcode scanner](../concepts/device-capabilities/qr-barcode-scanner-capability.md) * [Integrate location capabilities](../concepts/device-capabilities/location-capability.md) * [Tabs on mobile](design/tabs-mobile.md#tabs-on-mobile)
platform Invoking Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/task-modules-and-cards/task-modules/invoking-task-modules.md
Microsoft Teams ensures that keyboard navigation works properly from the task mo
## See also * [Request device permissions](~/concepts/device-capabilities/native-device-permissions.md)
-* [Integrate media capabilities](~/concepts/device-capabilities/mobile-camera-image-permissions.md)
+* [Integrate media capabilities](~/concepts/device-capabilities/media-capabilities.md)
* [Integrate QR or barcode scanner capability in Teams](~/concepts/device-capabilities/qr-barcode-scanner-capability.md) * [Integrate location capabilities in Teams](~/concepts/device-capabilities/location-capability.md)
platform Teamsfx CLI https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-CLI.md
Here's a list of main TeamsFx features:
TeamsFx CLI is a text-based command line interface that accelerates Teams application development. It aims to provide keyboard centric experience while building Teams applications. It also enables CI/CD scenario where you can integrate CLI in scripts for automation. For more information, see:+ * [Source code](https://github.com/OfficeDev/TeamsFx/tree/dev/packages/cli) * [Package (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx-cli)
This command is used to deploy the current application. By default it deploys en
|`--include-app-manifest`| No | Whether to deploy app manifest to Teams platform. Options are `yes` and `not`. The default value is `no`. | |`--include-aad-manifest`| No | Whether to deploy aad manifest. Options are `yes` and `not`. The default value is `no`. | - ## `teamsfx validate` Validate current application. This command validates your application's manifest file.
The secrets in `.userdata` file are encrypted, `teamsfx config` and can help you
* Disable environment checker
- There are three configurations to turn on or off Node.js, .NET SDK and Azure Functions Core Tools validation, and all of them are enabled by default. You can set the configuration to "off" if you don't need the dependencies validation and want to install the dependencies by yourself. Check the following guides:
+ There are three configurations to turn on or off Node.js, .NET SDK and Azure Functions Core Tools validation, and all of them are enabled by default. You can set the configuration to "off" if you don't need the dependencies validation and want to install the dependencies by yourself. Check the following guides:
* [Node.js installation guide](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-nodejs) * [.NET SDK installation guide](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-net-sdk)
- * [Azure Functions Core Tools installation guide](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-azure- functions-core-tools).
+ * [Azure Functions Core Tools installation guide](<https://github.com/OfficeDev/TeamsFx/blob/dev/docs/vscode-extension/envchecker-help.md#how-to-install-azure>- functions-core-tools).
To disable .NET SDK validation, you can use the following command:
The following list provides required permissions for `TeamsFx` projects:
teamsfx permission grant --env dev --email user-email@user-tenant.com ```
- After receiving required permission, project creator and collaborators can share the project with the new collaborator by GitHub, and the new collaborator can have all permission for Microsoft 365 account.
+ After receiving required permission, project creator and collaborators can share the project with the new collaborator by GitHub, and the new collaborator can have all the permissions for Microsoft 365 account.
* Show Permission Status
platform Teamsfx SDK https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-SDK.md
TeamsFx helps to reduce the developer tasks by using Teams SSO and accessing clo
You can use the TeamsFx SDK to:
-* Access the core functionalities in client and server environment
-* Write user authentication code in a simplified way
+* Access the core functionalities in client and server environment.
+* Write user authentication code in a simplified way.
## Prerequisites
const profile = await graphClient.api("/users/{object_id_of_another_people}").ge
### TeamsFx class
-TeamsFx class instance access all TeamsFx settings from environment variables by default. You can also set customized configuration values to override the default values. Check [override configuration](#override-configuration) for details.
-When creating a TeamsFx instance, you also need to specify the identity type.
+TeamsFx class instance access all TeamsFx settings from environment variables by default. You can also set customized configuration values to override the default values. Check [override configuration](#override-configuration) for details.
+When creating a TeamsFx instance, you also need to specify the identity type.
There are two identity types: * User Identity
There are three credential classes to simplify authentication. [credential folde
Here's the corresponding scenarios for each credential class target. #### User Identity in browser environment+ `TeamsUserCredential` represents Teams current user's identity. Using this credential will request user consent at the first time. It leverages the Teams SSO and On-Behalf-Of flow to do token exchange. SDK uses this credential when developers choose user identity in browser environment. Required configuration: `initiateLoginEndpoint`, `clientId`. #### User Identity in Node.js environment+ `OnBehalfOfUserCredential` uses On-Behalf-Of flow and need Teams SSO token. It's designed to be used in Azure Function or bot scenarios. SDK uses this credential when developers choose user identity in Node.js environment. Required configuration: `authorityHost`, `tenantId`, `clientId`, `clientSecret` or `certificateContent`. #### Application Identity in Node.js environment+ `AppCredential` represents the application identity. It's used when user isn't involved like time-triggered automation job. SDK uses this credential when developers choose App identity in Node.js environment. Required configuration: `tenantId`, `clientId`, `clientSecret` or `certificateContent`.
Required configuration: `initiateLoginEndpoint`, `tenantId`, `clientId`, and `ap
TeamsFx SDK provides several functions to ease the configuration for third-party libraries. They're located under [core folder](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk/src/core).
-* Microsoft Graph Service:`createMicrosoftGraphClient` and `MsGraphAuthProvider` help to create authenticated Graph instance.
-* SQL:`getTediousConnectionConfig` returns a tedious connection config.
+* Microsoft Graph Service:`createMicrosoftGraphClient` and `MsGraphAuthProvider` help to create authenticated Graph instance.
+* SQL:`getTediousConnectionConfig` returns a tedious connection config.
Required configuration:+ * `sqlServerEndpoint`, `sqlUsername`, `sqlPassword` if you want to use user identity * `sqlServerEndpoint`, `sqlIdentityId` if you want to use MSI identity
The following section provides several code snippets for common scenarios:
<details> <summary><b>Use Graph API in tab app</b></summary>
-
+ Use `TeamsFx` and `createMicrosoftGraphClient`. ```ts
const profile = await graphClient.api("/me").get();
:::image type="content" source="~/assets/images/teams-toolkit-v2/teams toolkit fundamentals/createapi-client.PNG" alt-text="Create api client" border="false"::: - </details> <br>
const response = await apiClient.get("/api/" + functionName);
<details> <summary><b>Access SQL database in Azure Function</b></summary> - Use `tedious` library to access SQL and leverage `DefaultTediousConnectionConfiguration` that manages authentication. Apart from `tedious`, you can also compose connection config of other SQL libraries based on the result of `sqlConnectionConfig.getConfig()`.
setLogFunction((level: LogLevel, message: string) => {
``` ## Override configuration+ You can pass custom config when creating TeamsFx instance to override default configuration or set required fields when environment variables are missing. -- If you have created tab project using VS Code Toolkit, the following config values will be used from pre-configured environment variables:
+* If you have created tab project using VS Code Toolkit, the following config values will be used from pre-configured environment variables:
* authorityHost (REACT_APP_AUTHORITY_HOST) * tenantId (REACT_APP_TENANT_ID) * clientId (REACT_APP_CLIENT_ID)
You can pass custom config when creating TeamsFx instance to override default co
* apiEndpoint (REACT_APP_FUNC_ENDPOINT) * apiName (REACT_APP_FUNC_NAME) -- If you have created Azure Function / bot project using VS Code Toolkit, the following config values will be used from pre-configured environment variables:
+* If you have created Azure Function / bot project using VS Code Toolkit, the following config values will be used from pre-configured environment variables:
* initiateLoginEndpoint (INITIATE_LOGIN_ENDPOINT) * authorityHost (M365_AUTHORITY_HOST) * tenantId (M365_TENANT_ID)
You can pass custom config when creating TeamsFx instance to override default co
## Upgrade latest SDK version If you're using the version of SDK that has `loadConfiguration()`, you can follow these steps to upgrade to the latest SDK version.+ 1. Remove `loadConfiguration()` and pass customized settings using `new TeamsFx(IdentityType.User, { ...customConfig })` 2. Replace `new TeamsUserCredential()` with `new TeamsFx()` 3. Replace `new M365TenantCredential()` with `new TeamsFx(IdentityType.App)`
platform Teamsfx Collaboration https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-collaboration.md
If you want to remove collaborators from Teams Toolkit extension, you need to re
* Using Developer Portal
- * Go to [Teams Developer Portal](https://dev.teams.microsoft.com/home) and select your Teams app by name or app ID
- * Select **Owners** from left panel
- * Select and remove the collaborator
+ * Go to [Teams Developer Portal](https://dev.teams.microsoft.com/home) and select your Teams app by name or app ID.
+ * Select **Owners** from left panel.
+ * Select and remove the collaborator.
* Using Azure Active Directory
- * Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD App
- * Select **Owners** from left panel in Azure AD App management page
- * Select and remove the collaborator
+ * Go to [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps), select **App registration** from left panel, and find your Azure AD App.
+ * Select **Owners** from left panel in Azure AD App management page.
+ * Select and remove the collaborator.
> [!NOTE] >
platform Teamsfx Preview And Customize App Manifest https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/TeamsFx-preview-and-customize-app-manifest.md
You can preview manifest file in local and remote environments.
* [Preview manifest file in local environment](#preview-manifest-file-in-local-environment) * [Preview manifest file in remote environment](#preview-manifest-file-in-remote-environment)
-
+ ### Preview manifest file in local environment To preview manifest file in local environment, you can press **F5** to run local debug. It generates default local settings for you, then the app package and preview manifest builds under `build/appPackage` folder.
The preview local appears as shown in the image:
* Select **Provision in the cloud** under **DEVELOPMENT** in Teams Toolkit extension or * Trigger **Teams: Provision in the cloud** from command palette.
-
+ It generates configuration for remote Teams app, and builds package and preview manifest under `build/appPackage` folder. You can also preview manifest file in remote environment by following steps:
Teams Toolkit consists of the following manifest template files under `manifest.
* `manifest.template.json` * `templates/appPackage` - During the local debug or provision, Teams Toolkit loads manifest from `manifest.template.json`, with the configurations from `state.{env}.json`, `config.{env}.json`, and creates Teams app in [Dev Portal](https://dev.teams.microsoft.com/apps). ## Supported placeholders in manifest.template.json
To preview values for all the environments, you can hover over the placeholder.
* [Manage multiple environments](TeamsFx-multi-env.md) * [Reference: Manifest schema for Microsoft Teams](../resources/schem)
-* [Public developer preview for Microsoft Teams](../resources/dev-preview/developer-preview-intro.md)
+* [Public developer preview for Microsoft Teams](../resources/dev-preview/developer-preview-intro.md)
platform Accounts https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/accounts.md
You can sign-up for the developer program by using one of the following account
## Azure account to host backend resources
-Azure account is optional if your existing application is hosted on other cloud provider and you want to integrate the existing application on Teams platform.
+Azure account is optional, if your existing application is hosted on other cloud provider and you want to integrate the existing application on Teams platform.
**Visual Studio ID**
platform Add API Connection https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-API-connection.md
Title: Connect to existing APIs
-description: Describes connection to existing APIs
+description: In this article, learn how toolkit helps you bootstrap sample access to existing APIs. It provides list of different authentication types.
ms.localizationpriority: medium
Teams Toolkit helps you bootstrap sample code to access the APIs if you don't ha
When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs the following function:
-* Generate sample code under `./bot` or `./api` folder
-* Add a reference to the `@microsoft/teamsfx` package to `package.json`
-* Add application settings for your API in `.env.teamsfx.local` that configures local debugging
+* Generate sample code under `./bot` or `./api` folder.
+* Add a reference to the `@microsoft/teamsfx` package to `package.json`.
+* Add application settings for your API in `.env.teamsfx.local` that configures local debugging.
### Connect to API in Visual Studio Code
When you use Teams Toolkit to connect to an existing API, Teams Toolkit performs
:::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-invoke.png" alt-text="api invoke":::
- 9. Enter an alias for the API. The alias generates an application setting name for the API that is added to the project's local application setting.
+ 9. Enter an alias for the API. The alias generates an application setting name for the API that is added to the project's local application setting.
:::image type="content" source="../assets/images/teams-toolkit-v2/add-API/api-alias.png" alt-text="api alias":::
The base command of this feature is `teamsfx add api-connection [authentication
|**Authentication type**|**Sample command**| |--||
- |Basic|teamsfx add api-connection basic --endpoint <https://example.com> --component bot --alias example --user-name exampleuser --interactive false|
+ |Basic|teamsfx add api-connection basic --endpoint <https://example.com> --component bot --alias example--user-name exampleuser --interactive false|
|API Key|teamsfx add api-connection apikey --endpoint <https://example.com> --component bot --alias example --key-location header --key-name example-key-name --interactive false| |Azure AD|teamsfx add api-connection aad --endpoint <https://example.com> --component bot --alias example --app-type custom --tenant-id your_tenant_id --app-id your_app_id --interactive false| |Certificate|teamsfx add api-connection cert --endpoint <https://example.com> --component bot --alias example --interactive false|
The following steps help to test the API connection in the Teams Toolkit local e
The generated API client is an Axios API client. Use the Axios client to make requests to the API. > [!Note]
- >[Axios](https://www.npmjs.com/package/axios) is a popular nodejs package that helps you with http(s) requests. For more information on how to make http(s) requests, see [Axios example documentation](https://axios-http.com/docs/example) to learn how to make http(s).
+ > [Axios](https://www.npmjs.com/package/axios) is a popular nodejs package that helps you with http(s) requests. For more information on how to make http(s) requests, see [Axios example documentation](https://axios-http.com/docs/example) to learn how to make http(s).
## Deploy your application to Azure
class CustomAuthProvider implements AuthProvider {
}; } ```+ </details> <details> <summary><b>Connect to APIs for Azure AD permissions</b></summary>
You can follow the steps to access these APIs while using:
> [!NOTE] > For application permission use your client ID.
+ >
</details> ## See also
platform Add Capability https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-capability.md
Add capability in Teams Toolkit helps you to add additional capability to your e
The following list provides advantages to add more capabilities in TeamsFx:
-* Provides convenience
-* Adds more function to your app by automatically adding source codes using Teams Toolkit
+* Provides convenience.
+* Adds more function to your app by automatically adding source codes using Teams Toolkit.
## Limitations The following list provides limitations to add more capabilities in TeamsFx:
-* You can add tabs up to 16 instances
-* You can add a bot and message extension for one instance each
+* You can add tabs up to 16 instances.
+* You can add a bot and message extension for one instance each.
## Add capabilities **You can add capabilities by the following methods:**
-* To add capabilities by using Teams Toolkit in Visual Studio Code
-* To add capabilities by using command palette
+* To add capabilities by using Teams Toolkit in Visual Studio Code.
+* To add capabilities by using command palette.
> [!Note] > You need to provision for each environment, after you have successfully added the capabilities in your Teams app.
The following list provides limitations to add more capabilities in TeamsFx:
## Add capabilities using TeamsFx CLI
-* Change directory to your **project directory**
+* Change directory to your **project directory**.
* The following table lists the capabilities and required commands: |Capability and Scenario| Command| |--|-|
- |To add notification bot |`teamsfx add notification `|
- |To add command bot |`teamsfx add command-and-response `|
+ |To add notification bot |`teamsfx add notification`|
+ |To add command bot |`teamsfx add command-and-response`|
|To add sso-enabled tab |`teamsfx add sso-tab`| |To add tab |`teamsfx add tab`| |To add bot |`teamsfx add bot`|
The following table lists the available capabilities to add in your project:
After adding a bot and message extension, the changes in your project are as follows:
-* A bot template code is added into a subfolder with path `yourProjectFolder/bot`. This includes a **hello world** bot application template into your project
-* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally
+* A bot template code is added into a subfolder with path `yourProjectFolder/bot`. This includes a **hello world** bot application template into your project.
+* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally.
* `manifest.template.json` file under `templates/appPackage` folder is updated, which includes the bot related information in the manifest file that represents your application in the Teams Platform. The changes are as follows: * The ID of your bot * The scopes of your bot * The commands that hello world bot application can respond to
-* The files under `templates/azure/teamsfx` are be updated, and `templates/azure/provision/xxx`.bicep files are regenerated
-* The files under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability
+* The files under `templates/azure/teamsfx` are be updated, and `templates/azure/provision/xxx`.bicep files are regenerated.
+* The files under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability.
After adding tab, the changes in your project are as follows:
-* A frontend tab template code is added into a subfolder with path `yourProjectFolder/tab`, which includes a **hello world** tab application template into your project
-* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally
+* A frontend tab template code is added into a subfolder with path `yourProjectFolder/tab`, which includes a **hello world** tab application template into your project.
+* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally.
* `manifest.template.json` file under `templates/appPackage` folder is updated, which includes tab-related information in the manifest file that represents your application in the Teams Platform. The changes are: * The configurable and static tabs * The scopes of the tabs
-* The files under `templates/azure/teamsfx` will be updated, and `templates/azure/provision/xxx`.bicep file will be regenerated
-* The file under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability
+* The files under `templates/azure/teamsfx` will be updated, and `templates/azure/provision/xxx`.bicep file will be regenerated.
+* The file under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability.
## Step-by-step guide
platform Add Single Sign On https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/add-single-sign-on.md
The following steps helps you to add SSO using Teams Toolkit in Visual Studio Co
### Add SSO using TeamsFx CLI
-You can run `teamsfx add sso` command in your **project root directory**
+You can run `teamsfx add sso` command in your **project root directory**
> [!Note] > The feature enables SSO for all existing applicable capabilities. Follow the same steps to enable SSO if you add capability later to the project.
platform Debug Local https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/debug-local.md
The following table lists the debug configuration names and types for project wi
<details> <summary><b>Sideloads the Teams app</b></summary>
-The configuration **Attach to Frontend** or **Launch Bot** launches a new Edge or Chrome browser instance and opens a web page to load Teams client. After the Teams client is loaded, Teams sideloads the Teams app controlled by the sideloading URL defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select one from the dropdown list as per your requirement.
+The configuration **Attach to Frontend** or **Launch Bot** launches a new Edge or Chrome browser instance and opens a web page to load Teams client. After the Teams client is loaded, Teams sideloads the Teams app controlled by the sideloading URL defined in the launch configurations [Microsoft Teams](https://teams.microsoft.com/l/app/>${localTeamsAppId}?installAppPackage=true&webjoin=true&${account-hint}). When Teams client loads in the web browser, select **Add** or select one from the dropdown list as per your requirement.
:::image type="content" source="../assets/images/teams-toolkit-v2/debug/hello-local-debug.png" alt-text="local debug" border="true":::
platform Visual Studio Code Overview https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/visual-studio-code-overview.md
Title: Build apps with the Microsoft Teams Toolkit and Visual Studio Code
-description: Get started building great custom apps directly within Visual Studio Code with the Microsoft Teams Toolkit
+description: Get started building great custom apps directly within Visual Studio Code with the Microsoft Teams Toolkit.
keywords: teams visual studio code toolkit ms.localizationpriority: medium
# Build apps with the Teams Toolkit and Visual Studio Code
-The Teams Toolkit for Visual Studio Code helps developers create and deploy Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365 with a ΓÇ£zero-configurationΓÇ¥ approach to the developer experience.
+The Teams Toolkit for Visual Studio Code helps developers create and deploy Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365 with a ΓÇ£zero-configurationΓÇ¥ approach to the developer experience.
You also can use the toolkit with Visual Studio or as a CLI (called `teamsfx`).
The Teams Toolkit can create React apps that are hosted in Azure or SPFx web par
1. Select a workspace folder. A folder is created within your workspace folder for the project you're creating.
-1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
+1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.
-Your Teams app is created within a few seconds. The scaffolded app contains code to handle single sign-on with Azure Active Directory and access to the Microsoft Graph. If you selected Azure resources, then the code for those resources is also available.
+Your Teams app is created within a few seconds. The scaffolded app contains code to handle single sign-on with Azure Active Directory and access to the Microsoft Graph. If you selected Azure resources, then the code for those resources is also available.
For a walk-through of the SPFx creation and publication process, see the [SPFx tutorial](../get-started/first-app-spfx.md).
To build and run your app locally:
1. From Visual Studio Code, press **F5** to run your application in debug mode.
- > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
+ > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.
The toolkit prompts you to install a local certificate if required. This certificate allows Teams to load your application from `https://localhost`. Select yes when the following dialog appears:
To build and run your app locally:
1. You may be prompted to sign in. If so, sign in with your Microsoft 365 account. 1. When prompted to install the app onto Teams, press **Add**.
-Both the backend and frontend are hooked into the Visual Studio Code debugger. This allows you to set breakpoints anywhere in your code and inspect state. You can also use any frontend debugging tools (such as the React Developer Tools) within the browser. For more information about debugging in Visual Studio Code, review [the documentation](https://code.visualstudio.com/Docs/editor/debugging).
+Both the backend and frontend are hooked into the Visual Studio Code debugger. This allows you to set breakpoints anywhere in your code and inspect state. You can also use any frontend debugging tools (such as the React Developer Tools) within the browser. For more information about debugging in Visual Studio Code, review [the documentation](https://code.visualstudio.com/Docs/editor/debugging).
## Publish your app to Teams
If using Azure hosting, you must have provisioned and deployed to the cloud. For
## See also
-* [Build apps with the Teams Toolkit and Visual Studio](~/toolkit/visual-studio-overview.md)
-* [Build tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK](~/tabs/how-to/using-teams-client-sdk.md)
+- [Build apps with the Teams Toolkit and Visual Studio](~/toolkit/visual-studio-overview.md)
+- [Build tabs and other hosted experiences with the Microsoft Teams JavaScript client SDK](~/tabs/how-to/using-teams-client-sdk.md)
platform Visual Studio Code Tab Sso https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/visual-studio-code-tab-sso.md
Title: Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs
-description: Build a tab that supports single-sign-on and Microsoft Graph calls directly within Visual Studio Code with the Microsoft Teams Toolkit
+description: Build a tab that supports single-sign-on and Microsoft Graph calls directly within Visual Studio Code with the Microsoft Teams Toolkit.
keywords: teams visual studio code toolkit tabs sso graph authentication Azure identity platform localization_priority: Normal
> [!IMPORTANT] > **This document refers to an old version of Teams Toolkit** >
-> For current information, read the [prerequisites](../get-started/prerequisites.md) and follow one of the newer tutorials.
+> For current information, read the [prerequisites](../get-started/prerequisites.md) and follow one of the newer tutorials.
The Microsoft Teams Toolkit enables you to create single sign-on (SSO) authentication for tab apps directly within Visual Studio Code. The toolkit guides you through the process and provides everything you need including provisioning your Microsoft identity platform registration in the Microsoft Azure portal.
platform Add Incoming Webhook https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/webhooks-and-connectors/how-to/add-incoming-webhook.md
To remove an Incoming Webhook from a Teams channel, follow these steps:
![Final Remove](~/assets/images/finalremove.png)
+## Code sample
+
+| Sample Name | Description | C# | Node.js |
+|:|:--|:|:--|
+|Incoming Webhook|This sample code demonstrates how to send card using incoming webhook. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/incoming-webhook/nodejs) |
+ ## See also * [Create an Outgoing Webhook](~/webhooks-and-connectors/how-to/add-outgoing-webhook.md)
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md
Title: What is new for developers in Teams
-description: Learn about the new developer features and enhancements to those features in Microsoft Teams.
+description: In this learning path, learn about the new developer features and enhancements to those features in Microsoft Teams.
ms.localizationpriority: high
Discover Microsoft Teams platform features that are generally available (GA) and
| 05/24/2022 | Introduced app manifest version 1.13 | App manifest > [Manifest schema for Microsoft Teams](resources/schem) | | 05/24/2022 | Bots and Message extensions in GCC and GCCH | ΓÇó Plan your app > [Overview](concepts/app-fundamentals-overview.md#government-community-cloud) </br> ΓÇó Build bots > [Overview](bots/what-are-bots.md) </br> ΓÇó Build message extensions > [Overview](messaging-extensions/what-are-messaging-extensions.md) | - <!-- ## Latest updates ![bullhorn icon](~/assets/images/bullhorn.png)
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Update** | **Find here** | | -- | | -|
+| 06/16/2022 | Updated media capabilities to support desktop and mobile| Integrate device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md)|
| 06/08/2022 | Optional card feedback for success message| Build bots > Bot conversations > [Messages in bot conversations](~/bots/how-to/conversations/conversation-messages.md#form-completion-feedback)| | 06/03/2022 | Updated Add authentication module for enabling SSO for tab app with new structure and procedures | Add authentication > Tabs > [Enable single sign-on in a tab app](tabs/how-to/authentication/tab-sso-overview.md) | | 05/24/2022 | Additional tips for rapid approval to publish your app linked to a SaaS offer | Publish to the Teams store > Overview > [Additional tips for rapid approval to publish your app linked to a SaaS offer](~/concepts/deploy-and-publish/appsource/publish.md#additional-tips-for-rapid-approval-to-publish-your-app-linked-to-a-saas-offer) |
Explore updates from the previous GA releases listed here.
|03/05/2021|Default install scope and group capability | Distribute your app > [Default install scope and group capability](concepts/deploy-and-publish/add-default-install-scope.md) | |03/05/2021|Reorder personal app tabs | Build tabs > [Reorder the chat tab in personal apps](tabs/how-to/create-personal-tab.md#reorder-static-personal-tabs) | |03/04/2021|Information masking in Adaptive cards | Build cards and task modules > Build cards > [Information masking in Adaptive cards](task-modules-and-cards/cards/cards-format.md#information-masking-in-adaptive-cards) |
-|02/19/2021|Added location capabilities. <br/> Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities, and QR or barcode scanner capability files | ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> ΓÇó App fundamentals > Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
-|02/18/2021|Added QR or barcode scanner capability. <br/> QR or barcode scanner capability information is added in the device capabilities overview, native device permissions, and integrate media capabilities files | ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> ΓÇó App fundamentals > Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) |
-|02/09/2021|Added device capabilities overview. <br/> Microphone capability information is added in the native device permissions and integrate media capabilities files |ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> App fundamentals > ΓÇó Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md)|
+|02/19/2021|Added location capabilities. <br/> Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities, and QR or barcode scanner capability files | ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> ΓÇó App fundamentals > Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
+|02/18/2021|Added QR or barcode scanner capability. <br/> QR or barcode scanner capability information is added in the device capabilities overview, native device permissions, and integrate media capabilities files | ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> ΓÇó App fundamentals > Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) |
+|02/09/2021|Added device capabilities overview. <br/> Microphone capability information is added in the native device permissions and integrate media capabilities files |ΓÇó App fundamentals > Device capabilities > [Overview](concepts/device-capabilities/device-capabilities-overview.md) </br> App fundamentals > ΓÇó Device capabilities > [Request device permissions](concepts/device-capabilities/native-device-permissions.md) </br> ΓÇó App fundamentals > Device capabilities > [Integrate media capabilities](concepts/device-capabilities/media-capabilities.md)|
<br>
Developer preview is a public program that provides early access to unreleased T
| **Date** | **Update** | **Find here** | | -- | | |
+| 06/16/2022 | Link unfurling for share to teams from web apps| Integrate with Teams > Share to Teams > [Share to Teams from web apps](concepts/build-and-test/share-to-teams-from-web-apps.md) |
| 06/06/2022| Update conversation and installation events in your Teams bot | Build bots > Bot conversations > Conversation events in your Teams bot > [Conversation events in your Teams bot](bots/how-to/conversations/subscribe-to-conversation-events.md) | |05/24/2022| Enhanced collaboration with Live Share SDK | Build apps for Teams meetings > Enhanced collaboration with Live Share > [Overview](apps-in-teams-meetings/teams-live-share-overview.md) | | 04/06/2022 | Share to Teams from personal app or tab | Integrate with Teams > Share to Teams > [Share to Teams from personal app or tab](concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md) |