Updates from: 09/09/2021 03:11:39
Service Microsoft Docs article Related commit history on GitHub Change details
platform Enable App Customization https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/design/enable-app-customization.md
Title: Enable your app to be customized
+ Title: Customize your Teams app
description: Understand how Teams admins can customize your app for their org. ms.localizationpriority: medium
-# Enable your Microsoft Teams app to be customized
+
+# Customize your Teams app
+
+## Enable your Microsoft Teams app to be customized
You can allow customers to customize some aspects of your Microsoft Teams app in the Teams admin center. This feature is supported only for apps published to the Teams store. Sideloaded apps and apps published for an org can't be customized.
Some possible examples of this feature include:
* Changing the app's accent color to match an org's brand. * Updating the app name from *Contoso* to *Contoso Agent*, which is the name users in the org will see. (Note: Users adding a connector to a chat or a channel will still see the original app name, *Contoso*.)
-You can enable this feature in the [Developer Portal for Teams](https://dev.teams.microsoft.com/home). This configures `configurableProperties`, which isn't available in versions prior to 1.10 of the Teams app manifest.
+You can enable this feature in the [Developer Portal for Teams](https://dev.teams.microsoft.com/home). This feature configures `configurableProperties`, which isn't available in versions before 1.10 of the Teams app manifest.
-## Test your app
+### Test your app
You can't test this feature during development. App customization isn't supported when sideloading or publishing to an org's app catalog.
-## User considerations
+### User considerations
Provide guidelines for customers (specifically Teams admins) who want to customize your app. For more information, see [customize apps in Teams](/MicrosoftTeams/customize-apps).
+## Hide Teams app until admin approves
+
+To enhance Teams app experience, you can hide an app from users by default until admin allows to unhide the app. For example, Contoso Electronics has created a help desk app for Teams. To enable appropriate functioning of the app, Contoso ElectronicsΓÇÖ wants the customers to first set up specific properties of the app. The app is hidden by default and is available to users only after the admin allows it.
+
+To hide the app, in the app manifest file, set the `defaultBlockUntilAdminAction` property to `true`. When the property is set to `true`, in Teams admin center > **Manage apps**, **Blocked by publisher** appears in app's **Status**:
+
+![Manage apps blocked by publisher](../../assets/images/apps-in-meetings/manageappsblockedapps.png)
+
+The admin gets a request to take action before a user can access the app. Under **Manage apps**, the admins can select **Allow** to allow the app with **Blocked by publisher** status:
+
+![Manage apps](../../assets/images/apps-in-meetings/manageapp.png)
+
+If by default, you don't want the app to be hidden, you can update the `defaultBlockUntilAdminAction` property to `false`. When the new version of the app is approved, by default the app will be allowed as long as the admin hasn't taken explicit action to block it.
+ ## See also
-* [Customize apps in the Teams admin center](/MicrosoftTeams/customize-apps)
+[Customize apps in the Teams admin center](/MicrosoftTeams/customize-apps)
platform First App Bot https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-bot.md
Title: Get started - Build your first conversational bot
+ Title: Get started - Build your first bot
-description: Create a conversational bot for Microsoft Teams using the Teams Toolkit.
+description: Create a bot for Microsoft Teams using the Teams Toolkit.
Last updated 05/27/2021 ms.localizationpriority: none
-# Build your first conversational bot for Microsoft Teams
+# Build your first bot for Microsoft Teams
In this tutorial, you will learn how to build, run, and deploy a Teams bot app. A bot acts as an intermediary between a Teams user and a web service. Users can chat with a bot to quickly get information, initiate workflows, or anything else your web service can do.
A messaging extension uses the [Bot Framework](https://docs.botframework.com) to
:::image type="content" source="../assets/images/teams-toolkit-v2/bot-file-layout.png" alt-text="File layout of a bot project.":::
-The bot code is stored in the `bot` directory. The `bot/teamsBot.js` is the main entry point for the bot, and the dialogs are stored in the `dialogs` directory.
+The bot code is stored in the `bot` directory. The `bot/teamsBot.js` is the main entry point for the bot.
> [!Tip] > Familiarize yourself with bots outside of Teams before you integrate your first bot within Teams. You can find more information about bots by reviewing the [Azure Bot Service](/azure/bot-service/bot-builder-basics?view=azure-bot-service-4.0&preserve-view=true) tutorials.
Teams Toolkit allows you to host your app locally. To do this:
- An Azure Active Directory Application is registered within the M365 tenant. - An app manifest is submitted to the Developer Center for Teams.-- An API is run locally using Azure Functions Core Tools to support your app. - [ngrok](https://ngrok.io) is installed and used to provide a tunnel between Teams and your bot code. To build and run your app locally:
To build and run your app locally:
1. You may be prompted to sign in. If so, sign in with your M365 account. 1. When prompted to install the app onto Teams, select **Add**.
- After the app is loaded, you will be taken directly to a chat session with the bot. You can type `intro` to show an introduction card, and `show` to show your details from Microsoft Graph. (This will require an additional permissions approval).
+ After the app is loaded, you will be taken directly to a chat session with the bot. You can type `welcome` to show an introduction card, and `learn` to go adaptive card and bot command documentation.
- Debugging works as you normally would expect - try it yourself! Open the `bot/dialogs/rootDialog.js` file and locate the `triggerCommand(...)` method. Set a breakpoint on the default case. Then type some text.
+ Debugging works as you normally would expect - try it yourself! Open the `bot/teamsBot.js` file and locate the `onMessage()` method. Set a breakpoint on any case. Then type some text.
<!-- markdownlint-disable MD033 --> <details>
When you press the **F5** key, the Teams Toolkit:
1. Registers your application with Azure Active Directory. 1. Registers your application for "side loading" in Microsoft Teams.
-1. Starts your application backend running locally using [Azure Function Core Tools](/azure/azure-functions/functions-run-local?#start).
1. Starts an ngrok tunnel so Teams can communicate with your app. 1. Starts Microsoft Teams with a command to instruct Teams to sideload the application.
To successfully run your app in Teams, you must have a Microsoft 365 development
Before deployment, the application has been running locally:
-1. The backend runs using _Azure Functions Core Tools_.
1. The application HTTP endpoint, where Microsoft Teams loads the application, runs locally. Deployment involves provisioning resources on an active Azure subscription and deploying (uploading) the backend and frontend code for the application to Azure. The backend uses a variety of Azure services, including Azure App Service and Azure Bot Service.
Before deployment, the application has been running locally:
* [Create an app using Node.js](get-started-nodejs-app-studio.md) * [Create an app using Yeoman generator](get-started-yeoman.md) * [Create a messaging extension](first-message-extension.md)
-* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform First App React https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-react.md
After the Teams Toolkit configures your project, you have the components to buil
:::image type="content" source="../assets/images/teams-toolkit-v2/react-app-project.png" alt-text="Screenshot showing app project files for a personal app in Visual Studio Code.":::
-The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory. Among other items in this directory:
+The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory.
-- The app icons are stored as PNG files in `color.png` and `outline.png`.-- The app manifest for publishing to the Developer Portal for Teams is stored in `manifest.source.json`.-- The settings you chose when creating the project are stored in `settings.json`.
+- The settings you chose when creating the project are stored in `.fx/settings.json`.
+- The state of your project is stored in `.fx/env.*.json`.
+
+And the Teams app information is stored in the `appPackage` directory.
+
+- The app icons are stored as PNG files in `appPackage/color.png` and `appPackage/outline.png`.
+- The app manifest for publishing to Developer Portal for Teams is stored in `appPackage/manifest.source.json`.
Since you selected the tab capability during setup, the Teams Toolkit scaffolds all the necessary code for a basic tab in the `tabs` directory. Within this directory there are several important files:
When you add cloud functionality, additional directories are added to the projec
Teams Toolkit allows you to run your app locally. This consists of several parts that are necessary to provide the correct infrastructure that Teams expects: - An application is registered with Azure Active Directory. This application has permissions associated with the location that the app is loaded from and any backend resources it accesses.-- A web API is hosted to assist with authentication tasks, acting as a proxy between the app and Azure Active Directory. This is run by Azure Functions Core Tools. It can be accessed at the URL `https://localhost:5000`.
+- A web API is hosted to assist with authentication tasks, acting as a proxy between the app and Azure Active Directory. It can be accessed at the URL `https://localhost:5000`.
- The HTML, CSS, and JavaScript resources that make up the front end of the app are hosted on a local service. It can be accessed at `https://localhost:3000`. - An app manifest is generated and exists in the Developer Portal for Teams. Teams uses the app manifest to tell connected clients where to load the app from.
To build and run your app locally:
> 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.
+ For the first time to run locally, you will be prompted to install a certificate for local debug. click Continue.
+ :::image type="content" source="../assets/images/teams-toolkit-v2/certificate-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
+ 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: :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::
platform First App Spfx https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-app-spfx.md
After the Teams Toolkit configures your project, you have the components to buil
:::image type="content" source="../assets/images/teams-toolkit-v2/app-project-files-spfx.png" alt-text="Screenshot showing app project files for a personal app in Visual Studio Code.":::
-The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory. Among other items in this directory:
+The Toolkit automatically creates scaffolding for you in the project directory based on the capabilities you added during setup. The Teams Toolkit maintains its state for your app in the `.fx` directory.
+
+- The settings you chose when creating the project are stored in `.fx/settings.json`.
+- The state of your project is stored in `.fx/env.*.json`.
+
+And the Teams app information is stored in the `appPackage` directory.
+
+- The app icons are stored as PNG files in `appPackage/color.png` and `appPackage/outline.png`.
+- The app manifest for publishing to Developer Portal for Teams is stored in `appPackage/manifest.source.json`.
-- The app icons are stored as PNG files in `color.png` and `outline.png`.-- The app manifest for publishing to Developer Portal for Teams is stored in `manifest.source.json`.-- The settings you chose when creating the project are stored in `settings.json`. Since you selected a SPFx Webpart project, the following files are relevant to your UI:
platform First Message Extension https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/get-started/first-message-extension.md
To build and run your app locally:
1. Select **Add** to add the app to your account.
- After the app is loaded, you will be taken directly to a search dialog:
+ After the app is loaded, you can try to use the sample functionality:
+ You can launch the message extension from three dots in the composeing area and try search npm packages from the search bar.
- :::image type="content" source="../assets/images/teams-toolkit-v2/msgextn-completed-app.png" alt-text="Your Search-based messaging extension in action":::
+ :::image type="content" source="../assets/images/teams-toolkit-v2/search-message-extension.png" alt-text="Your Search-based messaging extension in action":::
+
+ You can also try to @ your message extension instance from search bar in the top row of Teams and search for npm package.
+ :::image type="content" source="../assets/images/teams-toolkit-v2/msgext-teams-search-bar.png" alt-text="Your Search-based messaging extension in action":::
- Type some text in the search box, then select one of the options. An adaptive card will be added to your input box.
+ Type some text in the search box, then select one of the options, you can create and send adaptive cards of the search results.
+ :::image type="content" source="../assets/images/teams-toolkit-v2/msgext-adptive-card.png" alt-text="Your Search-based messaging extension in action":::
<!-- markdownlint-disable MD033 --> <details>
The Teams Search Auth Config for sample projects on GitHub, demonstrate how to c
* [Create an app using Node.js](get-started-nodejs-app-studio.md) * [Create an app using Yeoman generator](get-started-yeoman.md) * [Create a conversational bot app](first-app-bot.md)
-* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
+* [Code Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples)
platform Manifest Schema https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/resources/schema/manifest-schema.md
Indicates if or not to show the loading indicator when an app or tab is loading.
Indicate where a personal app is rendered with or without a tab header bar. Default is **false**.
+> [!NOTE]
+> `isFullScreen` works only with SharePoint tabs and store apps.
+ ## activities **Optional**ΓÇöobject
You can define any of the following properties:
* `developerUrl`: The HTTPS URL of the developer's website. * `privacyUrl`: The HTTPS URL of the developer's privacy policy. * `termsOfUseUrl`: The HTTPS URL of the developer's terms of use.+
+## defaultBlockUntilAdminAction
+
+When `defaultBlockUntilAdminAction` property is set to true, the app is hidden from users by default until Admin allows it.
+
+|Name| Type| Maximum size | Required | Description|
+||||||
+|`type`|boolean|32 characters|Γ£ö|Can be **true** or **false**.|
+|`description`|string|128 characters||The description that appears to users to indicate the purpose of this property.|
+|`default`|||Γ£ö|Default is **false**.|
+
+## publisherDocsUrl
+
+|Name| Type| Maximum size | Required | Description|
+||||||
+|`$ref`|||Γ£ö|The URL to the page that provides additional app information for the admins.|
+|`description`|string|128 characters||The description that appears to users to indicate the purpose of this property.|
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
Microsoft Teams platform features that are available to all app developers.
| **Date** | **Notes** | **Changed topics** | | -- | | |
+|09/06/2021| Hide Teams app until Admin allows to unhide the app. | [Hide Teams app until admin approves](concepts/design/enable-app-customization.md#hide-teams-app-until-admin-approves) |
|08/30/2021| Custom Together Mode scenes feature combines participants into a single virtual scene and places their video streams in pre-determined seats. | [Custom Together Mode scenes](~/apps-in-teams-meetings/teams-together-mode.md) | |08/25/2021| Introduced step-by-step guide to create a Teams bot with Single sign-on (SSO). | [Step-by-step guide to create Teams bot with SSO](sbs-bots-with-sso.yml) | |08/19/2021| Installation update event received when you install a bot to a conversation thread. | [Installation update event](bots/how-to/conversations/subscribe-to-conversation-events.md#installation-update-event) |