Updates from: 04/07/2021 03:12:25
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
The post-meeting and pre-meeting configurations are equivalent.
## Code sample
-|Sample name | Description | C# |
-|-|--|--|
-| Meetings extensibility | Microsoft Teams meeting extensibility sample for passing tokens. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/csharp) |
-| Meeting content bubble bot | Microsoft Teams meeting extensibility sample for interacting with content bubble bot in a meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) |
+|Sample name | Description | .NET | Node.js |
+|-|--|--|--|
+| Meetings extensibility | Microsoft Teams meeting extensibility sample for passing tokens. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-token-app/csharp) | |
+| Meeting content bubble bot | Microsoft Teams meeting extensibility sample for interacting with content bubble bot in a meeting. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/meetings-content-bubble/nodejs)|
## See also
platform Designing Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
There are two header variants. When possible, use the variant with the avatar to
In-meeting dialogs can vary in size to account for different scenarios. Make sure to maintain padding and component sizes.
-* **Width**: The iframe width of the dialog is an absolute value within the range you specify.
-* **Height**: The iframe height of the dialog is an absolute value within the range you specify.
+* **Width**: You can specify the width of the dialog's iframe anywhere within the supported size range.
+* **Height**: You can specify the height of the dialog's iframe anywhere within the supported size range. You also can allow users to scroll vertically if your app content exceeds the maximum height.
-> [!NOTE]
-> The values that you define for the width and height are used in `externalResourceURL` of in-meeting dialog.
+To implement, specify the width and height using the [`externalResourceUrl`](~/apps-in-teams-meetings/create-apps-for-teams-meetings.md#notificationsignal-api) key.
:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-responsive.png" alt-text="Example shows the in-meeting dialog. Width: Min--280 pixels (248 pixels iframe). Max--460 pixels (428 pixels iframe). Height: 300 pixels (iframe)." border="false":::
In-meeting dialogs can vary in size to account for different scenarios. Make sur
You can go back to a meeting after it ends and view app content. In this example, the meeting organizer can look at poll results in the **Contoso** tab. (Note: From a design standpoint, there's no difference between a the pre- and post-meeting tab experience.) ## Best practices
platform Conversation Basics https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/conversation-basics.md
You can also add notifications to your message using the `Notification.Alert` pr
Notifications alert users about new tasks, mentions, and comments. These alerts are related to what users are working on or what they must look at by inserting a notice into their activity feed. For notifications to trigger from your bot message, set the `TeamsChannelData` objects `Notification.Alert` property to true. Whether or not a notification is raised depends on the individual user's Teams settings and you cannot override these settings. The notification type is either a banner or both a banner and an email.
+> [!NOTE]
+> The **Summary** field displays any text from the user as a notification message in the feed.
+ The following code shows an example of adding notifications to your message: # [C#](#tab/dotnet)
platform Update And Delete Bot Messages https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/update-and-delete-bot-messages.md
Your bot can dynamically update messages after sending them. You can use dynamic
The new message need not match the original in type. For example, if the original message contained an attachment, the new message can be a simple text message.
-# [C#/.NET](#tab/dotnet)
+# [C#](#tab/dotnet)
To update an existing message, pass a new `Activity` object with the existing activity ID to the `UpdateActivityAsync` method of the `TurnContext` class. See [TurnContextClass](/dotnet/api/microsoft.bot.builder.turncontext?view=botbuilder-dotnet-stable&preserve-view=true).
newActivity.Id = activityId;
await turnContext.UpdateActivityAsync(newActivity, cancellationToken); ```
-# [TypeScript/Node.js](#tab/typescript)
+# [TypeScript](#tab/typescript)
To update an existing message, pass a new `Activity` object with the existing activity ID to the `updateActivity` method of the `TurnContext` object. See [updateActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#updateactivity-partial-activity--&preserve-view=true).
await turnContext.updateActivity(newActivity);
# [Python](#tab/python)
-To update an existing message, pass a new `Activity` object with the existing activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest).
+To update an existing message, pass a new `Activity` object with the existing activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest&preserve-view=true).
```python
update_result = await context.update_activity(new_activity)
# [REST API](#tab/rest) >[!NOTE]
->You can develop Teams apps in any web-programming technology and directly call the [Bot Connector service REST APIs](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0&preserve-view=true). To do so, you need to implement [Authentication](/azure/bot-service/rest-api/bot-framework-rest-connector-authentication?view=azure-bot-service-4.0&preserve-view=true) security procedures with your API requests.
+>You can develop Teams apps in any web programming technology and directly call the [Bot Connector service REST APIs](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0&preserve-view=true). To do so, you need to implement [Authentication](/azure/bot-service/rest-api/bot-framework-rest-connector-authentication?view=azure-bot-service-4.0&preserve-view=true) security procedures with your API requests.
To update an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint. To complete this scenario, you must cache the activity ID returned by the original POST call.
To update an existing activity within a conversation, include the `conversationI
PUT /v3/conversations/{conversationId}/activities/{activityId} ```
-| | |
+|Request |Response |
|-|-|
-| **Request body** | An [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object&preserve-view=true) object |
-| **Returns** | A [ResourceResponse](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#resourceresponse-object&preserve-view=true) object |
+|An [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object&preserve-view=true) object |A [ResourceResponse](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#resourceresponse-object&preserve-view=true) object |
PUT /v3/conversations/{conversationId}/activities/{activityId}
To update the existing card on button selection, you can use `ReplyToId` of incoming activity.
-# [C#/.NET](#tab/dotnet)
+# [C#](#tab/dotnet)
To update existing card on a button click, pass a new `Activity` object with updated card and `ReplyToId` as activity ID to the `UpdateActivityAsync` method of the `TurnContext` class. See [TurnContextClass](/dotnet/api/microsoft.bot.builder.turncontext?view=botbuilder-dotnet-stable&preserve-view=true). ```csharp
activity.Id = turnContext.Activity.ReplyToId;
await turnContext.UpdateActivityAsync(activity, cancellationToken); ```
-# [TypeScript/Node.js](#tab/typescript)
+# [TypeScript](#tab/typescript)
+ To update existing card on a button click, pass a new `Activity` object with updated card and `replyToId` as activity ID to the `updateActivity` method of the `TurnContext` object. See [updateActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#updateactivity-partial-activity--&preserve-view=true). ```typescript
await context.updateActivity(message);
# [Python](#tab/python)
-To update existing card on a button click, pass a new `Activity` object with updated card and `reply_to_id` as activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest).
+To update existing card on a button click, pass a new `Activity` object with updated card and `reply_to_id` as activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest&preserve-view=true).
```python updated_activity = MessageFactory.attachment(CardFactory.hero_card(card))
await turn_context.update_activity(updated_activity)
```
+# [REST API](#tab/rest)
+
+To update an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint. To complete this scenario, you must cache the activity ID returned by the original post call.
+
+```http
+PUT /v3/conversations/{conversationId}/activities/{activityId}
+```
+
+|Request |Response |
+|-|-|
+| An [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object&preserve-view=true) object. | A [ResourceResponse](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#resourceresponse-object&preserve-view=true) object. |
+++ ## Delete messages In the Bot Framework, every message has its own unique activity identifier. Messages can be deleted using the Bot Framework's `DeleteActivity` method as shown here.
-# [C#/.NET](#tab/dotnet)
+# [C#](#tab/dotnet)
To delete that message, pass that activity's ID to the `DeleteActivityAsync` method of the `TurnContext` class. See [TurnContext.DeleteActivityAsync Method](/dotnet/api/microsoft.bot.builder.turncontext.deleteactivityasync?view=botbuilder-dotnet-stable&preserve-view=true).
foreach (var activityId in _list)
} ```
-# [TypeScript/Node.js](#tab/typescript)
+# [TypeScript](#tab/typescript)
To delete that message, pass that activity's ID to the `deleteActivity` method of the `TurnContext` object. See [deleteActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#deleteactivity-stringpartial-conversationreference--&preserve-view=true).
for each activity_id in _list:
# [REST API](#tab/rest)
- To delete an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint.
+To delete an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint.
```http DELETE /v3/conversations/{conversationId}/activities/{activityId} ```
-| | |
+|Request |Response |
|-|-|
-| **Request body** | n/a |
-| **Returns** | An HTTP Status code that indicates the outcome of the operation. Nothing is specified in the body of the response. |
+| N/A | An HTTP status code that indicates the outcome of the operation. Nothing is specified in the body of the response. |
DELETE /v3/conversations/{conversationId}/activities/{activityId}
The official conversation basics are as follows:
-| Sample Name | Description | .NET | JavaScript | Python |
+| Sample name | Description | .NET | Node.js | Python |
|:-|:|:--|:-|:--|
-|Teams Conversation Basics | Demonstrates basics of conversations in Teams, including message update and delete.|[.NET Core](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot)|[JavaScript](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/57.teams-conversation-bot) | [Python](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/57.teams-conversation-bot)|
+|Teams Conversation Basics | Demonstrates basics of conversations in Teams, including message update and delete.|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/57.teams-conversation-bot) | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/57.teams-conversation-bot)|
platform App Studio Controls https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/app-studio-controls.md
- Title: Using the control library
-description: How to use the control library provided by Microsoft Teams App Studio
-keywords: Teams App Studio Control Library
-
-# Using the control library in App Studio
-
-[Microsoft Teams App Studio](~/get-started/get-started-app-studio.md) provides you with a set of controls that you can use in your own apps. These controls are provided in the *Control Library* tab of App Studio.
-
-These controls were created by the Microsoft Teams designers to streamline their own workflows, standardize control behavior and support Team's default themes. You can use this library in your own apps to achieve a unified look and feel.
-
-Controls include:
-
-* Buttons
-* Dropdowns
-* Checkboxes
-* Radio Buttons
-* Toggles
-* Test Areas
-* Links
-* Tabs
-* Tables
-* Icons
-
-## Optionally use React controls
-
-The full Teams control library uses the [React JavaScript UI framework](https://reactjs.org/) however it is built so that it is not tied to a specific UI framework. There are four different npm packages:
-
-* **msteams-ui-styles-core** The core CSS styles of UI components. ItΓÇÖs independent of any UI framework.
-* **msteams-ui-icons-core** The core set of Teams icons.
-* **msteams-ui-components-react** The React binding library. It depends on msteams-ui-styles-core.
-* **msteams-ui-icons-react** The React binding library for the set of Teams icons. It depends on msteams-ui-icons-core.
-
-These libraries are all open source, and you can use msteams-ui-styles-core and msteams-ui-icons-core without React.
-
-## Adding the control library
-
-Install the control library and its peer dependency `typestyle`:
-
-```terminal
-npm install --save typestyle && npm install --save msteams-ui-components-react
-```
-
-*Optional:* Install the Teams icons.
-
-```terminal
-npm install --save msteams-ui-icons-react
-```
-
-Find and open `src/App.js` and replace its content with following code:
-
-```javascript
-import React, { Component } from ΓÇÿreactΓÇÖ;
-import { TeamsComponentContext, ThemeStyle, PrimaryButton } from ΓÇÿmsteams-ui-components-reactΓÇÖ
-
-class App extends Component {
- render() {
- // Sets up the top-level context for the library. It accepts global
- // configurations such as font size and theme. fontSize is your pageΓÇÖs
- // default font size. We made it a parameter so that you could use this
- // library with CSS frameworks such as Bootstrap. Some CSS frameworks
- // set the default font size for the page; retrieve it and use it
- // instead of {16} in the block.
- // This library uses the power of CSS to do most of the work for you.
- // Instead of passing themes as a parameter to every UI component,
- // we set it on a parent HTML element. All HTML elements nested within
- // that parent will inherit these properties.
-
- return (
- <TeamsComponentContext
- fontSize={16}
- theme={ThemeStyle.Light}
- />
- );
- }
-}
-export default App;
-```
-
-Run the app
-
-```terminal
-npm run start
-```
-
-When you navigate to http://localhost:3000, you should see the following screen:
-
-<img width="530px" src="~/assets/images/get-started/control-library-button.png" title="Control Library Button"/>
-
-## Dynamically handling theme changes
-
-Your app needs to handle themes when:
-
-* The tab is initially loaded
-* A user changes the theme after the tab is already loaded
-
-The theme is included in a tabΓÇÖs [Context](/javascript/api/@microsoft/teams-js/context&view=msteams-client-js-latest), which can be retrieved before the tab is loaded via URL placeholder values, or at any time by using the [Microsoft Teams JavaScript client SDK](/javascript/api/%40microsoft/teams-js/context).
-
-How the current theme is retrieved and how to respond to theme changes is discussed here: [Get context for your Microsoft Teams tab](~/concepts/tabs/tabs-context.md).
-
-This sample code shows how this is done.
-
-```js
-componentWillMount() {
- // If you are deploying your site as a MS Teams static or configurable tab,
- // you should add ΓÇ£?theme={theme}ΓÇ¥ to your tabs URL in the manifest.
- // That way you will get the current theme before itΓÇÖs loaded; getContext()
- // is called only after the tab is loaded, which will cause the tab to flash
- // if the current theme is different than the default.
- this.updateTheme(this.getQueryVariable('theme'));
- this.setState({
- fontSize: this.pageFontSize(),
- });
-
- // If you are not using the MS Teams Javascript SDK, you can remove this entire
- // if block, but if you want theme changes in the MS Teams client to propagate
- // to the tab, leave it here.
- microsoftTeams.initialize();
- microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);
-}
-```
-
-## Connect your own component to the TeamsComponentContext
-
-If you want to use your own CSS code you can still respond to theme changes and use colors defined by teams. TeamsComponentContext allows you to do this.
-
-Once again, edit your `src/App.js` file and replace its content with following code:
-
-```javascript
-import React, { Component } from ΓÇÿreactΓÇÖ;
-import { TeamsComponentContext, ThemeStyle, ConnectedComponent } from ΓÇÿmsteams-ui-components-reactΓÇÖ
-
-class App extends Component {
- render() {
- return (
- <TeamsComponentContext
- fontSize={16}
- theme={ThemeStyle.HighContrast}>
- <MyComponent />
- </TeamsComponentContext>
- );
- }
-}
-
-class MyComponent extends Component {
- render() {
- return (
- <ConnectedComponent render={(props) => {
- const context = props.context;
-
- switch (context.style) {
- case ThemeStyle.Dark:
- return <div style={{ color: context.colors.dark.brand00 }}>Dark theme!</div>;
- case ThemeStyle.HighContrast:
- return <div style={{ color: context.colors.highContrast.black }}>High Contrast theme!</div>;
- case ThemeStyle.Light:
- return <div style={{ color: context.colors.light.brand00 }}>Light theme!</div>;
- }
- }} />
- );
- }
-}
-
-export default App;
-```
-
-In this code, a new component is defined called MyComponent. Then a special component from the control library called ConnectedComponent is added. ConnectedComponent has a property called `render` which takes a function as a parameter. At render time this function will be called with the appropriate context for your tab. The context includes the theme that the page is being rendered in as well as the global color object that you can use to apply Teams colors to your tab. As you can see in the `switch` statement, the appropriate `<div>` is chosen based on the theme.
-
-To change themes, we need to pass the root-level TeamsComponentContext a different theme. When a theme changes, all the child elements wrapped in ConnectedComponent will be re-rendered. See previous section ΓÇ£Dynamically Handle Theme Changes.ΓÇ¥
-
-There are other ways to connect your component to TeamsComponentContext. If youΓÇÖre familiar with [Redux](https://redux.js.org/basics/usage-with-react), you may prefer the following pattern:
-
-```js
-import React, { Component } from ΓÇÿreactΓÇÖ;
-import { TeamsComponentContext, ThemeStyle, connectTeamsComponent } from ΓÇÿmsteams-ui-components-reactΓÇÖ
-
-class App extends Component {
- render() {
- return (
- <TeamsComponentContext
- fontSize={16}
- theme={ThemeStyle.HighContrast}>
- <MyComponent />
- </TeamsComponentContext>
- );
- }
-}
-
-class MyComponentInner extends Component {
- render() {
- const context = this.props.context;
- switch (context.style) {
- case ThemeStyle.Dark:
- return <div style={{ color: context.colors.dark.brand00 }}>Dark theme!</div>;
- case ThemeStyle.HighContrast:
- return <div style={{ color: context.colors.highContrast.black }}>High Contrast theme!</div>;
- case ThemeStyle.Light:
- return <div style={{ color: context.colors.light.brand00 }}>Light theme!</div>;
- }
- }
-}
-
-const MyComponent = connectTeamsComponent(MyComponentInner);
-
-export default App;
-```
-
-In this method, instead of using ConnectedComponent, you use the connectTeamsComponent function. The connectTeamsComponent function takes your current component and returns a new component with the context object injected.
-
-## Next steps
-
-Head to Teams App Studio and check out all the controls we offer and sample code of how to use them. DonΓÇÖt forget to explore them in different themes.
platform Test Data https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/build-and-test/test-data.md
Title: Add test data to your Office 365 test tenant
+ Title: Add test data to your Microsoft 365 test tenant
description: Set up your Office 365 developer program subscription for successful testing of Microsoft Teams Apps keywords: testing apps developer program teams Last updated 11/01/2019
-# Add test data to your Office 365 test tenant
+# Add test data to your Microsoft 365 test tenant
-Set up your O365 developer program subscription (or other test tenant) to make it easy for you to test the apps that you've built. It will help you:
--- Create new teams and channels in your organization--- Add the users that are created via the User content pack to those teams.
+With a Microsoft 365 developer subscription, you can use your Microsoft Teams app with test teams, channels, and users.
## Before you start If you don't already have a test tenant, you will need to join the Office 365 developer program and sign up for a developer subscription. You'll also need to install the necessary PowerShell modules. For whatever tenant you use you'll need to have global administrator permissions to run the scripts.
-1. [Join the Office 365 Developer Program](/office/developer-program/office-365-developer-program)
+1. [Join the Microsoft 365 Developer Program](/office/developer-program/office-365-developer-program)
2. [Set up a Microsoft 365 Developer Subscription](/office/developer-program/office-365-developer-program-get-started)
-3. [Use sample data packs with your Office 365 developer subscription to install the Users content pack](/office/developer-program/install-sample-packs)
+3. [Use sample data packs with your Microsoft 365 developer subscription to install the Users content pack](/office/developer-program/install-sample-packs)
4. [Install the Teams PowerShell module](https://www.powershellgallery.com/packages/MicrosoftTeams/1.0.2)
-5. [Install the Azure AD PowerShell module](/powershell/azure/active-directory/install-adv2?view=azureadps-2.0#installing-the-azure-ad-module)
-
-### Optional step: allow upload of custom apps
-
-By default, only global admins or teams service admins can upload custom apps into the tenant app catalog. You can also enable all users to upload custom apps for their own use or to teams for testing.
-
-To enable this setting, you'll need to update the global App Setup Policy in your Teams Admin Portal.
-
-<img width="430px" src="~/assets/images/microsoft-teams-admin-center-screenshot.png" title="Screenshot of App Setup Policy" />
+5. [Install the Azure AD PowerShell module](/powershell/azure/active-directory/install-adv2?view=azureadps-2.0#installing-the-azure-ad-module&preserve-view=true)
-For more information see:
+## (Optional) Enable custom app sideloading
+By default, only global admins or Teams service admins can upload custom apps into the tenant app catalog. You can also allow users to upload custom apps to Teams. For more information, [manage app setup policies in Teams](/microsoftteams/teams-app-setup-policies).
## Create teams and channels
platform Location Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/location-capability.md
This document guides you on how to integrate the location capabilities of native device with your Teams app.
-You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the location APIs, such as [getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_) and [showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation_Location___error__SdkError__status__boolean_____void_) to integrate the capabilities within your app.
+You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the location APIs, such as [getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true) and [showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation_Location___error__SdkError__status__boolean_____void_&preserve-view=true) to integrate the capabilities within your app.
## Advantages of integrating location capabilities
You must use the following set of APIs to enable your device's location capabili
| API | Description | | | |
-|[getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_) | Gives userΓÇÖs current device location or opens native location picker and returns the location chosen by the user. |
-|[showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation) | Shows location on map |
+|[getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_&preserve-view=true) | Gives userΓÇÖs current device location or opens native location picker and returns the location chosen by the user. |
+|[showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation&preserve-view=true) | Shows location on map |
> [!NOTE]
-> The `getLocation()` API comes along with following [input configurations](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/locationprops?view=msteams-client-js-latest), `allowChooseLocation` and `showMap`. <br/> If the value of `allowChooseLocation` is *true*, then the users can choose any location of their choice.<br/> If the value is *false*, then the users cannot change their current location.<br/> If the value of `showMap` is *false*, the current location is fetched without displaying the map. `showMap` is ignored if `allowChooseLocation` is set to *true*.
+> The `getLocation()` API comes along with following [input configurations](https://docs.microsoft.com/javascript/api/@microsoft/teams-js/locationprops?view=msteams-client-js-latest&preserve-view=true), `allowChooseLocation` and `showMap`. <br/> If the value of `allowChooseLocation` is *true*, then the users can choose any location of their choice.<br/> If the value is *false*, then the users cannot change their current location.<br/> If the value of `showMap` is *false*, the current location is fetched without displaying the map. `showMap` is ignored if `allowChooseLocation` is set to *true*.
+ **Web app experience for location capabilities** ![web app experience for location capabilities](../../assets/images/tabs/location-capability.png)
microsoftTeams.location.showLocation(location, (err: microsoftTeams.SdkError, re
> [Integrate media capabilities in Teams](mobile-camera-image-permissions.md) > [!div class="nextstepaction"]
-> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
+> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
platform Resource Specific Consent https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/rsc/resource-specific-consent.md
Once the app has been installed to a team, you can use [Graph Explorer](https://
![Graph explorer response to GET call.](../../assets/images/graph-permissions.png) ## Code sample
-| **Sample name** | **Description** | **C#** |
-|--|--|-|
-| Resource Specific Consent (RSC) | Use RSC to call Graph APIs. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-rsc/csharp)|
+| **Sample name** | **Description** | **.NET** |**Node.js** |
+|--|--|-|-|
+| Resource Specific Consent (RSC) | Use RSC to call Graph APIs. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-rsc/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/graph-rsc/nodeJs)|
++ ## Test resource-specific consent
platform Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/overview.md
Some apps are simple (send notifications), while others are complex (manage pati
:::row-end::: :::row:::+ :::column span="":::
- :::column-end:::
### Microsoft Graph for Teams
Some apps are simple (send notifications), while others are complex (manage pati
:::image type="content" source="assets/images/overview-graph.png" alt-text="Conceptual representation of the Microsoft Graph API for Teams." border="false"::: :::column-end:::
- :::column span="":::
- :::column span="2":::
+ :::column span="":::
:::column-end::: :::row-end:::
-## Build solutions for Microsoft Teams apps
-
-Microsoft offers an extensibility look book, a scenario library for Teams apps organized by industry. This book helps you build apps on the Teams platform and understand different possible scenarios using various Teams platform capabilities. The look book scenarios start with a business problem, the personas involved along with their challenges, and end with a Teams app solution addressing the business needs.
-
-Each scenario in this library is accompanied by a set of high-fidelity design concept mocks, which can serve as an inspiration for designing your apps and enhancing user experience. In addition, the look book highlights the design and architecture best practices followed in building each app. For more information, see the extensibility look book. For more information, see [extensibility look book](https://adoption.microsoft.com/extensibility-look-book/scenarios/).
+ :::column span="2":::
## Start building
-Quickly familiarize yourself with building for Teams by creating a simple app and adding some commonly used capabilities.
+Quickly familiarize yourself with building for Teams by setting up your environment and creating a simple app.
> [!div class="nextstepaction"]
-> [Build your first app now](build-your-first-app/build-first-app-overview.md)
+> [Build your first app](build-your-first-app/build-first-app-overview.md)
:::column-end::: :::column span="":::
You don't need to be an expert programmer to build a great Teams app. Try one of
:::column-end::: :::row-end:::
-## Resources
+ :::column span="2":::
+
+## Get ideas for your app
+
+Looking for app development inspiration? Browse our list of real-world scenarios and industry solutions with high fidelity concept mocks to understand the various ways Teams apps can help your users.
+
+> [!div class="nextstepaction"]
+> [See app scenarios](https://adoption.microsoft.com/extensibility-look-book/scenarios/)
+
+ :::column-end:::
+ :::column span="":::
+
+ :::column-end:::
+
+## See also
* [Add a Share-to-Teams button to your website](concepts/build-and-test/share-to-teams.md) * [Design your Teams app](concepts/design/design-teams-app-overview.md)
platform Bots Text Formats https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/bot-v3/bots-text-formats.md
Support for text formatting varies by type of message and by platform.
| preformatted text | `text` | `` `text` `` | `<pre>text</pre>` | | blockquote | <blockquote>text</blockquote> | `>text` | `<blockquote>text</blockquote>` | | hyperlink | [Bing](https://www.bing.com/) | `[Bing](https://www.bing.com/)` | `<a href="https://www.bing.com/">Bing</a>` |
-| image link | <img src="http://aka.ms/Fo983c" alt="Duck on a rock"></img> | `![Duck on a rock](http://aka.ms/Fo983c)` | `<img src="http://aka.ms/Fo983c" alt="Duck on a rock"></img>` |
+| image link | <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img> | `![Duck on a rock](http://aka.ms/Fo983c)` | `<img src="http://aka.ms/Fo983c" alt="Duck on a rock"></img>` |
platform Team Chat Member Api Changes https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/team-chat-member-api-changes.md
HereΓÇÖs a sample JSON representation of whatΓÇÖs returned by these APIs today.
}] ```
-## API Changes
+## API changes
+ Here are the upcoming API changes:
-* We've created a new API [`TeamsInfo.GetPagedMembersAsync`](../bots/how-to/get-teams-context.md#fetching-the-roster-or-user-profile) for retrieving profile information for members of a chat/team. This API is now available with the Bot Framework 4.10 SDK. For development in all other versions use the [`GetConversationPagedMembers`](/dotnet/api/microsoft.bot.connector.conversationsextensions.getconversationpagedmembersasync?view=botbuilder-dotnet-stable&preserve-view=true) method.
+* We've created a new API [`TeamsInfo.GetPagedMembersAsync`](~/bots/how-to/get-teams-context.md?tabs=dotnet#fetching-the-roster-or-user-profile) for retrieving profile information for members of a chat/team. This API is now available with the Bot Framework 4.10 SDK. For development in all other versions use the [`GetConversationPagedMembers`](/dotnet/api/microsoft.bot.connector.conversationsextensions.getconversationpagedmembersasync?view=botbuilder-dotnet-stable&preserve-view=true) method.
> [!NOTE]
- > In either v3 or v4, the best action is to upgrade to the latest point release.
-* We've created a new API [`TeamsInfo.GetMemberAsync`](../bots/how-to/get-teams-context.md#get-single-member-details) for retrieving the profile information for a single user. It takes the ID of the team/chat and a [UPN](https://docs.microsoft.com/windows/win32/ad/naming-properties#userprincipalname) (`userPrincipalName`, *see above*), Azure Active Directory Object ID (`objectId`, *see above*), or the Teams user ID (`id`, *see above*) as parameters and returns the profile information for that user.
+ > In either v3 or v4, the best action is to upgrade to the latest point release.
+* We've created a new API [`TeamsInfo.GetMemberAsync`](~/bots/how-to/get-teams-context.md?tabs=dotnet#get-single-member-details) for retrieving the profile information for a single user. It takes the ID of the team/chat and a [UPN](https://docs.microsoft.com/windows/win32/ad/naming-properties#userprincipalname) (`userPrincipalName`, *see above*), Azure Active Directory Object ID (`objectId`, *see above*), or the Teams user ID (`id`, *see above*) as parameters and returns the profile information for that user.
> [!NOTE]
- > We're changing `objectId` to `aadObjectId` to match what it's called in the `Activity` object of a Bot Framework message. The new API is available with version 4.10 of the Bot Framework SDK. It will soon be available in the Teams SDK extension Bot Framework 3.x as well; meanwhile you can use the [REST](../bots/how-to/get-teams-context.md?get-single-member-details) endpoint.
-* `TeamsInfo.GetMembersAsync` (C#) and `TeamsInfo.getMembers` (TypeScript/Node.js) is formally deprecated and will stop working in late 2021. Please update your bots to use the paged APIs. (This also applies to the [underlying REST API these APIs use](../bots/how-to/get-teams-context.md).)
+ > We're changing `objectId` to `aadObjectId` to match what it's called in the `Activity` object of a Bot Framework message. The new API is available with version 4.10 of the Bot Framework SDK. It will soon be available in the Teams SDK extension Bot Framework 3.x as well; meanwhile you can use the [REST](~/bots/how-to/get-teams-context.md?tabs=json#get-single-member-details) endpoint.
+* `TeamsInfo.GetMembersAsync` (C#) and `TeamsInfo.getMembers` (TypeScript/Node.js) is formally deprecated and will stop working in late 2021. Please update your bots to use the paged APIs. (This also applies to the [underlying REST API these APIs use](~/bots/how-to/get-teams-context.md?tabs=json).)
* By late 2021, bots will not be able to proactively retrieve the `userPrincipalName` or `email` properties for members of a chat/team and will need to use Microsoft Graph to retrieve them. Specifically, `userPrincipalName` and `email` properties won't be returned from the new `GetConversationPagedMembers` API starting in late 2021. Bots will have to use Microsoft Graph with an access token to retrieve this information. This is obviously a major change: We must make it easier for bots to get an access token, and we must streamline and simplify the end-user consent process.
-## Feedback and More Information
-We'll use this page for providing up to date information on these changes. If you have questions, use the "Send feedback > on this page" in the **Feedback** section below.
+## Feedback and more information
+
+We'll use this page for providing up to date information on these changes. If you have questions, use the "Send feedback > on this page" in the **Feedback** section below.
platform App Templates https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/samples/app-templates.md
App templates are examples of complete apps for Microsoft Teams that are open-source and available on GitHub. Each app template contains detailed instructions for deploying and installing that app for your organization. It also provides a sample app that you can install and begin using immediately. The complete source code is available too, which allows you to explore it in detail or fork the code and alter it to meet your specific requirements. All app templates are provided under the [MIT License](https://github.com/OfficeDev/microsoft-teams-apps-eprescription/blob/master/LICENSE) terms.
->[!NOTE]
->You, not Microsoft must license and support apps created from app templates for your users and organizations.
+> [!NOTE]
+> You must license and support apps created from app templates for your users and organizations. Microsoft is not responsible for licenses and support.
**&#9734; Indicates newly released app templates.**
All app templates are provided under the [MIT License](https://github.com/Office
* **Customizable and extensible:** While all app templates can be deployed with minimal configuration, we provide the entire code base and deployment scripts so that you can easily customize or extend them to fit your unique needs. * **Detailed documentation:** All app templates are accompanied by end-to-end documentation on solution architecture, deployment, and configuration steps.
-## Adoption Bot &#9734;
+## Adoption Bot
Adoption Bot is a user care chat bot built with Power Virtual Agent for Teams (PVA). It can be considered as the PVA version of FAQPlus. Adoption Bot answers 100+ common questions about Microsoft 365 and Teams. You can edit the existing topics, add your own topics, and ingest existing FAQs. If users need additional help, Adoption Bot can connect them to experts or even be extended to open service tickets with premium flow connectors.This bot can be installed on it's own or built into a custom app like the [Adoption Hub](https://github.com/akporzondek/adoption_hub). [Get it on GitHub](https://github.com/OfficeDev/microsoft-teams-apps-adopt-bot)
-## Appointment Manager &#9734;
+## Adoption Tool &#9734;
+
+Adoption Tool consists of the following two app templates:
+
+### Champion Management Platform
+
+The Champion Management Platform (CMP) app template helps you manage, scale, and inspire your teamwork champions to achieve more. This app template is built on the SharePoint Framework and loaded into a tab within a team. Groups can leverage this tool to help manage program membership, provide a leaderboard and event types for logging, and tools to overlay digital badges to program participants.
+
+[Get it on GitHub](https://github.com/OfficeDev/microsoft-teams-apps-champion-management)
+
+### Get Started
+
+The Get Started app template allows you to bring the power of Microsoft 365 learning pathways inside of Microsoft Teams. This app template allows you to grant easy access to specific training pages or other intranet assets and load the content directly within Teams. You can also change the app name or logo to match your company branding.
+
+[Get it on GitHub](https://github.com/msft-teams/tools/tree/master/M365%20Learning%20Pathways)
+
+## Appointment Manager
Appointment Manager is a Teams app template to help businesses create, manage, and conduct virtual appointments with consumers through Teams. New appointment requests from consumers are visible in Teams channels, where they can quickly be assigned and reassigned to staff in a team. Appointment requests can be viewed at team or personal levels through custom tabs. Every appointment is associated with a Teams online meeting, hence the staff and consumers can easily join the meeting at the scheduled time.
Checklist is a custom Microsoft Teams [messaging extension](../messaging-extensi
:::column-end::: :::row-end:::
-## Classroom Drop-in &#9734;
+## Classroom Drop-in
Classroom Drop-in is a Microsoft [Power Platform](https://powerapps.microsoft.com/blog/now-in-preview-customize-teams-with-built-in-power-platform-capabilities/)-based app that enables system leaders to find class teams (virtual classrooms) and add themselves or others to these class teams for a specified drop-in period, as needed. The app built using Microsoft [Power Apps](/powerapps/powerapps-overview) and [Power Automate](/power-automate/getting-started), deeply integrates with Microsoft Teams to ensure educational institutes can optimize their operations in a hybrid learning environment by providing access to relevant stakeholders for class teams per business requirements.
The Contact Group Lookup app provides a convenient and useful approach to creati
:::column-end::: :::row-end:::
-## Co-worker Appreciation &#9734;
+## Co-worker Appreciation
Using the co-worker appreciation template in Microsoft Teams, users can recognize their colleagues' achievements within the TeamsΓÇÖ context. When co-workers select to reward a colleague, recipients and other team members are tagged in a channel conversation and they receive a notification about the channel's award details. The awards are recorded in the Teams app, which is secure, portable, and easily shareable. This can be considered as the PowerApps based version of the Open Badges app template, with a leaderboard.
Conversational Q&A bots are an easy way to provide answers to frequently asked q
![FAQ Plus gif](../assets/images/FAQPlusEndUser.gif)
-## Get Support App &#9734;
+## Get Support App
The Get Support app can be used by organizations that are using Microsoft Teams, to enable any set of users to request assistance from supervisors. This app includes various features, such as: - Requesting assistance on different categories from a Power App
Incident Reporter is a [Microsoft Teams bot](../bots/what-are-bots.md) that opt
:::column-end::: :::row-end:::
-## Inspection &#9734;
+## Inspection
Inspection is a Microsoft Teams app that enables front line workers to inspect anything from locations to assets and equipments. For example, a retail store, manufacturing plant, or vehicles and machines. There are two apps in this solution, each intended for different types of users.
Survey is a custom Microsoft Teams [messaging extension](../messaging-extensions
:::column-end::: :::row-end:::
-## Time Tally &#9734;
+## Time Tally
A project can include multiple tasks, and various projects can be assigned to employees. Managers are required to understand the project progress through the time spent by the employees on these tasks. This can be a cumbersome activity, as the employees need to fill in the timesheets. Time Tally app enables employees to fill their timesheets quickly, using the mobile device, and managers do not have to follow up with employees on the timesheet entry. Managers get to view the project utilization based on resources, and they can approve or reject the entries. Reminder notifications are sent to ensure timesheet compliance. Also, historical data and utilizations are available for analytics.
platform Auth Aad Sso https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-aad-sso.md
This section describes the tasks involved in creating a Teams tab that uses SSO.
9. Enter the details in the boxes for configuring the admin and user consent prompts with values that are appropriate for the `access_as_user` scope: * **Admin consent Title: ** Teams can access the userΓÇÖs profile. * **Admin consent description**: Teams can call the appΓÇÖs web APIs as the current user.
- * **User consent title**: Teams can access the user profile and make requests on the user's behalf.
- * **User consent description:** Teams can call this appΓÇÖs APIs with the same rights as the user.
+ * **User consent title**: Teams can access your profile and make requests on your behalf.
+ * **User consent description:** Teams can call this appΓÇÖs APIs with the same rights as you have.
10. Ensure that **State** is set to **Enabled**. 11. Select **Add scope** to save the details. The domain part of the **Scope name** displayed below the text field must automatically match the **Application ID** URI set in the previous step, with `/access_as_user` appended to the end `api://subdomain.example.com/00000000-0000-0000-0000-000000000000/access_as_user`. 12. In the **Authorized client applications** section, identify the applications that you want to authorize for your appΓÇÖs web application. Select **Add a client application**. Enter each of the following client IDs and select the authorized scope you created in the previous step:
platform Developer Tools https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/developer-tools.md
While the web version of Teams and the desktop version of teams are almost exact
1. Make sure you have enabled [developer preview](~/resources/dev-preview/developer-preview-intro.md) 1. Open up a tab so you have something to inspect with the DevTools.
-1. Open the DevTools
- * On Windows, you open DevTools via the Microsoft Teams icon in the desktop tray:
+1. Open the DevTools one of the following ways:
+ * **Windows**: Select the Teams icon in the desktop tray.
+ * **macOS**: Select the Teams icon in the Dock.
- ![Right-click to open DevTools](~/assets/images/dev-preview/devtools-right-click.png)
-
- * On MacOS, click on the Microsoft Teams icon in the Dock.
-
-HereΓÇÖs what a sample tab looks like with the DevTools open and an element selected:
+The following screenshot shows DevTools inspecting an element in a tab configuration dialog:
![Tab and DevTools](~/assets/images/dev-preview/tab-and-devtools.png) ## Accessing DevTools from an Android client
-You can also enable the DevTools from the Teams Android client. To do so:
+You can also enable the DevTools from the Teams Android client.
1. Make sure you have enabled [developer preview](~/resources/dev-preview/developer-preview-intro.md) 1. Connect your device to your desktop computer, and setup your Android device for [remote debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/)
platform Get Started Dotnet App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-dotnet-app-studio.md
Visual Studio has built-in support for app deployment to different providers, in
## Update the credentials for your hosted app
-The sample app requires the environment variables to be set to the values that you saved in the [text file](~/includes/get-started/get-started-use-app-studio.md#bots).
+The sample app requires the environment variables be set to the values that you saved in the text file.
-Open the appsettings.json file. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file. Update the **MicrosoftAppPassword** with the bot password you saved.
+Open the `appsettings.json` file. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file. Update the **MicrosoftAppPassword** with the bot password you saved.
<img width="560px" alt="Setting the keys" src="~/assets/images/get-started/get-started-net-azure-add-keys.png"/>