Updates from: 10/14/2022 03:30:50
Service Microsoft Docs article Related commit history on GitHub Change details
platform Teams Apps In Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md
Last updated 04/07/2022
Meetings enable collaboration, partnership, informed communication, and shared feedback. The meeting app can deliver a user experience for each stage of the meeting lifecycle. Meeting lifecycle includes pre-meeting, in-meeting, and post-meeting app experience, depending on the attendee's status.
-> [!NOTE]
->
-> * Apps for scheduled public channel meetings are currently available only in [public developer preview](../resources/dev-preview/developer-preview-intro.md).
->
-> * Apps aren't supported in [Public Switched Telephone Network (PSTN)](/microsoftteams/cloud-voice-landing-page#public-switched-telephone-network-connectivity-options) and [end-to-end encrypted Teams calls](https://support.microsoft.com/office/use-end-to-end-encryption-for-teams-calls-1274b4d2-b5c5-4b24-a376-606fa6728a90).
- Teams supports access to apps during meeting for the following meeting types: * [**Scheduled meetings**](https://support.microsoft.com/office/schedule-a-meeting-in-teams-943507a9-8583-4c58-b5d2-8ec8265e04e5#ID0EFBD=Desktop): Meetings scheduled through Teams calendar.
Teams supports access to apps during meeting for the following meeting types:
* [**Group calls**](https://support.microsoft.com/office/start-a-call-from-a-chat-in-teams-f5138c9d-df4c-43d8-9cf6-53400c1a7798): Calls initiated in group chat. * [**Instant meetings**](https://support.microsoft.com/office/start-an-instant-meeting-in-teams-ff95e53f-8231-4739-87fa-00b9723f4ef5): Meetings initiated through **Meet now** button in Teams calendar.
+> [!NOTE]
+>
+> * Apps for scheduled public channel meetings are currently available only in [public developer preview](../resources/dev-preview/developer-preview-intro.md).
+>
+> * Apps aren't supported in the following:
+> * [Public Switched Telephone Network (PSTN) Teams calls](/microsoftteams/cloud-voice-landing-page#public-switched-telephone-network-connectivity-options)
+> * [End-to-end encrypted Teams calls](https://support.microsoft.com/office/use-end-to-end-encryption-for-teams-calls-1274b4d2-b5c5-4b24-a376-606fa6728a90)
+> * [Instant channel meetings](https://support.microsoft.com/office/start-an-instant-meeting-in-teams-ff95e53f-8231-4739-87fa-00b9723f4ef5)
+> * Meetings in [shared channel](https://support.microsoft.com/office/what-is-a-shared-channel-in-teams-e70a8c22-fee4-4d6e-986f-9e0781d7d11d)
+ Users can add apps to the meeting using the **+** option from their Teams meeting window. :::image type="content" source="../assets/images/apps-in-meetings/add-app.png" alt-text="Add an app in meeting" border="true":::
Visit the [Teams store](https://go.microsoft.com/fwlink/p/?LinkID=2183121) and e
> [!NOTE] >
-> * Currently when a third person is added to a one-on-one call, the call is elevated to a group call that means a new session starts. Apps added to the one-on-one call are not available in the group call. However, they can be added again.
->
-> * Currently app experiences are not supported in Teams instant channel meetings.
+> Currently when a third person is added to a one-on-one call, the call is elevated to a group call that means a new session starts. Apps added to the one-on-one call are not available in the group call. However, they can be added again.
The following illustration gives you an idea of the meeting app extensibility features:
platform Personal Apps https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/design/personal-apps.md
# Designing your personal app for Microsoft Teams
-A personal app can be a bot, private workspace, or both. Sometimes it functions like a place to create or view content, other times it offers the user a birdΓÇÖs eye view of everything that's theirs when the app has been configured as a tab in multiple channels.
+A personal app can be a bot, private workspace, or both. Sometimes it functions as a place to create or view content. Other times, it offers the user a birdΓÇÖs eye view of everything that's theirs when the app has been configured as a tab in multiple channels.
To guide your app design, the following information describes and illustrates how people can add, use, and manage personal apps in Teams.
With a private workspace, users can view app content that's meaningful to them i
|-|--| |A|**App attribution**: Your app name.| |B|**Tabs**: Provides navigation for your personal app.|
-|C|**More menu**: Includes additional app options and information.|
+|C|**More menu**: Includes other app options and information.|
|D|**Primary navigation**: Provides navigation to your app other main Teams features.|
+#### **Configure and add multiple actions in NavBar**
+
+You can add multiple actions to the upper right NavBar and build an overflow menu for extra actions in an app.
+
+>[!NOTE]
+> A maximum of five actions can be added in the NavBar, including the overflow menu.
++
+To **Configure and add multiple actions in NavBar**, call [setNavBarMenu](/javascript/api/@microsoft/teams-js/microsoftteams.menus?view=msteams-client-js-1.12.1&preserve-view=true) API. and add the `displayMode enum` property to `MenuItem`. The `displayMode enum` defines how a menu appears in the NavBar. The default value of `displayMode enum` is set to `ifRoom`.
+
+Based on the requirements and space available in the NavBar, set `displayMode enum` considering one of the following.
+
+* If there's room, set `ifRoom = 0` to place an item in the NavBar.
+* If there's no room, set `overflowOnly = 1`, so that item would always be placed in the NavBar's overflow menu but not in the NavBar.
+
+The following is an example of configuring the NavBar with an overflow menu for multiple actions:
+
+```typescript
+const menuItems = [item1, item2, item3, item4, item5]
+microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
+ output(`Clicked ${id}`)
+ return true;
+})
+```
+
+> [!NOTE]
+> The `setNavBarMenu` API doesn't control the **Refresh** button. It appears by default.
++ :::image type="content" source="../../assets/images/personal-apps/mobile-personal-tab-structural-anatomy.png" alt-text="Example shows personal tab's structural anatomy."::: |Counter|Description|
With a private workspace, users can view app content that's meaningful to them i
|A|**App attribution**: Your app logo and name.| |B|**Tabs**: Provides navigation for your personal app.| |C|**Popout view**: Pushes your app content from a parent window to a standalone child window.|
-|D|**More menu**: Includes additional app options and information. (You could alternatively make **Settings** a tab.)|
+|D|**More menu**: Includes other app options and information. (You could alternatively make **Settings** a tab.)|
:::image type="content" source="../../assets/images/personal-apps/personal-tab-structural-anatomy.png" alt-text="This example shows personal tab's structural anatomy.":::
Personal apps can include a bot for one-on-one conversations and private notific
|C|**Bot message**: Bots often send messages and notifications in the form of a card (such as an Adaptive Card).| |D|**Compose box**: Input field for sending messages to the bot.|
+#### Configure back button
+
+When you select the back button in a Teams app, you will return to the Teams platform without navigating inside the app.
+
+To navigate within the app, configure the back button so that when you select the back button, you can go back to previous steps and navigate within the app.
+
+To **Configure back button**, call [registerBackButtonHandler](/javascript/api/@microsoft/teams-js/pages.backstack?view=msteams-client-js-latest&preserve-view=true&branch=pr-en-us-6801&preserve-view=true) API, which handles the functionality of the back button depending on one of the following conditions:
+
+* When `registerBackButtonHandler` is set to `false`, the JavaScript SDK calls the `navigateBack` API and the Teams platform handles the back button.
+* When `registerBackButtonHandler` is set to `true`, the app handles the functionality of back button (you can go back to previous steps and navigate within the app), and the Teams platform takes no further actions.
+
+The following is an example of configuring the back button:
+
+```typescript
+microsoftTeams.registerBackButtonHandler(() => {
+ const selectOption = registerBackReturn.options[registerBackReturn.selectedIndex].value
+ var isHandled = false
+ if (selectOption == 'true')
+ isHandled = true;
+ output(`onBack isHandled ${isHandled}`)
+ return isHandled;
+})
+```
+ #### Desktop :::image type="content" source="../../assets/images/personal-apps/personal-bot-anatomy.png" alt-text="Example shows the anatomy of the personal bot component.":::
Unless you created your app specifically for Teams, you probably have features t
These other design guidelines may help depending on the scope of your personal app: * [Designing your tab](../../tabs/design/tabs.md)
-* [Designing you bot](../../bots/design/bots.md)
+* [Designing your bot](../../bots/design/bots.md)
+* [registerBackButtonHandler](/javascript/api/@microsoft/teams-js/pages.backstack?view=msteams-client-js-latest&preserve-view=true&branch=pr-en-us-6801&preserve-view=true)
+* [DisplayMode enum](/javascript/api/@microsoft/teams-js/menus.displaymode?view=msteams-client-js-latest&preserve-view=true)
platform Tabs Mobile https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/design/tabs-mobile.md
The following table describes tab availability and behavior when the app is list
|Channel and group tab|Yes|Tab opens in the device's default browser instead of the Teams mobile client using your app's `websiteUrl` configuration, which must also be included in your source code's `setSettings()` [function](/microsoftteams/platform/tabs/how-to/using-teams-client-sdk#settings-namespace). However, users can view the tab in the Teams mobile client by selecting **More** next to the app and choosing **Open**, which triggers your appΓÇÖs `contentUrl` configuration.| |Personal app|No|Not applicable|
+> [!NOTE]
+> The bot messages are shown in the chat section if a mobile app has both the bot and tab capabilities.
+>
+> When you select **Chat** of the bot app and select **More (...)**, you can't see the tab capability of that app in the list. However, if you select **More (...)** from the lower right of the **Chat** section, you can view the tab app with a link to the bot app capability of that app.
+ ### Apps not on Teams store If you are sideloading your app or publishing to an organization's app catalog, tab behavior is the same as Teams store apps approved by Microsoft for mobile.
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md
Microsoft Teams platform features that are available to all app developers.
**2022 October**
+* ***October 13, 2022***: [Configure NavBar and create an overflow menu for multiple actions](concepts/design/personal-apps.md#configure-and-add-multiple-actions-in-navbar).
+* ***October 13, 2022***: [Configure back button of an app](concepts/design/personal-apps.md#configure-back-button).
* ***October 12, 2022***: [Apps are supported in instant meetings, one-on-one, and group calls.](apps-in-teams-meetings/teams-apps-in-meetings.md) * ***October 12, 2022***: [Live Share canvas](apps-in-teams-meetings/teams-live-share-canvas.md)