-| Feature | Share to stage | Screen share content to stage |

-* **Share app content to stage**: Share specific parts of the app to meeting stage from the meeting side panel in a meeting. [TeamsJS library](/javascript/api/@microsoft/teams-js/meeting)

-* **Get app content stage sharing state**: Fetch information about app's sharing state on the meeting stage. [TeamsJS library](/javascript/api/@microsoft/teams-js/meeting.iappcontentstagesharingstate)

-* **Get app content stage sharing capabilities**: Fetch the app's capabilities for sharing to the meeting stage. [TeamsJS library](/javascript/api/@microsoft/teams-js/meeting.iappcontentstagesharingcapabilities)

-#### Configure deep link to a tab using TeamsJS

-For more information about navigation within a tab app, see [navigate within a tab app](../../tabs/how-to/tab-navigation.md). For more information about using the pages capability, see [pages.navigateToApp()](/javascript/api/@microsoft/teams-js/pages?view=msteams-client-js-latest&preserve-view=true#@microsoft-teams-js-pages-navigatetoapp) and the [pages](/javascript/api/@microsoft/teams-js/pages?view=msteams-client-js-latest&preserve-view=true) namespace for other navigation options. If needed directly open a deep link using the [app.openLink()](/javascript/api/@microsoft/teams-js/app?view=msteams-client-js-latest&preserve-view=true#@microsoft-teams-js-app-openlink) function.

-* [To share content to stage in meetings](#generate-a-deep-link-to-share-content-to-stage-in-meetings)

-## Generate a deep link to share content to stage in meetings

-You can generate a deep link to [share the app to stage](~/apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md#share-entire-app-to-stage) and to start or join a meeting.

-For deep links to share content to stage, see [deep link to share content to stage in meetings](~/concepts/build-and-test/share-in-meeting.md#generate-a-deep-link-to-share-content-to-stage-in-meetings).

-During the meeting, when a user selects the **Share in meeting** button from the third-party web app or document, it launches a deep link to the meeting stage and opens the app as a web view in the meeting stage. For the meeting participants to interact with third-party web app or document, they must have meeting extension of the app or document installed in their Teams client. If they don't have meeting extension, Teams prompts participants to install the meeting extension.

-When you select the **Share in meeting** button, it launches a deep link to the meeting stage. The following is the deep link format:

-For more information, see [generate a deep link to share content to stage in meetings](#generate-a-deep-link-to-share-content-to-stage-in-meetings).

-The following are three different methods to enable share in meeting. You can use one of the methods depending on how much control you want on the **Share in meeting** buttons displayed on your web page:

-You can scan your web page to locate any HTML elements with the class name of type `teams-share-in-meeting-button` and dynamically generate **Share in meeting** buttons in your page.

-To add a deep link to share content on stage, you need to have an app context. The app context allows the Teams client to fetch the app manifest and check if the sharing on stage is possible. The following is an example of an app context:

-`{ "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view", "appId": "9ec80a73-1d41-4bcb-8190-4b9eA9e29fbb" , "useMeetNow": false }`

-The query parameters for the app context are:

-* `appID`: This is the ID that can be obtained from the app manifest.

-* `appSharingUrl`: The URL, which needs to be shared on stage should be a valid domain defined in the app manifest. If the URL isn't a valid domain, an error dialog appears to provide the user with a description of the error.

-* `useMeetNow`: This includes a Boolean parameter that can be either true or false.

- * **True**: When the `useMeetNow` value is true and if there's no ongoing meeting, a new Meet now meeting will be initiated. When there's an ongoing meeting, this value will be ignored.

- * **False**: The default value of `useMeetNow` is false, which means that when a deep link is shared to stage and there's no ongoing meeting, a calendar pop-up will appear. However, you can share directly during a meeting.

-Ensure that all the query parameters are properly URI encoded and the app context has to be encoded twice in the final URL. Following is an example:

-```javascript

-const appContext= JSON.stringify({

- "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view",

- "appId": "9cc80a93-1d41-4bcb-8170-4b9ec9e29fbb",

- "useMeetNow": false

-});

-const encodedContext = encodeURIComponent(appContext).replace(/'/g,"%27").replace(/"/g,"%22");

-const encodedAppContext = encodeURIComponent(encodedContext).replace(/'/g,"%27").replace(/"/g,"%22");

-```

-A deep link can be launched either from the Teams web or from the Teams desktop or mobile client.

-* **Teams web**: Use the following format to launch a deep link from the Teams web to share content on stage:

- `msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}`

- Example: `https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

- |Deep link|Format|Example|

- ||||

- |To share the app and open Teams calendar, when `useMeeetNow` is **false**, default.|`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`|`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`|

- |To share the app and initiate instant meeting, when `useMeeetNow` is **true**.|`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`|`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`|

-* **Teams desktop or mobile client**: Use the following format to launch a deep link from the Teams desktop or mobile client to share content on stage:

- `msteams:/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink&appContext={encoded app context}`

- Example: `msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

- |Deep link|Format|Example|

- ||||

- |To share the app and open Teams calendar, when `useMeeetNow` is **false**, default.|`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`|`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`|

- |To share the app and initiate instant meeting, when `useMeeetNow` is **true**.|`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`|`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`|

-The query parameters are:

-* `deepLinkId`: Any identifier used for telemetry correlation.

-* `fqdn`: `fqdn` is an optional parameter, which can be used to switch to an appropriate environment of a meeting to share an app on stage. It supports scenarios where a specific app share happens in a particular environment. The default value of `fqdn` is enterprise URL and possible values are `Teams.live.com` for Teams for Life, `teams.microsoft.com`, or `teams.microsoft.us`.

-To share the entire app to stage, in the app manifest, you must configure `meetingStage` and `meetingSidePanel` as frame contexts, see [app manifest](../../resources/schem). Otherwise, meeting attendees may not be able to see the content on stage.

-Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages. When you select Share to Teams button, it launches the Share to Teams experience in a pop-up window. This allows you to share a link directly to any person or Microsoft Teams channel without switching the context.

-The following image displays the pop-up window for Share to Teams preview experience:

-> * Use of Freemium or guest accounts is not supported.

-You can also add link unfurling for the links shared through Share to Teams button hosted in web app, personal app or tab. For more information, see [link unfurling](~/messaging-extensions/how-to/link-unfurling.md).

-The following image displays the link unfurling experience through Share to Teams button:

-This article guides you on how to create and embed a Share to Teams button for your website, craft your website preview, and extend Share to Teams for Education.

-See the following video to learn how to embed Share to Teams button:

-## Embed a Share to Teams button

-1. Add an HTML element on your webpage with the `teams-share-button` class attribute and the link to share in the `data-href` attribute.

- After completing this, the Teams icon gets added to your website. The following image shows the Share to Teams icon:

- :::image type="content" source="~/assets/icons/share-to-teams-icon.png" alt-text="Share to Teams icon":::

-1. Alternatively, if you want a different icon size for the Share to Teams button, use the `data-icon-px-size` attribute.

- <div

- class="teams-share-button"

- data-href="https://<link-to-be-shared>"

- data-icon-px-size="64">

- </div>

-1. If the shared link requires user authentication, and the URL preview from your link to be shared doesn't render well in Teams, then you can disable the URL preview by adding the `data-preview` attribute set to `false`.

- <div

- class="teams-share-button"

- data-href="https://<link-to-be-shared>"

- data-preview="false">

- </div>

-1. To display a message of your choice in compose box, you can define your text in `data-msg-text` attribute.

- ```html

- <div

- class="teams-share-button"

- data-href="https://<link-to-be-shared>"

- data-msg-text="<default-message-to-be-populated-in-compose-box>"

- data-preview="false">

- </div>

- ```

-1. If your page dynamically renders content, you can use the `shareToMicrosoftTeams.renderButtons()` method to force **Share** to render at the appropriate place in the pipeline.

-When your website is shared to Teams, the card that is inserted into the selected channel contains a preview of your website. You can control the behavior of this preview by ensuring the appropriate meta-data is added to the website being shared, such as the `data-href` URL.

-|Thumbnail Image| none. |`<meta property="og:image" content="http://example.com/image.jpg">`|

-## Share to Teams for Education

-For teachers using the Share to Teams button, there's an additional option to `Create an Assignment` that enables you to quickly create an assignment in the chosen Team, based on the shared link. The following image displays Share to Teams for education:

-## Full launcher.js definition

-| Property | HTML attribute | Type | Default | Description |

-| -- | - | | - | - |

-| href | `data-href` | string | n/a | The href of the content to share. |

-| preview | `data-preview` | Boolean (as a string) | `true` | Whether or not to show a preview of the content to share. |

-| iconPxSize | `data-icon-px-size` | number (as a string) | `32` | The size in pixels of the Share to Teams button to render. |

-| msgText | `data-msg-text` | string | n/a | Default text to be inserted before the link in the message compose box. Maximum number of characters is 200. |

-| assignInstr | `data-assign-instr` | string | n/a | Default text to be inserted in the assignments "Instructions" field. Maximum number of characters is 200. |

-| assignTitle | `data-assign-title` | string | n/a | Default text to be inserted in the assignments "Title" field. Maximum number of characters is 50. |

-### Methods

-**`shareToMicrosoftTeams.renderButtons(options)`**

-`options` (optional): `{ elements?: HTMLElement[] }`

-All share buttons are rendered on the page. If an optional `options` object is supplied with a list of elements, those elements are rendered into share buttons.

-### Set default form values

-#### Example

- Default form values are given in the following example:

-Share to Teams is a button enabled on any web app, personal app, or tab that allows users to share content to other users in Teams.

-You can also decide the placement of the Share to Teams button on the app. Users can pin the crucial content and refer to it while collaborating with Teams.

-You can enable Share to Teams button in the following scopes:

-You can embed the Share to Teams button on the web apps that allows users to share the content from the web apps to any chat, group chat, or channel in Teams, without switching the context.

-You can embed the Share to Teams button in the personal app or tab hosted inside Teams that allows users to share the content from the personal app or tab to any chat, group chat, or channel in Teams, without switching the context.

-* [Build tabs with Adaptive Cards](../how-to/build-adaptive-card-tabs.md)

-## Next step

-> [!div class="nextstepaction"]

-> [Build tabs with Adaptive Cards](~/tabs/how-to/build-adaptive-card-tabs.md)

-description: Learn to build tabs using Adaptive Cards where front end is rendered with Adaptive Cards, backend is powered by a bot. Explore invoke activities and handle submits.

-# Build tabs with Adaptive Cards

-> [!WARNING]

-> Adaptive Card tabs aren't available in the new Teams client. The Classic Teams client is expected to be deprecated by March 31, 2024. If your app is using Adaptive Card tabs, we recommend to rebuild the tab as a web-based tab. For more information, see [Build tabs for Teams](../what-are-tabs.md).

-When developing a tab using the traditional method, you might run into these issues:

-* HTML and CSS considerations

-* Slow load times

-* iFrame constraints

-* Server maintenance and costs

-You can build Adaptive Card tabs in Teams. Instead of embedding web content in an iFrame, you can render Adaptive Cards to a tab. While the front end is rendered with Adaptive Cards, the backend is powered by a bot. The bot is responsible for accepting requests and responding appropriately with the Adaptive Card that is rendered.

-You can build your tabs with ready-made user interface (UI) building blocks native on desktop, web, and mobile. This article helps you understand the changes required to be made to the app manifest. The article also identifies how the invoke activity requests and sends information in tab with Adaptive Cards, and its effect on the modal dialog (referred as task module in TeamsJS v1.x) workflow.

-The following image shows build tabs with Adaptive Cards in desktop and mobile:

-## Prerequisites

-Before you start using Adaptive Cards to build tabs, you must:

-* Be familiar with [bot development](../../bots/what-are-bots.md), [Adaptive Cards](https://adaptivecards.io/), and [modal dialogs](../../task-modules-and-cards/task-modules/task-modules-bots.md) in Teams.

-* Have a bot running in Teams for your development.

-## Changes to app manifest

-Personal apps that render tabs must include a `staticTabs` array in their app manifest. Adaptive Card tabs are rendered when the `contentBotId` property is provided in the `staticTab` definition. Static tab definitions must contain either a `contentBotId`, specifying an Adaptive Card tab or a `contentUrl`, specifying a typical hosted web content tab experience.

-> [!NOTE]

-> The `contentBotId` property is available in manifest version 1.9 or later.

-Provide the `contentBotId` property with the `botId` that the Adaptive Card tab must communicate with. The `entityId` configured for the Adaptive Card tab is sent in the `tabContext` parameter of each invoke request, and can be used to differentiate Adaptive Card Tabs that are powered by the same bot. For more information about other static tab definition fields, see [manifest schema](../../resources/schem#statictabs).

-Following is a sample Adaptive Card tab manifest:

-```json

-{

- "$schema": "https://raw.githubusercontent.com/OfficeDev/microsoft-teams-app-schema/preview/DevPreview/MicrosoftTeams.schema.json",

- "manifestVersion": "1.9",

- "id": "00000000-0000-0000-0000-000000000000",

- "version": "0.0.1",

- "developer": {

- "name": "Contoso",

- "websiteUrl": "https://contoso.example.com",

- "privacyUrl": "https://contoso.example.com/privacy.html",

- "termsOfUseUrl": "https://contoso.example.com/terms.html"

- },

- "name": {

- "short": "Contoso",

- "full": "Contoso Home"

- },

- "description": {

- "short": "Add short description here",

- "full": "Add full description here"

- },

- "icons": {

- "outline": "icon-outline.png",

- "color": "icon-color.png"

- },

- "accentColor": "#D85028",

- "configurableTabs": [],

- "staticTabs": [

- {

- "entityId": "homeTab",

- "name": "Home",

- "contentBotId": "00000000-0000-0000-0000-000000000000",

- "scopes": ["personal"]

- },

- {

- "entityId": "moreTab",

- "name": "More",

- "contentBotId": "00000000-0000-0000-0000-000000000000",

- "scopes": ["personal"]

- }

- ],

- "connectors": [],

- "composeExtensions": [],

- "permissions": ["identity", "messageTeamMembers"],

- "validDomains": [

- "contoso.example.com",

- "token.botframework.com"

- ]

-}

-```

-## Invoke activities

-Communication between your Adaptive Card tab and your bot is done through `invoke` activities. Each `invoke` activity has a corresponding **name**. Use the name of each activity to differentiate each request. `tab/fetch` and `tab/submit` are the activities covered in this section.

-> [!NOTE]

->

-> * Bots need to send all the responses to [service URL](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0&preserve-view=true#base-uri). Service URL is received as part of incoming `activity` payload.

-> * The invoke payload size has increased to 80kb.

-### Fetch Adaptive Card to render to a tab

-`tab/fetch` is the first invoke request that your bot receives when a user opens an Adaptive Card tab. When your bot receives the request, it either sends a tab **continue** response or a tab **auth** response.

-The **continue** response includes an array for **cards**, which is rendered vertically to the tab in the order of the array.

-> [!NOTE]

-> For more information on **auth** response, see [authentication](#authentication).

-The following code provides examples of `tab/fetch` request and response:

-**`tab/fetch` request**

-```json

-// tab/fetch POST request: agents/{botId}/invoke

-{

- "name": "tab/fetch",

- "value: {

- "tabContext": {

- "tabEntityId": "{tab_entity_id}"

- },

- "context": {

- "theme": "default"

- }

- },

- "conversation": {

- "id": "{generated_conversation_id}"

- },

- "imdisplayname": "{user_display_name}"

-}

-```

-**`tab/fetch` response**

-```json

-// tab/fetch **continue** POST response:

-{

- "tab": {

- "type": "continue",

- "value": {

- "cards": [

- {

- "card": adaptiveCard1,

- },

- {

- "card": adaptiveCard2,

- },

- {

- "card": adaptiveCard3

- }

- ]

- },

- },

- "responseType": "tab"

-}

-```

-### Handle submits from Adaptive Card

-After an Adaptive Card is rendered in the tab, it can respond to user interactions. This response is handled by the `tab/submit` invoke request.

-When a user selects a button on the Adaptive Card tab, the `tab/submit` request is triggered to your bot with the corresponding data through the `Action.Submit` function of Adaptive Card. The Adaptive Card data is available through the data property of the `tab/submit` request. You receive either of the following responses to your request:

-* An HTTP status code `200` response with no body. An empty 200 response results in no action taken by the client.

-* The standard `200` tab **continue** response, as explained in [fetch Adaptive Card](#fetch-adaptive-card-to-render-to-a-tab). A tab **continue** response triggers the client to update the rendered Adaptive Card tab with the Adaptive Cards provided in the cards array of the **continue** response.

-The following code provides examples of `tab/submit` request and response:

-**`tab/submit` request**

-```json

-// tab/submit POST request: agents/{botId}/invoke:

-{

- "name": "tab/submit",

- "value": {

- "data": {

- "type": "tab/submit",

- //...<data properties>

- },

- "context": {

- "theme": "default"

- },

- "tabContext": {

- "tabEntityId": "{tab_entity_id}"

- },

- },

- "conversation": {

- "id": "{generated_conversation_id}"

- },

- "imdisplayname": "{user_display_name}"

-}

-```

-**`tab/submit` response**

-```json

-//tab/fetch **continue** POST response:

-{

- "tab": {

- "type": "continue",

- "value": {

- "cards": [

- {

- "card": adaptiveCard1,

- },

- {

- "card": adaptiveCard2,

- }

- ]

- },

- },

- "responseType": "tab"

-}

-```

-## Understand dialog workflow

-Modal dialogs also use Adaptive Cards to invoke `task/fetch` and `task/submit` requests and responses. For more information, see [using dialogs in Microsoft Teams bots](../../task-modules-and-cards/task-modules/task-modules-bots.md).

-With the introduction of Adaptive Card tab, there's a change in how the bot responds to a `task/submit` request. If you're using an Adaptive Card tab, the bot responds to the `task/submit` invoke request with the standard tab **continue** response, and closes the dialog. The Adaptive Card tab is updated by rendering the new list of cards provided in the tab **continue** response body.

-### Invoke `task/fetch`

-The following code provides examples of `task/fetch` request and response:

-**`task/fetch` request**

-```json

-// task/fetch POST request: agents/{botId}/invoke

-{

- "name": "task/fetch",

- "value": {

- "data": {

- "type": "task/fetch"

- },

- "context": {

- "theme": "default",

- },

- "tabContext": {

- "tabEntityId": "{tab_entity_id}"

- }

- },

- "imdisplayname": "{user_display_name}",

- "conversation": {

- "id": "{generated_conversation_id}"

- }

-}

-```

-**`task/fetch` response**

-```json

-// task/fetch POST response: agents/{botId}/invoke

-{

- "task": {

- "value": {

- "title": "Ninja Cat",

- "height": "small",

- "width": "small",

- "card": {

- "contentType": "application/vnd.microsoft.card.adaptive",

- "content": adaptiveCard,

- }

- },

- "type": "continue"

- },

- "responseType": "task"

-}

-```

-### Invoke `task/submit`

-The following code provides examples of `task/submit` request and response:

-**`task/submit` request**

-```json

-// task/submit POST request: agent/{botId}/invoke:

-{

- "name": "task/submit",

- "value": {

- "data": {serialized_data_object},

- "context": {

- "theme": "default"

- },

- "tabContext": {

- "tabEntityId": "{tab_entity_id}"

- },

- },

- "conversation": {

- "id": "{generated_conversation_id}"

- },

- "imdisplayname": "{user_display_name}",

-}

-```

-**`task/submit` tab response type**

-```json

-// tab/fetch **continue** POST response:

-{

- "task":{

- "value": {

- "tab": {

- "type": "continue",

- "value": {

- "cards": [

- {

- "card": adaptiveCard1

- },

- {

- "card": adaptiveCard2

- }

- ]

- }

- }

- },

- "type": "continue"

- },

- "responseType": "task"

-}

-```

-## Authentication

-In the previous sections, you've seen that most of the development paradigms can be extended from the dialog requests and responses into tab requests and responses. When it comes to handling authentication, the workflow for Adaptive Card tab follows the authentication pattern for message extensions. For more information, see [add authentication](../../messaging-extensions/how-to/add-authentication.md).

-`tab/fetch` requests can have either a **continue** or an **auth** response. When a `tab/fetch` request is triggered and receives a tab **auth** response, the sign in page is shown to the user.

-**To get an authentication code through `tab/fetch` invoke**

-1. Open your app. The sign in page appears.

- > [!NOTE]

- > The app logo is provided through the `icon` property defined in the app manifest. The title appearing after the logo is defined in the `title` property returned in the tab **auth** response body.

-1. Select **Sign in**. You're redirected to the authentication URL provided in the `value` property of the **auth** response body.

-1. A pop-up window appears. This pop-up window hosts your web page using the authentication URL.

-1. After you sign in, close the window. An **authentication code** is sent to the Teams client.

-1. The Teams client then reissues the `tab/fetch` request to your service, which includes the authentication code provided by your hosted web page.

-### `tab/fetch` authentication data flow

-The following image provides an overview of how the authentication data flow works for a `tab/fetch` invoke.

-**`tab/fetch` auth response**

-The following code provides an example of `tab/fetch` auth response:

-```json

-// tab/auth POST response (openURL)

-{

- "tab": {

- "type": "auth",

- "suggestedActions":{

- "actions":[

- {

- "type": "openUrl",

- "value": "https://example.com/auth",

- "title": "Sign in to this app"

- }

- ]

- }

- }

-}

-```

-### Example

-The following code shows a reissued request example:

-```json

-{

- "name": "tab/fetch",

- "type": "invoke",

- "timestamp": "2021-01-15T00:10:12.253Z",

- "channelId": "msteams",

- "serviceUrl": "https://smba.trafficmanager.net/amer/",

- "from": {

- "id": "{id}",

- "name": "John Smith",

- "aadObjectId": "00000000-0000-0000-0000-000000000000"

- },

- "conversation": {

- "tenantId": "{tenantId}",

- "id": "tab:{guid}"

- },

- "recipients": {

- "id": "28:00000000-0000-0000-0000-000000000000",

- "name": "ContosoApp"

- },

- "entities": [

- {

- "locale": "en-us",

- "country": "US",

- "platform": "Windows",

- "timezone": "America/Los_Angeles",

- "type": "clientInfo"

- }

- ],

- "channelData": {

- "tenant": { "id": "00000000-0000-0000-0000-000000000000" },

- "source": { "name": "message" }

- },

- "value": {

- "tabContext": { "tabEntityId": "homeTab" },

- "state": "0.43195668034524815"

- },

- "locale": "en-US",

- "localTimeZone": "America/Los_Angeles"

-}

-```

-## Code sample

-|**Sample name** | **Description** |**.NET** | **Node.js** | **Manifest**|

-|-|--|--|--|--|

-| Show Adaptive Cards in Teams tab | Microsoft Teams tab sample code, which demonstrates how to show Adaptive Cards in Teams. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/csharp)| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/nodejs) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-adaptive-cards/csharp/demo-manifest/tab-adaptive-card.zip)|

-## Step-by-step guide

-Follow the [step-by-step](../../sbs-tab-with-adaptive-cards.yml) guide to build tab with Adaptive Cards.

-## Next step

-> [!div class="nextstepaction"]

-> [Tabs link unfurling and Stageview](~/tabs/tabs-link-unfurling.md)

-## See also

-* [Build tabs for Teams](../what-are-tabs.md)

-* [Tabs on mobile](../design/tabs-mobile.md)

-* [Cards](../../task-modules-and-cards/what-are-cards.md)

-* [Use dialogs in tabs](../../task-modules-and-cards/task-modules/task-modules-tabs.md)

-* [Form completion feedback](../../task-modules-and-cards/cards/cards-actions.md#form-completion-feedback)

-* [Microsoft Teams update](../../resources/teams-updates.md)

-description: Learn how to create conversational tabs and subentities in Microsoft Teams and functions such as start, continue, enhance, and close a conversation.

-# Create conversational tabs

-Conversational subentities provide a way to allow users to have conversations about subentities in your tab. Such as specific task, patient, and sales opportunity, instead of discussing the entire tab, also known as entity. A traditional channel or configurable tab allows the user to have a conversation about a tab, but the user requires a more focused conversation. The requirement for a more focused conversation can arise either, if there is too much content to have a centralized discussion or because the content changed over time, making the conversation irrelevant to the content shown. Conversational subentities provide a much more focused conversation experience for dynamic tabs.

-Conversational subentities are only supported in channels. They can be used from a personal or static tab to create or continue conversations in tabs that are already pinned to a channel. The static tab is useful if you want to provide one location for a user to view and access conversations happening across multiple channels.

-## Prerequisites

-To support conversational subentities, your tab web application must have the ability to store a mapping between subentities Γåö conversations in a backend database. The `conversationId` is provided, but you must store that `conversationId` and return it to Teams in order for users to continue the conversation.

-## Start a new conversation

-To start a new conversation, use the `openConversation()` function. Starting and continuing a conversation are all handled by this method. The inputs to the function change depending on which action you want to take, from the user's perspective, this opens the conversation panel to the right of the screen, either to initiate a conversation or continue a conversation.

-``` javascript

-microsoftTeams.conversations.openConversation(openConversationRequest);

-```

-**openConversation** takes the following inputs to start a conversation in a channel:

-* **subEntityId**: The ID of your specific subentity. For example, task-123.

-* **entityId**: The ID of the tab instance when it was created. The ID is important to refer back to the same tab instance.

-* **channelId**: The channel in which the tab instance resides.

- > [!NOTE]

- > The **channelId** is optional for channel tabs. However, it is recommended if you want to keep your implementation across channel and static tabs the same.

-* **title**: The title that is shown to the user in the chat panel.

-Most of these values can also be retrieved from the [`app.getContext()`](/javascript/api/@microsoft/teams-js/app#@microsoft-teams-js-app-getcontext) API (`microsoftTeams.getContext()` in TeamsJS v1). For more information, see [PageInfo interface](/javascript/api/@microsoft/teams-js/app.pageinfo).

-```javascript

-microsoftTeams.conversations.openConversation({ΓÇ£subEntityIdΓÇ¥:ΓÇ¥task-1ΓÇ¥, ΓÇ£entityIdΓÇ¥: ΓÇ£tabInstanceId-1ΓÇ¥, ΓÇ£channelIdΓÇ¥: ΓÇ¥19:baa6e71f65b948d189bf5c892baa8e5a@thread.skypeΓÇ¥, ΓÇ£titleΓÇ¥: "Task TitleΓÇ¥});

-```

-The following image shows the conversation panel:

-If the user starts a conversation, it's important to listen for the callback of that event to retrieve and save the **conversationId**:

-```javascript

-ΓüámicrosoftTeams.conversations.openConversation({

- ...,

- onStartConversation: (conversationResponse) => {

- Γüá// console.log(conversationResponse)

- },

-});

-```

-The `conversationResponse` object contains information related to the conversation that was started. It's recommended that you save all the properties of this response object for later use.

-## Continue a conversation

-After a conversation starts, subsequent calls to `openConversation()` require, that you also provide the same inputs as in [start a new conversation](#start-a-new-conversation), but also include the **conversationId**. The conversation panel opens for the users with the appropriate conversation in view. Users can see new or incoming messages in real-time.

-The following image shows the conversation panel with the appropriate conversation:

-## Enhance a conversation

-It's important that your tab includes [deep links to your subentity](~/concepts/build-and-test/deep-links.md). For example, user selecting the tab chiclet deep link from the channel conversation. The expected behavior is to receive the deep link, open that subentity, and then open the conversation panel for that subentity.

-To support conversational subentities from your personal or static tab, you don't have to change anything in your implementation. We only support starting or continuing conversations from channel tabs that are already pinned. Supporting static tabs allows you to provide a single location for your users to interact with all your subentities. It's important that you save the `subEntityId`, `entityId`, and `channelId` when your tab is originally created in a channel to have the right properties when opening the conversation view in a static tab.

-## Close a conversation

-You can manually close the conversation view by calling the `closeConversation()` function.

-```javascript

-microsoftTeams.conversations.closeConversation();

-```

-You can also listen for an event when the users select **Close (X)** in the conversation view.

-```javascript

-ΓüámicrosoftTeams.conversations.openConversation({

- ...,

- onCloseConversation: (conversationResponse) => {

- Γüá// console.log(conversationResponse)

- },

-});

-```

-## Code sample

-| Sample name | Description | .NET |Node.js|Manifest|

-|-|-||-|-|

-|Create Conversational tab| Microsoft Teams tab sample app for demonstrating create conversation tab. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/nodejs) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-conversations/csharp/demo-manifest/tab-conversations.zip)|

-## See also

-* [Build tabs for Teams](../what-are-tabs.md)

-* [Create a personal tab](create-personal-tab.md)

-* [Create a channel tab or group tab](create-channel-group-tab.md)

-* [Build tabs with Adaptive Cards](build-adaptive-card-tabs.md)

-* [Tabs on mobile](~/tabs/design/tabs-mobile.md)

-description: Create custom channel, group tabs with Node.js, ASP.NET Core, MVC. Build apps, packages, run secret tunnels, upload to Teams, and develop your first Blazor app.

-# Create a channel tab or group tab

-Channel or group tabs deliver content to channels and group chats, which help to create collaborative spaces around dedicated web-based content.

-Ensure that you've all the [prerequisites](~/tabs/how-to/tab-requirements.md) to build your channel or group tab.

-## Create a custom channel or group tab with Node.js

-## Generate your application with a channel or group tab

-1. At the command prompt, create a new directory for your channel or group tab.

-1. Follow the directions for adding a tab. There's a custom configuration dialog for your channel or group tab.

- Your channel or group tab is successfully created and added in Teams.

-## Create a custom channel or group tab with ASP.NET Core

-## Generate your application with a channel or group tab

- Your channel or group tab is successfully created and added in Teams.

-## Create a custom channel or group tab with ASP.NET Core MVC

-## Generate your application with a channel or group tab

- Your channel or group tab is successfully created and added in Teams.

-* [Build tabs with Adaptive Cards](build-adaptive-card-tabs.md)

-# Create a personal tab

-Personal tabs, along with personally scoped bots, are part of personal apps and are scoped to a single user. They can be pinned to the left pane for easy access.

-Ensure that you've all the [prerequisites](~/tabs/how-to/tab-requirements.md) to build your personal tab.

-## Create a personal tab with Node.js

-Following are the steps to create a personal tab:

-1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab)

-1. [Add a content page to the personal tab](#add-a-content-page-to-the-personal-tab)

-1. [Establish a secure tunnel to your personal tab](#establish-a-secure-tunnel-to-your-tab)

-### Generate your application with a personal tab

-1. At the command prompt, create a new directory for your personal tab.

-### Add a content page to the personal tab

-Create a content page and update the existing files of the personal tab application:

-1. Browse `http://localhost:3007/<yourDefaultAppNameTab>/personal.html`, to view your personal tab.

- :::image type="content" source="~/assets/images/tab-images/addingpersonaltab.png" alt-text="Adding your personal tab":::

-1. In the left pane of Teams, select ellipses &#x25CF;&#x25CF;&#x25CF; and then choose your uploaded app to view your personal tab.

- Your personal tab is successfully created and added in Teams. You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams.

-## Create a personal tab with ASP.NET Core

-Following are the steps to create a personal tab:

-1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab-1)

-### Generate your application with a personal tab

- Your personal tab is successfully created and added in Teams. You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams.

-## Create a personal tab with ASP.NET Core MVC

-Following are the steps to create a personal tab:

-1. [Generate your application with a personal tab](#generate-your-application-with-a-personal-tab-2)

-### Generate your application with a personal tab

- Your personal tab is successfully created and added in Teams. You can also [reorder](#reorder-static-personal-tabs) your personal tab in Teams.

-After project creation, you've the components to build a basic personal app. You can view the project directory structure in the **Solution Explorer** pane of the Visual Studio.

-## Reorder static personal tabs

-* [Build tabs with Adaptive Cards](build-adaptive-card-tabs.md)

-For more information on how to create and add a content page to a personal tab, see [add a content page to personal tab](../create-personal-tab.md#add-a-content-page-to-the-personal-tab).

-description: Learn about options for navigating between tabs using the Microsoft Teams JavaScript client library (TeamsJS) and how to configure back button navigation.

-# Navigate within a tab app

-The Microsoft Teams JavaScript client library (TeamsJS) provides support for navigation within a tab. This article discusses the options available, which include types of navigation such as between tabs within the app or through use of Teams UI components and the back button.

-Tabs provide a great way to enhance the Microsoft Teams experience. You can provide users access to your web application right within Teams using tabs, without having to sign in again. For more information about tabs, and how you can extend personal tabs across Microsoft 365 products, see [Build tabs for Teams](~/tabs/what-are-tabs.md) and [Extend a Teams personal tab across Microsoft 365](~/m365-apps/extend-m365-teams-personal-tab.md).

-## Navigate between tabs

-The [pages](/javascript/api/@microsoft/teams-js/pages) capability of the TeamsJS library provides support for navigation between tabs within an app. Specifically, the [`pages.currentApp`](/javascript/api/@microsoft/teams-js/pages.currentapp) namespace offers a function `navigateTo(NavigateWithinAppParams)` to allow navigation to a specific tab within the current app and a function `navigateToDefaultPage()` to navigate to the first tab defined in the app's manifest.

-The following code illustrates how to navigate to a specific page:

-```typescript

-if (pages.currentApp.isSupported()) {

- const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId: <subPageId>});

- navPromise.

- then((result) => {/*Successful navigation*/}).

- catch((error) => {/*Failed navigation*/});

-}

-else {/*Handle situation where capability isn't supported*/

- const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});

- navPromise.

- then((result) => {/*Successful navigation*/}).

- catch((error) => {/*Failed navigation*/});

-}

-```

-The following code illustrates how to navigate to the app's default tab:

-```typescript

-if (pages.currentApp.isSupported()) {

- const navPromise = pages.currentApp.navigateToDefaultPage();

- navPromise.

- then((result) => {/*Successful navigation*/}).

- catch((error) => {/*Failed navigation*/});

-}

-else {/*Handle situation where capability isn't supported*/}

-```

-> [!NOTE]

-> The tab app navigation is supported only in [new Teams client](/microsoftteams/platform/resources/teams-updates).

-Use the [pages.navigateToApp()](/javascript/api/%40microsoft/teams-js/pages#@microsoft-teams-js-pages-navigatetoapp) function or [deep links](~/concepts/build-and-test/deep-link-application.md#configure-deep-link-to-a-tab-using-teamsjs) for tab app navigation.

-## Configure back button navigation

-When an app has multiple tabs, a user can use the Microsoft 365 host app's back button to go backwards through the navigational history. However, the history doesn't include the actions a user performs within a tab. If you want to enhance the back button experience, you can maintain your own internal navigation stack and configure a custom handler for back button selections. This can be accomplished through the `registerBackButtonHandler()` function in the [`pages.backStack`](/javascript/api/@microsoft/teams-js/pages.backstack) namespace.

-After you register the handler, it helps you to address the navigational request before the system takes action. If the handler is able to manage the request, it should return `true` so that the system knows no further action is necessary. If the internal stack is empty, it should return `false` so that the system can call the `navigateBack()` function instead and take the appropriate action.

-## Return focus to host app

-After the user starts using elements within a tab, by default, the focus remains with the elements of your iFrame until the user selects outside of it. If the iFrame is a part of the user navigating with keyboard shortcuts (the Tab key or the F6 key), you can focus on the host app. You can focus on the host app by using the [`pages.returnFocus()`](/javascript/api/@microsoft/teams-js/pages#@microsoft-teams-js-pages-returnfocus) function. The `returnFocus()` function accepts a Boolean indicating the direction to advance focus within the host app; `true` for forward and `false` for backwards. Generally, forward highlights the search bar and backwards highlights the app bar.

-## Code sample

-|**Sample name** | **Description** |**Node.js**|

-|-|--|--|

-|Tab app navigation | Sample code shows how to navigate between tabs within the app. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-app-navigation/nodejs)

-## See also

-* [Extend a Teams personal tab across Microsoft 365](~/m365-apps/extend-m365-teams-personal-tab.md)

-* [Build tabs for Teams](~/tabs/what-are-tabs.md)

-* [Create a personal tab](~/tabs/how-to/create-personal-tab.md)

-* [Create deep links](~/concepts/build-and-test/deep-links.md)

-1. Create a Teams tab application by running the following command and [creating a channel tab](create-channel-group-tab.md#create-a-custom-channel-or-group-tab-with-nodejs):

-* [Build tabs with Adaptive Cards](../../tabs/how-to/build-adaptive-card-tabs.md)

-|03/05/2021|Reorder personal app tabs | Build tabs > [Reorder the chat tab in personal apps](tabs/how-to/create-personal-tab.md#reorder-static-personal-tabs) |