From 7d6ce0f6123ae017da38ed71f3ac3c5492e159ce Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Tue, 13 Feb 2018 12:48:48 -0800 Subject: [PATCH 1/4] Updated Context and theme information (#86) Clarified what information can be used in a Tabs URL, returned by the microsoftTeams.getContext() object, and clarified the wording for theme change handling. --- .../concepts/tabs/tabs-context.md | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/msteams-platform/concepts/tabs/tabs-context.md b/msteams-platform/concepts/tabs/tabs-context.md index 9ecde80c438..e677f6927cd 100644 --- a/msteams-platform/concepts/tabs/tabs-context.md +++ b/msteams-platform/concepts/tabs/tabs-context.md @@ -2,6 +2,7 @@ title: Get context for your tab description: Describes how to get user context to your tabs keywords: teams tabs user context +msdate: 02/09/2018 --- # Get context for your Microsoft Teams tab @@ -37,24 +38,26 @@ Use placeholders in your configuration or content URLs. Microsoft Teams replaces * {entityId}: The ID you supplied for the item in this tab when first [configuring the tab](~/concepts/tabs/tabs-configuration). * {subEntityId}: The ID you supplied when generating a [deep link](~/concepts/deep-links) for a specific item _within_ this tab. This should be used to restore to a specific state within an entity; for example, scrolling to or activating a specific piece of content. -* {upn}: The user name. -* {groupId}: The ID of an Office 365 group. -* {tid}: The company ID; that is, the tenant ID. -* {locale}: The user locale, such as 'en-us'. +* {upn}: The User Principal Name of the current user (usually the user's email address). +* {theme}: The current UI theme, e.g. `default`, `dark`, or `contrast`. +* {groupId}: The ID of the Office 365 Group in which the tab resides. +* {tid}: The Azure AD tenant ID of the current user. +* {locale}: The current locale of the user formatted as languageId-countryId (for example, en-us). For example, suppose in your tab manifest you set the `configURL` attribute to -`"https://www.contoso.com/config?name={upn}&tenant={tid}&group={groupId}"` +`"https://www.contoso.com/config?name={upn}&tenant={tid}&group={groupId}&theme={theme}"` And the signed-in user has the following attributes: * Their username is 'user@example.com' * Their company tenant ID is 'e2653c-etc' * They are a member of the Office 365 group named 'test' +* The user has set their Teams theme to 'dark' -When they select your tab, they will be navigated to +When they configure your tab, Teams calls this URL: -`https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=test` +`https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=test&theme=dark` ### Getting context by using the Microsoft Teams JavaScript library @@ -64,15 +67,19 @@ The context variable will look like the following example. ```json { - "teamId": "The team ID in the format 19:[id]@thread.skype", + "teamId": "The Microsoft Teams ID in the format 19:[id]@thread.skype", + "teamName": "The name of the current team", "channelId": "The channel ID in the format 19:[id]@thread.skype", - "locale": "Lowercase lang-locale", + "channelName": "The name of the current channel", + "locale": "The current locale of the user formatted as languageId-countryId (for example, en-us)", "theme": "default | dark | contrast", - "entityId": "The entity id you set up on your config page", - "subEntityId": "The sub entity id you set up on your config page", - "upn": "The user identifier in email format", - "tid": "Guid identifying the current Tenant ID", - "groupId": "Guid identifying the current O365 Group ID" + "entityId": "The developer-defined unique ID for the entity this content points to", + "subEntityId": "The developer-defined unique ID for the sub-entity this content points to", + "upn": "The User Principal Name of the current user (usually the user's email address)", + "tid": "The Azure AD tenant ID of the current user", + "groupId": "Guid identifying the current O365 Group ID", + "theme": "The current UI theme, e.g. default, dark, contrast", + "isFullScreen": "Indicates whether the tab is in full-screen mode" } ``` @@ -80,4 +87,4 @@ The context variable will look like the following example. You can register your app to be told if the theme changes by calling `microsoftTeams.registerOnThemeChangeHandler(function(theme) { /* ... */ })`. -Theme will be a string set to `default`, `dark`, or `contrast` +The `theme` argument in the function will be a string with a value of `default`, `dark`, or `contrast`. From 2686a3e0bdb5a8c0d8a02990196f0795743dff5a Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Tue, 13 Feb 2018 13:30:08 -0800 Subject: [PATCH 2/4] Updates to icon size (#88) * Updated Context and theme information Clarified what information can be used in a Tabs URL, returned by the microsoftTeams.getContext() object, and clarified the wording for theme change handling. * Icon spec change (#85) * Updated icon sizes (#87) --- msteams-platform/concepts/apps/apps-package.md | 6 +++--- msteams-platform/get-started/get-started-nodejs.md | 6 ++---- msteams-platform/publishing/office-store-checklist.md | 4 ++-- msteams-platform/publishing/office-store-guidance.md | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/msteams-platform/concepts/apps/apps-package.md b/msteams-platform/concepts/apps/apps-package.md index 3846022f4eb..1cbdce23d14 100644 --- a/msteams-platform/concepts/apps/apps-package.md +++ b/msteams-platform/concepts/apps/apps-package.md @@ -31,17 +31,17 @@ Microsoft Teams requires two icons for your app experience, to be used within th ### color -The `color` icon is used throughout Microsoft Teams (in app and tab galleries, bots, flyouts, and so on). This icon should be 96×96 pixels. Your icon can be any color (or colors), but the background should be your branded accent color. It should also have a small amount of padding surrounding the icon to accommodate the hexagonal cropping for the bot version of the icon. +The `color` icon is used throughout Microsoft Teams (in app and tab galleries, bots, flyouts, and so on). This icon should be 192×192 pixels. Your icon can be any color (or colors), but the background should be your branded accent color. It should also have a small amount of padding surrounding the icon to accommodate the hexagonal cropping for the bot version of the icon. ### outline -The `outline` icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." This icon must be 20×20 pixels. Your outline icon must contain only white and transparency (no other colors). The icon can be white with transparent background or transparent with a white background. The outline icon should not have extra padding surrounding the icon and should be as tightly cropped as possible while still maintaining the 20x20 dimensions. Here are a few good examples: +The `outline` icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." This icon must be 32×32 pixels. Your outline icon must contain only white and transparency (no other colors). The icon can be white with transparent background or transparent with a white background. The outline icon should not have extra padding surrounding the icon and should be as tightly cropped as possible while still maintaining the 32x32 dimensions. Here are a few good examples: ![Sample outline icons](~/assets/images/icons/sample20x20s.png) For example, say your company is Contoso. You'd submit two icons: -![Sample Contoso icons](~/assets/images/icons/contosoicons.png) +![Icon showcase](~/assets/images/framework/framework_submit_icon.png) Here's how the icons would appear in the UI: diff --git a/msteams-platform/get-started/get-started-nodejs.md b/msteams-platform/get-started/get-started-nodejs.md index 8e475ad1505..b093cd950f3 100644 --- a/msteams-platform/get-started/get-started-nodejs.md +++ b/msteams-platform/get-started/get-started-nodejs.md @@ -155,11 +155,9 @@ The app will only be available during the current session on your development ma ### Host in Azure -Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this Hello-world sample. See [creating a new free account](https://azure.microsoft.com/en-us/free/) for more information. +Microsoft Azure lets you host your Node.js web application on a free tier using shared infrastructure. This will be sufficient to run this Hello-world sample. See [creating a new free account](https://azure.microsoft.com/en-us/free/) for more information. For more information on Azure see the [Azure developer guide](https://docs.microsoft.com/en-us/azure/guides/developer/azure-developer-guide). -For more information on Azure see the [Azure developer guide](https://docs.microsoft.com/en-us/azure/guides/developer/azure-developer-guide). - -You can host your app using the Azure Cloud Shell found on the [Microsoft Azure Dashboard](https://ms.portal.azure.com). +You can quickly host your app using the Azure Cloud Shell found on the [Microsoft Azure Dashboard](https://ms.portal.azure.com). diff --git a/msteams-platform/publishing/office-store-checklist.md b/msteams-platform/publishing/office-store-checklist.md index e8824c95a8b..b2861d52381 100644 --- a/msteams-platform/publishing/office-store-checklist.md +++ b/msteams-platform/publishing/office-store-checklist.md @@ -12,8 +12,8 @@ The follow metadata is required in your manifest.json file and for Seller Dashbo |Data|Type|Size|Manifest|Seller Dashboard|Description| |---|---|---|---|---|---| |App package|.zip|||✔|The actual app package for uploading or AppSource submission.| -|App logo|.png|96×96 pixels|`icon.color`|✔|The icon to display in the product page listing in AppSource or Teams gallery. This is your full-color product icon.| -|App logo outline|.png|20×20 pixels|`icon.outline`||The icon to display in Teams, in the Teams chat channel and other locations. This is your logo rendered as a white outline with transparent background.| +|App logo|.png|192×192 pixels|`icon.color`|✔|The icon to display in the product page listing in AppSource or Teams gallery. This is your full-color product icon.| +|App logo outline|.png|32×32 pixels|`icon.outline`||The icon to display in Teams, in the Teams chat channel and other locations. This is your logo rendered as a white outline with transparent background.| |Support link|URL|||✔|A link to support material for end users. Can be HTTP or HTTPS.| |Privacy link|URL||`developer.privacyUrl`|✔|A link to your privacy policy (HTTPS).| |Video link|URL|||Optional|A link to a video about your app.| diff --git a/msteams-platform/publishing/office-store-guidance.md b/msteams-platform/publishing/office-store-guidance.md index d76caf515b0..cc87e18fbc0 100644 --- a/msteams-platform/publishing/office-store-guidance.md +++ b/msteams-platform/publishing/office-store-guidance.md @@ -34,7 +34,7 @@ In the Seller Dashboard: * **Testing notes** – Please ensure you provide enough information for our validation team to successfully load and test your experience. This includes providing sign-in instructions and test accounts, as well as any other notes that might assist in the review of your product. * **My app calls, support, contains, or uses cryptography or encryption** – This checkbox helps to ensure that your product is not using cryptography in a way that would prohibit distribution through the Office Store. See [Export restrictions on cryptography](https://docs.microsoft.com/en-us/windows/uwp/security/export-restrictions-on-cryptography) for a detailed explanation. * **My app calls, support, contains, or uses cryptography or encryption** – This checkbox helps to ensure taht your product is not using cryptography in a way that would prohibit distribution through AppSource. See [Export restrictions on cryptography](https://docs.microsoft.com/en-us/windows/uwp/security/export-restrictions-on-cryptography) for a detailed explanation. - * **App logo** – Use your full-color 96×96 icon. + * **App logo** – Use your full-color 192×192 icon. * **Support document link** – The URL for support content for your app. * **Privacy document link** – Use the URL that appears in `privacyUrl` in your manifest. * **Video link** – Optional; the URL of a video of your app. This video appears on your product listing page in AppSource. From ed5a148a4b626b86198c72b90ec6a6bf9101b8b7 Mon Sep 17 00:00:00 2001 From: Norm Sohl Date: Wed, 14 Feb 2018 12:58:56 -0800 Subject: [PATCH 3/4] fixed typo (#91) --- msteams-platform/concepts/tabs/tabs-configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/msteams-platform/concepts/tabs/tabs-configuration.md b/msteams-platform/concepts/tabs/tabs-configuration.md index 088009afac8..e84491d49f0 100644 --- a/msteams-platform/concepts/tabs/tabs-configuration.md +++ b/msteams-platform/concepts/tabs/tabs-configuration.md @@ -111,7 +111,7 @@ Use `microsoftTeams.settings.setSettings({entityId, contentUrl, suggestedTabName ### React when the user chooses the Save button -Often you might not be able to determine the `entityId` or `contentUrl` immediately. For example, you might first need create a resource (a document or a task), and you want to do this only after the user selects **Save**. To be notified when the user selects **Save**, you must call `microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) { /* ... */ })`. After this is done, when the user selects **Save**, Microsoft Teams calls the save event handler you registered. +Often you might not be able to determine the `entityId` or `contentUrl` immediately. For example, you might first need to create a resource (a document or a task), and you want to do this only after the user selects **Save**. To be notified when the user selects **Save**, you must call `microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) { /* ... */ })`. After this is done, when the user selects **Save**, Microsoft Teams calls the save event handler you registered. You can return the settings asynchronously if, for example, the user has requested a new resource which will take time for you to create. To do this, store `saveEvent` for later. If you do not notify the outcome within 30 seconds, Microsoft Teams terminates the operation and displays an error. From 442669b73d4775e3d21357a87f9b8a6fda9a3e89 Mon Sep 17 00:00:00 2001 From: Igor Fesenko Date: Thu, 15 Feb 2018 19:42:09 -0800 Subject: [PATCH 4/4] Update required size of icons according to new requirements References: https://docs.microsoft.com/en-us/microsoftteams/platform/publishing/office-store-checklist https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-package#outline https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-package#color --- msteams-platform/resources/schema/manifest-schema.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/msteams-platform/resources/schema/manifest-schema.md b/msteams-platform/resources/schema/manifest-schema.md index f70ad7c6658..d4f6a7ae2a3 100644 --- a/msteams-platform/resources/schema/manifest-schema.md +++ b/msteams-platform/resources/schema/manifest-schema.md @@ -38,8 +38,8 @@ The following schema sample shows all extensibility options. "full": "Full description of your app" }, "icons": { - "outline": "%FILENAME-20x20px%", - "color": "%FILENAME-96x96px" + "outline": "%FILENAME-32x32px%", + "color": "%FILENAME-192x192px" }, "accentColor": "%HEX-COLOR%", "configurableTabs": [ @@ -219,8 +219,8 @@ Icons used within the Teams app. The icon files must be included as part of the |Name| Maximum size | Required | Description| |---|---|---|---| -|`outline`|2048 characters|✔|A relative file path to a transparent 20x20 PNG outline icon.| -|`color`|2048 characters|✔|A relative file path to a full color 96x96 PNG icon.| +|`outline`|2048 characters|✔|A relative file path to a transparent 32x32 PNG outline icon.| +|`color`|2048 characters|✔|A relative file path to a full color 192x192 PNG icon.| ## accentColor