Updates from: 01/19/2021 04:07:39
Service Microsoft Docs article Related commit history on GitHub Change details
platform https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/design/designing-apps-in-meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/design/designing-apps-in-meetings.md
@@ -18,11 +18,11 @@ You can find more comprehensive design guidelines, including elements that you c
## Add a meeting extension
-You can add a meeting extension before and during meetings. You also can an app for a specific meeting directly from the Teams store (AppSource).
+You can add a meeting extension before and during meetings. You also can add an app for a specific meeting directly from the Teams store (AppSource).
### Add before a meeting
-Before a meeting, the meeting details select **Add a tab +** to open the app flyout and find apps optimized for meetings.
+In the meeting details, select **Add a tab +** to open the app flyout and find apps optimized for meetings.
:::image type="content" source="../../assets/images/apps-in-meetings/add-before-meeting.png" alt-text="Example shows how to add a meeting extension before a meeting." border="false":::
@@ -163,7 +163,7 @@ You can go back to a meeting after it ends and view app content. In this example
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/interaction-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/interaction-do.png" alt-text="Example showing how to limit the number of interactions." border="false":::
#### Do: Limit the number of interactions
@@ -171,7 +171,7 @@ For in-meeting dialogs, remove unnecessary content that doesn't help users accom
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/interaction-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/interaction-dont.png" alt-text="Example showing how not to introduce unnecessary elements." border="false":::
#### Don't: Introduce unnecessary elements
@@ -184,7 +184,7 @@ A single in-meeting dialog with multiple interactions can distract from the call
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-layout-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-layout-do.png" alt-text="Example showing how you should use a single-column dialog layout." border="false":::
#### Do: Use a single-column dialog layout
@@ -192,7 +192,7 @@ Since the dialogs are at the center of the meeting stage, task completion should
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-layout-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-layout-dont.png" alt-text="Example showing you shouldn't clutter the space of a meeting extension." border="false":::
#### Don't: Clutter the space
@@ -203,7 +203,7 @@ Dense or overly structured content can be distracting and overwhelming, especial
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-layout-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-layout-do.png" alt-text="Example showing a single-column tab layout." border="false":::
#### Do: Use a single-column tab layout
@@ -211,7 +211,7 @@ Given the in-meeting tab's narrow nature, we strongly recommend displaying the c
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-layout-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-layout-dont.png" alt-text="Example showing a tab with multiple columns." border="false":::
#### Don't: Use multiple columns
@@ -224,7 +224,7 @@ Due to the limited space of the in-meeting tab, layouts with more than one colum
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-controls-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-controls-do.png" alt-text="Example showing how to right align primary controls." border="false":::
#### Do: Right align the primary action
@@ -232,7 +232,7 @@ We recommend positioning the most visually heavy action to the right-most locati
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-controls-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-controls-dont.png" alt-text="Example showing how you shouldn't left align primary controls." border="false":::
#### Don't: Left or center align actions
@@ -245,15 +245,15 @@ This deviates from the standard Teams pattern for control placement in a dialog
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-scroll-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-scroll-do.png" alt-text="Example showing vertical scrolling in an in-meeting tab." border="false":::
#### Do: Scroll vertically
-We recommend positioning the most visually heavy action to the right-most location.
+Users expect vertical scrolling in Teams (and elsewhere).
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-scroll-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-scroll-dont.png" alt-text="Example showing horizontal scrolling in an in-meeting tab." border="false":::
#### Don't: Scroll horizontally
@@ -266,7 +266,7 @@ Horizontal scrolling isnΓÇÖt an expected behavior in Teams. Other canvases in th
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-workflow-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-workflow-do.png" alt-text="Example showing complex scenario in an in-meeting tab." border="false":::
#### Do: Surface complex scenarios in the in-meeting tab
@@ -274,9 +274,9 @@ If your app includes multiple tasks, we strongly recommend using an in-meeting t
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-workflow-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-dialog-workflow-dont.png" alt-text="Example showing complex scenarios in an in-meeting dialog." border="false":::
-#### Don't: Package complex scenarios in the in-meeting dialog
+#### Don't: Make in-meeting dialogs complex
In-meeting dialogs are intended for brief interactions.
@@ -287,7 +287,7 @@ In-meeting dialogs are intended for brief interactions.
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-theming-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-theming-do.png" alt-text="Example showing a meeting extension with the dark theme." border="false":::
#### Do: Use Teams color tokens
@@ -295,11 +295,11 @@ Teams meetings are optimized for dark mode to help reduce visual and cognitive n
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-theming-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-theming-dont.png" alt-text="Example showing a meeting extension with a default (light) theme." border="false":::
-#### Don't: Include another dismiss button
+#### Don't: Hard code hex values
-Providing an option to close in-meeting tab content may cause issues since thereΓÇÖs already a button in the header to dismiss the in-meeting tab itself.
+If you donΓÇÖt use Teams color tokens, your designs will be less scalable and take more time to manage.
:::column-end::: :::row-end:::
@@ -308,7 +308,7 @@ Providing an option to close in-meeting tab content may cause issues since there
:::row::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-do.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-do.png" alt-text="Example showing a meeting extension with a back button." border="false":::
#### Do: Have a back button
@@ -316,7 +316,7 @@ If you have more than one layer of navigation in an in-meeting tab, users must b
:::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-dont.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-dont.png" alt-text="Example showing a meeting extension with two dismiss buttons." border="false":::
#### Don't: Include another dismiss button
@@ -329,7 +329,7 @@ Providing an option to close in-meeting tab content may cause issues since there
:::column span=""::: :::column-end::: :::column span="":::
-:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-caution.png" alt-text="Example showing a meeting extension best practice." border="false":::
+:::image type="content" source="../../assets/images/apps-in-meetings/in-meeting-tab-nav-caution.png" alt-text="Example showing modals (or task modules) within an in-meeting tab." border="false":::
#### Caution: Avoid modals within the in-meeting tab
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/appsource/publish https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/deploy-and-publish/appsource/publish.md
@@ -1,31 +1,32 @@
--- title: Microsoft Teams app approval submission process guidance
-description: Describes the submission approval process for getting your app published to the Microsoft Teams app store
-keywords: teams publish store office publishing publish AppSource partner center account verification apps account not publish eligible
+description: Describes the approval submission process for getting your app published to the Microsoft Teams app store
+ms.topic: conceptual
+keywords: teams publish store office publishing publish AppSource partner center account verification apps account not publish eligible app submission
--- # Submit your app to AppSource ## Teams app submission
-Publishing your app to [AppSource](https://appsource.microsoft.com) makes it available in the Teams app catalog and on the web. At a high level, the process for submitting your app to AppSource is:
+Make your app available in the Microsoft Teams app catalog and on the web by publishing it to [AppSource](https://appsource.microsoft.com). At a high level, the process for submitting your app to AppSource is as follows:
1. Develop your app by following the [design guidelines](~/concepts/design/understand-use-cases.md). Tabs must follow the tab design guidelines for both, [desktop and web](~/tabs/design/tabs.md) and [mobile](~/tabs/design/tabs-mobile.md). Bots must follow the [bot design guidelines](~/bots/design/bots.md). 1. Ensure your app meets the app [validation policies](/legal/marketplace/certification-policies) for Microsoft Teams.
-1. Self test your app with the [Manifest validation tool](prepare/submission-checklist.md#teams-app-validation-tool) .
-1. [Set up a developer account](/office/dev/store/open-a-developer-account) in [Partner Center](https://support.microsoft.com/help/4499930/partner-center-overview). *See also* [How do I create a Partner Center account](#how-do-i-create-a-partner-center-account) in the FAQ section, below.
-1. Prepare your app for submission by following our [submission checklist](prepare/submission-checklist.md).
+1. Test your app with the [Manifest validation tool](prepare/submission-checklist.md#teams-app-validation-tool).
+1. Set up a [developer account](/office/dev/store/open-a-developer-account) in [Partner Center](https://support.microsoft.com/help/4499930/partner-center-overview). *See also* [How do I create a Partner Center account](#how-do-i-create-a-partner-center-account) in the FAQ section.
+1. Prepare your app for submission by following the [submission checklist](prepare/submission-checklist.md).
1. Review the [most failed test cases for a quicker app quality approval](prepare/frequently-failed-cases.md). 1. Submit your package to [AppSource through Partner Center](/office/dev/store/use-partner-center-to-submit-to-appsource). 1. Track the approval process on your Partner Center dashboard. *See* [Partner Center Overview](https://support.microsoft.com/help/4499930/partner-center-overview).
-1. Post submission ΓÇö review our guidance for [Maintaining and supporting your published app](post-publish/overview.md).
+1. After submission, review the guidance for [Maintaining and supporting your published app](post-publish/overview.md).
>[!NOTE] >
->- Your Teams app must be mobile responsive and comply with [no upsell requirements](~/concepts/deploy-and-publish/appsource/prepare/frequently-failed-cases.md#-mobile-responsiveness-no-direct-upsell-or-payment) on mobile OS (iOS and Android).
+>- Your Teams app must be mobile-responsive and comply with [no upsell requirements](~/concepts/deploy-and-publish/appsource/prepare/frequently-failed-cases.md#-mobile-responsiveness-no-direct-upsell-or-payment) on mobile OS (iOS and Android).
>- If your Teams app contains a bot, you must comply with the Bot Developer Framework [Code of Conduct](https://aka.ms/bf-conduct).
->- If your app contains an Office 365 Connector, additional terms may apply. *See* [Connectors Developer Dashboard](https://aka.ms/connectorsdashboard) and [App Developer Agreement](https://sellerdashboard.microsoft.com/Assets/Content/Agreements/Office_Store_Seller_Agreement_20120927.htm).
->- To make your app available for GCC users and avoid duplicate app listings in the store, the auth process/flow should identify and route the user to the specified/expected content URL for GCC users.
+>- If your app contains an Office 365 Connector, additional terms may apply. See [Connectors Developer Dashboard](https://aka.ms/connectorsdashboard) and [App Developer Agreement](https://sellerdashboard.microsoft.com/Assets/Content/Agreements/Office_Store_Seller_Agreement_20120927.htm).
+>- To make your app available for Government Community Cloud (GCC) users and to avoid duplicate app listings in the store, the auth process or flow must identify and route the user to the specified or expected content URL for GCC users.
## FAQs ΓÇö Teams apps and Partner account verification process in Partner Center
@@ -33,12 +34,12 @@ Publishing your app to [AppSource](https://appsource.microsoft.com) makes it av
There are two ways to create a Partner Center account: -- If you're new to Partner Center and don't have an account within the Microsoft network, [create an account using the Partner Center enrollment page](/office/dev/store/open-a-developer-account#create-an-account-using-an-existing-partner-center-enrollment).-- If you're already enrolled in the Partner Network, [create an account directly in Partner Center using an existing enrollment](/office/dev/store/).
+- If you are new to Partner Center and don't have an account in the Microsoft network, create an account using the [Partner Center enrollment page](/office/dev/store/open-a-developer-account#create-an-account-using-an-existing-partner-center-enrollment).
+- If you are already enrolled in the Partner Network, create an account directly in Partner Center using an [ existing enrollment page](/office/dev/store/).
## What if I cannot find my Office Store account in Partner Center?
-Please open a [Partner Center support ticket](https://partner.microsoft.com/support/v2/?stage=1) and select the following from the drop-down menus:
+Open a [Partner Center support ticket](https://partner.microsoft.com/support/v2/?stage=1) and select the following from the drop-down menus:
| Menu | Option | | ------- | ------- |
@@ -48,84 +49,85 @@ Please open a [Partner Center support ticket](https://partner.microsoft.com/supp
## Where can I get support for my Partner Center account issues?
-Please visit our [publishers support page](https://aka.ms/marketplacepublishersupport) to search for your issue topic and find guidance. If the provided guidance is not helpful, [open a Partner Center support ticket](/azure/marketplace/partner-center-portal/support#how-to-open-a-support-ticket).
+Visit the [publishers support page](https://aka.ms/marketplacepublishersupport) to search for your issue topic and find guidance. If the provided guidance is not helpful, raise a [Partner Center support ticket](/azure/marketplace/partner-center-portal/support#how-to-open-a-support-ticket).
## How do I manage my Office Store account in Partner Center?
-Please visit our [Manage your Office Store account in Partner Center](/office/dev/store/manage-account-settings-and-profile) for guidance on managing your Office Store account through Partner Center.
+Visit the [Manage your Office Store account through Partner Center](/office/dev/store/manage-account-settings-and-profile) for guidance.
## How do I add my phone number to the partner profile contact section?
-The phone number has three parts ΓÇö country code, area code, and the telephone number. If your phone number doesn't include an area code, then leave the second box empty, and complete the third box.
+The phone number has three parts, country code, area code, and telephone number. If your phone number doesn't include an area code, then leave the second box empty, and complete the third box.
## How do I manage my account settings and partner profile in Partner Center?
-Please visit our [Manage account settings and profile info](/windows/uwp/publish/manage-account-settings-and-profile#additional-settings-and-info) page for guidance on managing your Partner Center account settings.
+Visit the [Manage account settings and profile info](/windows/uwp/publish/manage-account-settings-and-profile#additional-settings-and-info) page for guidance on managing your Partner Center account settings.
## Why do I receive the message, "This account is not publish eligible," when I try to submit my add-in through Partner Center?
-You'll receive the above error message when your [account verification status](/partner-center/verification-responses) is pending. You can check your account verification status in the Partner Center [dashboard](https://partner.microsoft.com/dashboard) by selecting the **Settings** option (the gear icon) in the upper-right corner of the page header shell and choosing **Developer settings** => **Account** => **Account settings** .
+You receive the above error message when your [account verification status](/partner-center/verification-responses) is pending. Check your account verification status in the Partner Center [dashboard](https://partner.microsoft.com/dashboard). Select **Settings**, the gear icon in the upper-right corner of the page header shell. Choose **Developer settings** => **Account** => **Account settings**.
![Partner Center account settings page](../../../assets/images/partner-center-accts-page.png) ![Partner Center verification status](../../../assets/images/partner-center-verification-status.png)
-During the account verification process the status of each required step ΓÇö Email Ownership, Employment Verification, and Business Verification ΓÇö will be displayed. Once the verification process has been successfully completed, the verification status of your enrollment on the profile page will change from "pending" to "authorized," and the process steps will no longer be displayed.
+The status of each required step, such as **Email Ownership**, **Employment Verification**, and **Business Verification**, are displayed in the account verification process. After the verification process is complete, the verification status of your enrollment on the profile page changes from *pending* to *authorized*. The process steps are no longer displayed.
![Partner Center verification error](../../../assets/images/partner-center-acct-verification-error.png)
-## What is verified in Partner Center account verification process and how to respond?
-There are three verification areas - Email Ownership, Employment and Business. Please see the details of [What is verified and how to respond](/partner-center/verification-responses#what-is-verified-and-how-to-respond)
-If you are the primary contact (Global admin or Account admin), we recommend that you go to your Partner Profile to monitor verification status and track progress.
+## What is verified in the Partner Center account verification process and how to respond?
+There are three verification areas, **Email Ownership**, **Employment**, and **Business**. For more information on the verification process, see [What is verified and how to respond](/partner-center/verification-responses#what-is-verified-and-how-to-respond).
+If you are the primary contact, Global admin, or Account admin, go to your Partner Profile to monitor verification status and track the progress.
-Once the verification process is complete, the verification status of your enrollment on the profile page will change from *pending* to *authorized* and the process steps with status, displayed on that page, will disappear. The primary contact will receive an email from Microsoft within a few business days after the verification is completed.
+After the verification process is complete, the verification status of your enrollment on the profile page changes from *pending* to *authorized*. After authorization, the process steps and their status are no longer available on the page. The primary contact receives an email from Microsoft within a few business days after the verification is complete.
-## My account Verification status has not advanced beyond Email Ownership in Partner Center. How should I proceed?
+## My account Verification status has not advanced beyond Email Ownership in the Partner Center. How should I proceed?
-During the **Email Ownership** verification process, a verification email is sent to the primary contact email address. Please check your primary contact inbox for an email from **maccount@<span>microsoft</span>.com** with the subject line *Action needed: Verify your email account with Microsoft*, requesting that you complete the email verification process. The verification email will be sent to the email address listed in your account settings page in Partner Center.
+During the **Email Ownership** verification process, a verification email is sent to the primary contact email address. Check your primary contact inbox for an email from **maccount@<span>microsoft</span>.com** with the subject line *Action needed: Verify your email account with Microsoft*. Complete the email verification process. The verification email is sent to the email address listed on your account settings page in Partner Center.
> [!NOTE]
- >The email verification link is only valid for 7 days. You can request that we resend the email to you by visiting your partner profile page and selecting the **Resend verification email** link. To ensure that the email is received, safelist email from microsoft.com as a secure domain, and check your junk email folders.
+> * The email verification link is only valid for seven days.
+> * You can request us to resend the email by visiting your partner profile page and selecting the **Resend verification email** link.
+> * To ensure that email is received, safe list the email from microsoft.com as a secure domain, and check your junk email folders.
-## How I do get further support for my account related issues?
+## How do I get further support for my account related issues?
-Please visit our [Support for the Commercial Marketplace program in Partner Center](/azure/marketplace/partner-center-portal/support) page for guidance and steps to create a support ticket.
+Visit the [Support for the Commercial Marketplace program in Partner Center](/azure/marketplace/partner-center-portal/support) page for guidance and steps to create a support ticket.
-## I've checked my mail folders and haven't received the verification email. What should I do next?
+## I've checked my mail folders and haven't received the verification email. What must I do next?
-Please try the following:
-
-1. Check your junk/spam folder.
-1. Clear the browser cache, go to your Partner Center account dashboard, and select the **Resend verification email** link to have the verification email resent to your email address.
-1. Try accessing the **Resend verification email** link from a different browser.
-1. Work with your IT department to ensure that the verification emails are not blocked by the email server.
-1. Adjust your server's spam filter to allow/safelist all emails from **maccount@microsoft.<span></span>com**.
+Try the following:
+* Check your junk or spam folder.
+* Clear the browser cache, go to your Partner Center account dashboard, and select the **Resend verification email** link to have the verification email resent to your email address.
+* Try accessing the **Resend verification email** link from a different browser.
+* Work with your IT department to ensure that the verification emails are not blocked by the email server.
+* Adjust your server's spam filter to allow or safe-list all emails from **maccount@microsoft.<span></span>com**.
## How long does the employment verification process usually take?
-If all the submitted details are correct, employment verification completes in 1 to 2 hours.
+If all the submitted details are correct, the employment verification process takes around two hours to complete.
-## How long does the ΓÇ£Business VerificationΓÇ¥ process usually take?
+## How long does the business verification process usually take?
-Business Verification takes 1 to 2 business days to complete, provided that all required documents have been submitted.
+If all the required documents are submitted, business verification takes one to two business days to complete.
## If I reach out to the support team, will my ticket be expedited?
-Support tickets will be resolved within a week's time. Please look for the updates which will be sent to the email provided when the support ticket was raised.
+Support tickets get resolved in a week. Check for updates sent to the email ID provided when raising the support ticket.
-## My issue is not listed here. Are there other pages I can reference for Partner Center issues?
+## My issue is not listed here. Are there other pages I can reference for Partner Center issues?
-Please refer to our [commercial marketplace documentation](/azure/marketplace/) for more help.
+See the [commercial marketplace documentation](/azure/marketplace/) for more help.
## I've created a support ticket, it has been 7 business days, and I haven't received an update. Where can I get additional help?
-Please send an email to **<teamsubm@microsoft.com>** with the following details:
+Send an email to **<teamsubm@microsoft.com>** with the following details:
-1. **Subject Line**. *Partner Center Account Issue for <App_Name>* (specify the name of your app).
-1. **Email body:**
- * Support ticket number:
- * Your seller ID:
- * A screen shot of the issue (if possible):
+* **Subject Line**: Partner Center Account Issue for <App_Name> (specify the name of your app).
+* **Email body**:
+ * Support ticket number
+ * Your seller ID
+ * A screenshot of the issue (if possible)
## App category mapping
@@ -136,9 +138,9 @@ Please send an email to **<teamsubm@microsoft.com>** with the following details:
| Education | Education | | Human resources | Human Resources and Recruiting | | Productivity | Content Management, Files and documents, Productivity, Training and Tutorials, and Utilities |
-| Project management | Communication, Project Management, Workflow and Business Management |
+| Project management | Communication, Project Management, Workflow, and Business Management |
| Sales and support | Customer and Contact Management, Customer Support, Financial Management, Sales and Marketing |
-| Social and fun | Image and Video Galleries, Lifestyle, News and Weather, Social, Travel and Navigation |
+| Social and fun | Image and Video Galleries, Lifestyle, News and Weather, Social, Travel, and Navigation |
> > [!div class="nextstepaction"]
platform https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/native-device-permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
@@ -15,7 +15,8 @@ You might want to enrich your tab with features that require access to native de
> * Location > * Notifications
-[!Note] To integrate camera and image capabilities within your Microsoft Teams mobile app, refer [Camera and image capabilities in Teams.](../../concepts/device-capabilities/mobile-camera-image-permissions.md)
+> [!NOTE]
+> To integrate camera and image capabilities within your Microsoft Teams mobile app, see [Camera and image capabilities in Teams.](../../concepts/device-capabilities/mobile-camera-image-permissions.md)
> [!IMPORTANT] >
platform https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/configuration-page https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/create-tab-pages/configuration-page.md
@@ -8,15 +8,15 @@ ms.author: lajanuar
--- # Create a configuration page
-A configuration page is a special type of [content page](content-page.md) that allows your users to configure some aspect of your Teams app. Typically these are used as part of:
+A configuration page is a special type of [content page](content-page.md). The users configure some aspects of the Microsoft Teams app using the configuration page and use that configuration as part of the following:
-* A channel or group chat tab - The configuration page allows you to collect information from your users and set the `contentUrl` of the content page to display.
+* A channel or group chat tab - Collect information from the users and set the `contentUrl` of the content page to display.
* A [messaging extension](~/messaging-extensions/what-are-messaging-extensions.md)
-* A [Office 365 Connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md)
+* An [Office 365 Connector](~/webhooks-and-connectors/what-are-webhooks-and-connectors.md)
## Configuring a channel or group chat tab
-A configuration page informs the content page how it should render. Your application must reference the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and call `microsoft.initialize()`. Additionally, your URLs must be secure HTTPS endpoints and available from the cloud. Below is a configuration page example.
+The application must reference the [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) and call `microsoft.initialize()`. Also, the URLs used must be secured HTTPS endpoints and available from the cloud. The following code is an example of a configuration page:
```html <head>
@@ -73,34 +73,34 @@ A configuration page informs the content page how it should render. Your applica
... ```
-Here, the user is presented with two option buttons, **Select Gray** or **Select Red** to display the tab content with either a red or gray icon. Choosing the relative button fires `saveGray()` or `saveRed()` and invokes the following:
+Choose either **Select Gray** or **Select Red** button in the configuration page, to display the tab content with a gray or red icon. Choosing the relative button fires either `saveGray()` or `saveRed()`, and invokes the following:
1. The `settings.setValidityState(true)` is set to true. 1. The `microsoftTeams.settings.registerOnSaveHandler()` event handler is triggered. 1. The **Save** button on the app's configuration page, uploaded in Teams, is enabled.
-This code lets Teams know that the configuration requirements have been satisfied and the installation can proceed. On **Save**, the parameters of `settings.setSettings()` are set, as defined by the `Settings` interface, for the current instance. For more information, see [Settings interface](/javascript/api/@microsoft/teams-js/_settings?view=msteams-client-js-latest&preserve-view=true). Finally, `saveEvent.notifySuccess()` is called to indicate that the content URL has successfully resolved.
+The configuration page code informs the Teams that the configuration requirements are satisfied and the installation can proceed. When the user selects **Save**, the parameters of `settings.setSettings()` are set, as defined by the `Settings` interface. For more information, see [Settings interface](/javascript/api/@microsoft/teams-js/_settings?view=msteams-client-js-latest&preserve-view=true). In the last step, `saveEvent.notifySuccess()` is called to indicate that the content URL has successfully resolved.
>[!NOTE] >
->* If a save handler was registered using `microsoftTeams.settings.registerOnSaveHandler()`, the callback must invoke `saveEvent.notifySuccess()` or `saveEvent.notifyFailure()` to indicate the outcome of the configuration.
->* If no save handler was registered, the `saveEvent.notifySuccess()` call is automatically made immediately upon the user selecting the **Save** button.
+>* If you register a save handler using `microsoftTeams.settings.registerOnSaveHandler()`, the callback must invoke `saveEvent.notifySuccess()` or `saveEvent.notifyFailure()` to indicate the outcome of the configuration.
+>* If you don't register a save handler, the `saveEvent.notifySuccess()` call is made automatically when the user selects **Save**.
### Get context data for your tab settings
-Your tab might require contextual information to display relevant content. Contextual information can further enhance your tab's appeal by providing a more customized user experience.
+Your tab might require contextual information to display relevant content. Contextual information further enhances your tab's appeal by providing a more customized user experience.
-The Teams [Context interface](/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest&preserve-view=true) defines the properties that can be used for your tab configuration. You can collect the values of context data variables in two ways:
+For more information on the properties used for tab configuration, see [Context interface](/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true). Collect the values of context data variables in the following two ways:
1. Insert URL query string placeholders in your manifest's `configurationURL`.
-1. Use the [Teams SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) `microsoftTeams.getContext((context) =>{}` method.
+1. Use the [Teams SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true) `microsoftTeams.getContext((context) =>{})` method.
-#### Insert placeholders in the `configurationURL`
+#### Insert placeholders in the `configurationUrl`
-Context interface placeholders can be added to your base `configurationUrl`. For example:
+Add context interface placeholders to your base `configurationUrl`. For example:
-##### Base Url
+##### Base URL
```json ...
@@ -116,7 +116,7 @@ Context interface placeholders can be added to your base `configurationUrl`. For
... ```
-After your page has uploaded, the query string placeholders will be updated by Teams with the relevant values. You can include logic in your configuration page to retrieve and use those values. For more information on working with URL query strings see [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) in MDN web docs. Here is an example of how to extract a value from the above `configurationURL` property:
+After your page uploads, the Teams updates the query string placeholders with relevant values. Include logic in the configuration page to retrieve and use those values. For more information on working with URL query strings, see [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) in MDN Web Docs. The following example describes the way to extract a value from the `configurationUrl` property:
```html <script>
@@ -133,7 +133,7 @@ document.write(getId());
### Use the `getContext()` function to retrieve context
-When invoked, the `microsoftTeams.getContext((context) => {})` function retrieves the [Context interface](/javascript/api/@microsoft/teams-js//microsoftteams.context?view=msteams-client-js-latest&preserve-view=true). You can add this function to your configuration page to retrieve context values:
+The `microsoftTeams.getContext((context) => {})` function retrieves the [Context interface](/javascript/api/@microsoft/teams-js/context?view=msteams-client-js-latest&preserve-view=true) when invoked. Add this function to the configuration page to retrieve context values:
```html <!-- `userPrincipalName` will render in the span with the id "user". -->
@@ -149,20 +149,20 @@ When invoked, the `microsoftTeams.getContext((context) => {})` function retrieve
... ```
-## Context and Authentication
+## Context and authentication
-You might require authentication before allowing a user to configure your app or your content might include sources that have their own authentication protocols. See [Authenticate a user in a Microsoft Teams tab](~/tabs/how-to/authentication/auth-flow-tab.md) Context information can be used to help construct authentication requests and authorization page URLs.
-Make sure that all domains used in your tab pages are listed in the `manifest.json` `validDomains` array.
+ Authenticate before allowing a user to configure your app. Otherwise, your content might include sources that have their authentication protocols. For more information, see [Authenticate a user in a Microsoft Teams tab](~/tabs/how-to/authentication/auth-flow-tab.md). Use context information to construct the authentication requests and authorization page URLs.
+Ensure that all domains used in your tab pages are listed in the `manifest.json` and `validDomains` array.
## Modify or remove a tab
-Supported removal options can further refine the user experience. You can enable users to modify, reconfigure, or rename a group/channel tab by setting your manifest's `canUpdateConfiguration` property to `true`. In addition, you can designate what happens to the content when a tab is removed by including a removal options page in your app and setting a value for the `removeUrl` property in the `setSettings()` configuration (see below). Personal tabs can't be modified but can be uninstalled by the user. For more information, see [Create a removal page for your tab](~/tabs/how-to/create-tab-pages/removal-page.md).
+Supported removal options further refine the user experience. Set your manifest's `canUpdateConfiguration` property to `true`, that enables the users to modify, reconfigure, or rename a group or channel tab. Also, indicate what happens to the content when a tab is removed, by including a removal options page in the app and setting a value for the `removeUrl` property in the `setSettings()` configuration. For more information, see [Mobile clients](#mobile-clients). The user can uninstall the Personal tabs but cannot modify them. For more information, see [Create a removal page for your tab](~/tabs/how-to/create-tab-pages/removal-page.md).
## Mobile clients
-If you choose to have your channel/group tab appear on Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property (see below). See [guidance for tabs on mobile](~/tabs/design/tabs-mobile.md).
+If you choose to have your channel or group tab appear on the Teams mobile clients, the `setSettings()` configuration must have a value for the `websiteUrl` property. For more information, see [guidance for tabs on mobile](~/tabs/design/tabs-mobile.md).
-Microsoft Teams setSettings() configuration for removal page and/or mobile clients:
+Microsoft Teams setSettings() configuration for removal page or mobile clients:
```javascript microsoftTeams.settings.setSettings({