-Users can add a meeting extension before and during meetings. They also can add an app for a specific meeting directly from the Teams store.

-For scenarios with navigation layers or heavy content, we recommend allowing users to navigate to a secondary layer. Users must be able to go back to the previous layer.

-* **Side panel**: A user can have the side panel open at any time during a meeting to chat, view the roster, or use an app (i.e., in-meeting tab). The stage dynamically rearranges when the panel is open.

-When the side panel isn't open, the meeting stage is 994x678 pixels by default and can be a minimum 792x382 pixels.

-Since the dialogs are at the center of the meeting stage, task completion should be fast and simple to avoid user frustration.

-If you have more than one layer of navigation in an in-meeting tab, users must be able to go back to their previous views.

-* [Share entire app to stage](#share-entire-app-to-stage) using the share to stage button in the meeting side panel of Teams client or through [deeplinks](~/concepts/build-and-test/deep-links.md#generate-a-deep-link-to-share-content-to-stage-in-meetings).

-1. In the Solution Explorer, navigate to the `TeamsAppManifest` folder, open `manifest.json` and set `id` and `botId` to the **bot App ID** you saved at the time of the bot registration.

-1. In a console, navigate to the project: </br></br>

-1. In your browser, navigate to the [**Azure portal**][azure-portal].

-1. In your browser, navigate to the [**Azure portal**][azure-portal].

-1. In Solution Explorer, navigate to the `TeamsAppManifest` folder. Edit `manifest.json` by assigning the following values:

-1. Navigate to the `TeamsAppManifest` folder and upload the zipped manifest.

- 1. In your browser, navigate to the [**Azure portal**][azure-portal].

- foreach (var conversationReference in _conversationReferences.Values)

- await ((BotAdapter)_adapter).ContinueConversationAsync(_appId, conversationReference, BotCallback, default(CancellationToken));

-> * Deep links work properly only if the tab was configured using the v0.4 or later library and because of that has an entity ID. Deep links to tabs without entity IDs still navigate to the tab but cannot provide the sub entity ID to the tab.

-Use this deep link format to navigate to a particular conversation within channel thread:

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

-You can also 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 start or join a meeting.

-> [!Note]

-> Deep link to share content to stage in meeting is supported in Teams desktop client only.

-When a deep link is selected in an app by a user who is part of an ongoing meeting, then the app is shared to the stage and a permission pop-up window appears. Users can grant permissions for the participants, such as co-editing a document or collaborating with an app.

-When user isn't in a meeting then user is redirected to the Teams calendar where user needs to join a meeting or an instant meeting (Meet now) can be initiated.

-Once the user initiates an instant meeting (Meet now), they can add participants and interact with the app.

-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 is not a valid domain, an error dialog will pop-up 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. When there's an ongoing meeting, then sharing can be done directly.

-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.

-```json

-var appContext= JSON.stringify({ "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view", "appId": "9cc80a93-1d41-4bcb-8170-4b9ec9e29fbb", "useMeetNow":false })

-var encodedContext = encodeURIComponent(appcontext).replace(/'/g,"%27").replace(/"/g,"%22")

-var 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 client.

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

- `https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={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%253Atrue%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`|

-* **Team desktop client** - Use the following format to launch a deep link from the Teams desktop client to share content on stage.

- `msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&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%253Atrue%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.

-3. Navigate to **Teams apps** > **Setup Policies** > **Global**.

-

-To view your tab, navigate to the team you installed it on, and select it from the tab bar. The page that you chose during configuration should be displayed.

-1. To start the generator, navigate to your new directory and type the following command:

-1. From [Microsoft Azure portal](https://portal.azure.com) (or [Bot Framework portal](https://dev.botframework.com) if you previously registered there), navigate to your bot resource.

-1. Navigate to [Outlook on the web](https://outlook.office.com) and sign in using your dev tenant account.

-1. Open Command Prompt and navigate to the local folder path.

- :::image type="content" source="images/outlook-about-beta-channel.png" alt-text="Go to 'About Outlook' from your Office Account to verify you are running a Beta Channel build.":::

-To install the latest Office app beta build to your physical Android device or Android emulator:

-To open your message extension, navigate to any of your chats or channels. Choose the **More options** (**&#8943;**) button in the compose box, and choose your message extension.

-To open your message extension, navigate to any of your chats or channels. Choose the **More options** (**&#8943;**) button in the compose box, and choose your message extension.

-1. After the plugins are install, go to the **Plugins** tab in the **Site administrator** page, select **Authentication** section link, and enable **OpenID Connect**. It is OK to leave the plugin configuration blank - they will be filled in later.

-1. Navigate to the unzipped directory by typing `cd .../.../Moodle-AzureAD-Powershell` where `.../...` is the path to the directory.

- 1. In the **User Creation Restriction** section, you can setup a filter to limit the Azure AD users that is synced to Moodle.

-4. Select the `manifest.zip` package you downloaded previously and select **Save**. If you have not downloaded the app manifest package, you can download from the **Team Settings** tab of the plugins configuration page in Moodle.

-Now that you have the app installed, you can add the tab to any channel that you have access to. To do so, navigate to the channel, select the **plus** (Γ₧ò) symbol and select your app from the list. Follow the prompts to finish adding your Moodle course tab to a channel.

-1. If the automatically detected value does not present, follow the instruction on the page to find the Moodle app ID and fill in the setting.

-When a Moodle course is synced, Teams automatically installs the Moodle app in the team, creates a Moodle tab in the General channel of Teams, and configures it to contain the course page for the Moodle course from which it is synced. You can now start working with your Moodle courses directly from Teams.

-A list of valid domains from which the app expects to load any content. Domain listings can include wildcards, for example `*.example.com`. This matches exactly one segment of the domain; if you need to match `a.b.example.com` then use `*.*.example.com`. If your tab configuration or content UI needs to navigate to any other domain besides the one use for tab configuration, that domain must be specified here.

-* By late 2022, bots can't proactively retrieve the `userPrincipalName` or `email` properties for members of a chat or team. Bots must use the Graph APIs to retrieve the required information. The new `GetConversationPagedMembers` API can't return the `userPrincipalName` and `email` properties from late 2022. Bots must use Graph API with an access token to retrieve information.

-The app provides an easy interface for designated users to create, preview, collaborate and send messages.

-The Microsoft Teams Emergency Operations Center (TEOC) solution template leverages the power of the Microsoft 365 platform to centralize incident response, information sharing and field communications using powerful services like Microsoft Lists, SharePoint and more. An open-source solution supported by Microsoft, provides core functionality and can be extended to meet specific agency requirements.

-Champions are critical in helping drive adoption and developing new tournaments, helping in your business goals. Make sure you are leveraging your Champions to help identify and build new adoption-themed tournaments, and inspire your organization to learn and participate.

-1. Select **Configure** and navigate to the General tab to add the Group ID.

-As the meetings are backed by Outlook, users can navigate to either Bookings, or Outlook Calendar to see all the meetings listed in a single calendar. Internal meetings are listed in shared calendar.

-> Currently Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

- :::image type="content" source="../assets/images/collaboration-control/tasks-tab.png" alt-text="tasks" border="true":::

-* The subgrid view selected isn't honored. All tasks, meetings, or notes for the collaborative record will be displayed.

- :::image type="content" source="../assets/images/collaboration-control/subgrid-view.png" alt-text="subgrid view" border= "true":::

-* Activities added to the timeline control donΓÇÖt appear in the components, tasks, meetings and notes created in the components aren't included in the timeline control.

-When following the installation steps in [install Collaboration controls](~/samples/install-collaboration-control.md), you're redirected to the Power Platform admin center. A banner is displayed when installation starts, but it isn't updated when installation completes. The status is listed during installation and when installation is complete it may disappear from the list. You can view the solutions list at [https://make.powerapps.com/](https://make.preview.powerapps.com/) to confirm that installation is complete.

- :::image type="content" source="../assets/images/collaboration-control/view-during-installation.png" alt-text="view during installation" border="true":::

- :::image type="content" source="../assets/images/collaboration-control/view-after-installation.png" alt-text="view after installation" border="true":::

-When upgrading the controls to a later version, the same installation started banner displays, but the control status remains installing even after the upgrade is complete. You can confirm that the upgrade is complete by checking the solutions list at [https://make.powerapps.com/](https://make.preview.powerapps.com/), it should take approximately 15 minutes.

- :::image type="content" source="../assets/images/collaboration-control/history.png" alt-text="History check" border="true":::

-The Meetings control supports one on one meetings when using Bookings to engage with users outside of your organization. one to many meetings aren't supported at this time using Collaboration controls.

-When an attendee RSVPs to a meeting, their response status may not display correctly in both the agenda view and the meeting details. Selecting the decline button may also return an error message on screen.

-When, the Tasks grid is populated by a low number of Tasks the grid context menu may appear cropped and require use of scrollbars.

-When navigating into the Archive folder after archiving files, users may experience duplicate archive folders. Navigating from the archive folder(s) to the files main view will resolve the issue, and files that are archived won't be removed.

-Solution 1: Confirm the IDs are correct, and the settings have been applied as per the settings exercise.

-Solution 2: Try to ensure that the Power Apps environment and Teams environment are on the same tenant.

-If the controls fail to load or show an error, it may be a transient issue.

-Your users can experience productivity gains and stay in their flow by collaborating on approvals, files, meetings, notes and tasks without leaving the context of your app.

-Navigate to Form Designer and drag the controls from the Component pane onto a form.

-> Currently Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

-Following are the steps to create external tasks:

-1. Create new fields that will hold the following information:

- > The customer entity created above will be, where the task control pulls the customer information from when assigning an external task. The Parent field ensures that the customer entity is linked to an Inspection record.

- :::image type="content" source="~/assets/images/collaboration-control/subgrid-property.png" alt-text="Tasks property dialog":::

- :::image type="content" source="~/assets/images/collaboration-control/tasks-property.png" alt-text="Tasks property settings":::

-1. Go to the Controls tab and select :::image type="icon" source="~/assets/images/collaboration-control/edit-icon.png" alt-text="edit tasks"::: on Custom Tasks property to add the Fetch XML generated above.

- :::image type="content" source="~/assets/images/collaboration-control/set-fetchproperties.png" alt-text="Fetch XML property settings":::

- :::image type="content" source="~/assets/images/collaboration-control/custom-tasksproperty.png" alt-text="Fetch XML Custom property settings":::

-> Currently Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

-When using the Dataverse Web API to retrieve multiple records from a virtual table additional query parameters can be included to support sorting, filtering, and pagination. These features aren't supported uniformly across the Collaboration controls virtual tables because they rely on the support provided by the Microsoft Graph API. See the Virtual Tables Entity Reference for details on what each virtual table supports.

-> Currently Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

-> Sorting is not supported on all the attributes of the respective Graph resources. If a user tries to sort on a virtual table with an unsupported attribute, this result set will have its default order. This is the same behaviour as the Dataverse Web API on columns that do not support sorting.

-With the virtual tables, you can use the OData $filter query parameter to set criteria for which rows will be returned. The virtual tables are queried using the same OData operators that are supported by the Dataverse Web API.

-> Filtering is not supported on all the attributes of the respective Graph resources. If a user tries to filter on a virtual table with an unsupported attribute, this filter will be ignored. This is the same behaviour as the Dataverse Web API on columns that do not support filtering.

-You can specify the page size by using the `odata.maxpagesize` preference value in the request header. If the result set spans multiple pages, the response will include the `@odata.nextLink` property. Sample request and response are as following:

-> The response will not include the `@nextLink` property. If your use case requires the next page link to be returned, you can use the odata.maxpagesize preference header described in section 1 instead of passing the $top URI parameter.

-> Currently Collaboration controls are available only in [public developer preview](~/resources/dev-preview/developer-preview-intro.md).

-1. A third-party tool, for example: Post man or some custom C# code that allows you to authenticate to Microsoft Dataverse instances and to compose and send Web API requests and view responses.

-The scenario described in this guide uses the Planner Plan and Task virtual tables. The scenario described is the same one that the Tasks Collaboration control uses. From a user perspective the scenario shows how a Planner Plan, and several Tasks are created and associated with a specific business record. The scenario goes on to show how to retrieve the tasks associated with the business record and how to read, update and delete a specific planner task.

-A collaboration session allows you to perform operations such as list of the calendar events associated with a business record, for example an inspections application.

-Keep track of the `collaborationRootId` as it will be needed in subsequent requests.

-* `groupId`: Identifies the group who will own this plan, use the value from step 1

-Keep track of the`m365_id` as it will be needed in subsequent requests.

-* `collaborationRootId`: Identifies the collaboration session we want to associate this plan with, us the value from task 2

-Keep track of the `m365_graphplannertaskid` as it will be needed in subsequent requests.

-microsoftTeams.getContext((context: microsoftTeams.Context) => {

- /* ... */

-import { app, Context } from "@microsoft/teams-js";

-app.getContext().then((context: Context) => {

- /*...*/

-import { app, Context } from "@microsoft/teams-js";

- const context: Context = await app.getContext();

- /*...*/

-}

-2. You can navigate to configuration file by selecting any one of the config placeholders **Go to config file** or **View the state file** in `manifest.template.json`.

-In `manifest.template.json`, you can navigate to codelens to preview the values for `local` and `dev` environment.

-You can navigate to state file or configuration file by selecting the codelens, which provides a drop-down list with all the environment names. After selecting one environment, the corresponding state file or configuration file opens.

- |Create|`auth/tab`|Reference code, auth redirect pages and a `README.md` file is generated in this path for a tab project.|

- |Create|`auth/bot`|Reference code, auth redirect pages and a `README.md` file is generated in this path for a bot project.|

-The following steps help you to enable SSO in your application.

-5. Replace the following line: `<AddSSO />` with `<InitTeamsFx />` to replace the `AddSso` component with `InitTeamsFx` component.

-1. Copy `auth/bot/public` folder to `bot/src`. The two folders contain HTML pages used for auth redirect, you need to modify `bot/src/index` file to add routing to these pages.

-2. Copy `auth/bot/sso` folder to `bot/src`. The two folders contain three files as reference for SSO implementation:

- * `showUserInfo`: It implements a function to get user info with SSO token. You can follow this to create your own method that requires SSO token.

- * `ssoDialog`: It creates a [ComponentDialog](/javascript/api/botbuilder-dialogs/componentdialog?view=botbuilder-ts-latest&preserve-view=true) that is used for SSO.

- * `teamsSsoBot`: It creates a [TeamsActivityHandler](/javascript/api/botbuilder/teamsactivityhandler?view=botbuilder-ts-latest&preserve-view=true) with `ssoDialog` and add `showUserInfo` as a command that can be triggered.

-3. Follow the code sample and register your own command with `addCommand` in this file (optional).

-4. Execute `npm install isomorphic-fetch` under `bot/`.

-5. Execute `npm install copyfiles` under `bot/` and replace following line in package.json:

-

- ```JSON

- "build": "tsc --build",

- with

- ```JSON

- "build": "tsc --build && copyfiles public/*.html lib/",

- ```

- The HTML pages used for auth redirect are copied while building this bot project.

-6. After you add the following files, you need to create a new `teamsSsoBot` instance in `bot/src/index` file. Replace the following code:

- ```Bash

-

- // Process Teams activity with Bot Framework.

- server.post("/api/messages", async (req, res) => {

- await commandBot.requestHandler(req, res);

- });

- ```

- with

- ```Bash

- const handler = new TeamsSsoBot();

- // Process Teams activity with Bot Framework.

- server.post("/api/messages", async (req, res) => {

- await commandBot.requestHandler(req, res, async (context)=> {

- await handler.run(context);

- });

- });

- ```

-7. Add the HTML routes in the `bot/src/index` file:

- ```Bash

- server.get(

- "/auth-*.html",

- restify.plugins.serveStatic({

- directory: path.join(__dirname, "public"),

- })

- );

- ```

-8. Add the following lines to `bot/src/index` to import `teamsSsoBot` and `path`:

- ```Bash

- // For ts:

- import { TeamsSsoBot } from "./sso/teamsSsoBot";

- const path = require("path");

- // For js:

- const { TeamsSsoBot } = require("./sso/teamsSsoBot");

- const path = require("path");

- ```

-9. Register your command in the Teams app manifest. Open `templates/appPackage/manifest.template.json`, and add following lines under `command` in `commandLists` of your bot:

- ```JSON

- {

- "title": "show",

- "description": "Show user profile using Single Sign On feature"

- }

- ```

-</details>

-<details>

-<summary><b>Add a new command to the bot

-</b></summary>

-> [!NOTE]

-> Currently, these instructions applies to `command bot`. If you start with a `bot`, see [bot-sso sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/bot-sso).

-The following steps help you to add a new command, after you add SSO in your project:

-1. Create a new file (`todo.ts` or `todo.js`) under `bot/src/` and add your own business logic to call Graph API:

-# [TypeScript](#tab/typescript)

- ```typescript

- // for TypeScript:

-export async function showUserImage(

- context: TurnContext,

- ssoToken: string,

- param: any[]

-): Promise<DialogTurnResult> {

- await context.sendActivity("Retrieving user photo from Microsoft Graph ...");

- // Init TeamsFx instance with SSO token

- const teamsfx = new TeamsFx().setSsoToken(ssoToken);

- // Update scope here. For example: Mail.Read, etc.

- const graphClient = createMicrosoftGraphClient(teamsfx, param[0]);

-

- // You can add following code to get your photo:

- // let photoUrl = "";

- // try {

- // const photo = await graphClient.api("/me/photo/$value").get();

- // photoUrl = URL.createObjectURL(photo);

- // } catch {

- // // Could not fetch photo from user's profile, return empty string as placeholder.

- // }

- // if (photoUrl) {

- // await context.sendActivity(

- // `You can find your photo here: ${photoUrl}`

- // );

- // } else {

- // await context.sendActivity("Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.");

- // }

- return;

-}

- ```

-# [JavaScript](#tab/javascript)

- ```javaScript

- // for JavaScript:

-export async function showUserImage(context, ssoToken, param) {

- await context.sendActivity("Retrieving user photo from Microsoft Graph ...");

- // Init TeamsFx instance with SSO token

- const teamsfx = new TeamsFx().setSsoToken(ssoToken);

- // Update scope here. For example: Mail.Read, etc.

- const graphClient = createMicrosoftGraphClient(teamsfx, param[0]);

-

- // You can add following code to get your photo:

- // let photoUrl = "";

- // try {

- // const photo = await graphClient.api("/me/photo/$value").get();

- // photoUrl = URL.createObjectURL(photo);

- // } catch {

- // // Could not fetch photo from user's profile, return empty string as placeholder.

- // }

- // if (photoUrl) {

- // await context.sendActivity(

- // `You can find your photo here: ${photoUrl}`

- // );

- // } else {

- // await context.sendActivity("Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.");

- // }

- return;

-}

- ```

-2. Register a new command

- * Add the following line for new command registration using `addCommand` in `teamsSsoBot`:

- ```bash

- this.dialog.addCommand("ShowUserProfile", "show", showUserInfo);

- ```

- * Add following lines after the above line to register a new command `photo` and hook up with method `showUserImage` added above:

- ```bash

- // As shown here, you can add your own parameter into the `showUserImage` method

- // You can also use regular expression for the command here

- const scope = ["User.Read"];

- this.dialog.addCommand("ShowUserPhoto", new RegExp("photo\s*.*"), showUserImage, scope);

- ```

-3. Register your command in the Teams app manifest. Open `templates/appPackage/manifest.template.json`, and add following lines under `command` in `commandLists` of your bot:

- ```JSON

- {

- "title": "photo",

- "description": "Show user photo using Single Sign On feature"

- }

- ```

-The [Azure AD app manifest](/azure/active-directory/develop/reference-app-manifest) allows you to customize various aspects of application registration. You can update the manifest as needed. If you need to include additional API permissions to access your desired APIs, see [API permissions to access your desired APIs](https://github.com/OfficeDev/TeamsFx/wiki/#customize-aad-manifest-template).

-To view your Azure AD application in Azure Portal, see [View Azure AD application in Azure portal](https://github.com/OfficeDev/TeamsFx/wiki/Manage-AAD-application-in-Teams-Toolkit#How-to-view-the-AAD-app-on-the-Azure-portal).

-If you get errors with Teams Toolkit in Visual Studio Code, you can select **Get Help** on the error notification to navigate to the related document. If you're using TeamsFx CLI, there will be a hyperlink at the end of error message that points to the help doc. You can also view [provision help doc](https://aka.ms/teamsfx-arm-help) directly.

-Teams Toolkit is an extension in both Visual Studio and Visual Studio Code. In this document you can learn, how to install Teams Toolkit.

-## Install Teams Toolkit for Visual Studio Code

-Before you start with installation, you need to have Visual Studio Code and Teams client installed.

-## Steps to install Teams Toolkit

-You can install Teams Toolkit from an extension in Visual Studio Code and from Visual Studio Code Marketplace. The following steps help you to install Teams Toolkit:

-1. Open **Visual Studio Code**.

-1. Select the Extensions view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install toolkit-1.png" alt-text="install":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-toolkit2.png" alt-text="Toolkit":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk.png" alt-text="install toolkit 4.0.0":::

- After successful installation of Teams Toolkit in Visual Studio Code, Teams Toolkit icon appears in the Visual Studio Code toolbar.

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install.png" alt-text="After install":::

-1. Open [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).

- The following page appears.

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/install-ttk-marketplace.png" alt-text="install TTK Marketplace":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/Install-ttk.png" alt-text="install TTK":::

-1. From the pop-up window, select **Open**.

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-open.png" alt-text="Select the open":::

- The following Visual Studio Code page appears.

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/ttk-in-vsc.png" alt-text="Select TTK in VSC":::

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/select-install-ttk.png" alt-text="Select Install TTK in VSC":::

- After successful installation of Teams Toolkit in Visual Studio Code, Teams Toolkit icon appears in the Visual Studio Code toolbar.

- :::image type="content" source="../assets/images/teams-toolkit-v2/teams toolkit fundamentals/after-install.png" alt-text="After install":::

-#### Upgrade Teams Toolkit

-Teams Toolkit is upgraded to the latest version by default. The following steps help you to install different version:

-* Select the Extensions :::image type="icon" source="../assets/images/teams-toolkit-v2/extension icon.PNG"::: icon.

-* In Teams Toolkit extension, select :::image type="icon" source="../assets/images/teams-toolkit-v2/setting icon.PNG"::: icon.

-* Select **Install Another Version** for upgrade to the latest version of Teams Toolkit.

-Before you start with installation, you need to install Visual Studio Installer.

-You can download the latest Visual Studio Installer from the [Visual Studio download page](https://visualstudio.microsoft.com).

-## Steps to install Teams Toolkit

-After you open the Visual Studio Installer, in the pop-up Workloads window:

-1. Select the **ASP.NET and web development** workload.

-1. Select the **Microsoft Teams development tools** in **Installation details** panel.

-1. Select **Install**.

- :::image type="content" source="../assets/images/teams-toolkit-overview/visual-studio-install_1.png" alt-text="Visual studio-installation":::

-1. Select **Launch** to open Visual Studio.

- :::image type="content" source="../assets/images/teams-toolkit-overview/visual-studio-launch_1.png" alt-text="Launch visual studio":::

- > [!IMPORTANT]

- > You're recommended to download Visual Studio 2022 version 17.3.3, since Teams Toolkit for Visual Studio is GA in this version. This article is written for Visual Studio 2022 version 17.3.3. Teams Toolkit version 17.3.* or higher.

-Teams Toolkit is a capability feature which allows you to perform multi-functions in both Microsoft Visual Studio Code as well as Visual Studio. With the help of Teams Toolkit you can automate the process from creating to deploying and customizing your app. The various features and advantages of Teams Toolkit are discussed in the respective documentation for the environments you choose.

-## Teams Toolkit Overview for Visual Studio Code

-Teams Toolkit lets you create, debug, and deploy your Teams app right from Visual Studio Code.App development with the toolkit has the following advantages:

-* Integrated identity

-* Access to cloud storage

-* Data from Microsoft Graph

-* Azure and Microsoft 365 services with zero-configuration approach.

-For Teams app development, similar to Teams Toolkit for Visual Studio, you can use [CLI tool](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md), which consists of Toolkit `teamsfx`.

-## User journey of Teams Toolkit

-Teams Toolkit automates manual work and provides great integration of Teams and Azure resources. The following image shows Teams Toolkit user journey:

-The main milestones of this journey are:

-1. Start by creating a new project or trying a sample Teams app.

-1. Add capabilities or edit manifest file as needed.

-1. Use Microsoft 365 account to build and debug your Teams app.

-1. Use Azure account to provision and deploy your app to cloud.

-1. Publish your app to Teams.

-The following table helps you to get the overview of Teams Toolkit in Visual Studio Code:

-| Process | Description |

-| - | - |

-| Install Teams Toolkit | You can install Teams Toolkit in two ways: <br> - Using Visual Studio Code <br> - Using Visual Studio Code Marketplace|

-| Support for build environments | You have two different types of environment: <br> - Javascript or Typescript <br> - SPFx |

-| Support for app types and Azure function | There are two different types of apps: <br> - Capability-based app such as tab, bot, message extension <br> - Scenario-based Teams app such as notification bot, command bot and SSO enabled personal tab |

-| Develop your Teams app | It contains: <br> - Add and manage environment <br> - Create multi-capability app <br> - Create capability based cloud resources <br> - Integrate third party API <br> - Customize manifest file <br> - TeamsFx SDK |

-| Debug your Teams app | It contains: <br> - Debug your Teams app locally <br> - Debug background process|

-| Host your Teams app | It contains: <br> - Provision resources to the cloud <br> - Deploy to the cloud|

-| Test your Teams app | It contains: <br> - Integrate and collabrate <br> - Zip Teams metadata package <br> - Sideload and test app in Teams environment <br> - Test app behavior in different environment|

-| Publish your Teams app | It contains: <br> - Publish your app <br> - Manage admin approval <br> - Publish to store <br> - Integrate with Developer Portal |

-### Entities integrated with Teams Toolkit

-

-Teams Toolkit is an extension in Visual Studio Code. It is integrated with the following entities within Teams Toolkit.such as Azure AD and Microsoft 365, Developer Portal and Microsoft graph. All the entities are integrated within Teams Toolkit and help users to create an app.

-| Entities | Description |

-| - | - |

-| Azure AD | Azure Active Directory (Azure AD) is a cloud-based identity and access management service. This service helps your employees access external resources, such as Microsoft 365, the Azure portal, and thousands of other SaaS applications. |

-| Microsoft 365 | Teams developer account while developing an app.|

-| Developer Portal | The Developer Portal for Teams is the primary tool for configuring, distributing, and managing your Microsoft Teams apps. With the Developer Portal, you can collaborate with colleagues on your app, set up runtime environments, and much more. |

-| Microsoft Graph | Microsoft Graph is the gateway to data and intelligence in Microsoft 365. It provides a unified programmability model that you can use to access the tremendous amount of data in Microsoft 365, Windows, and Enterprise Mobility + Security. |

-Teams Toolkit brings all tools needed for building a Teams app in one place.

-## Manage your apps using Developer Portal

-As Teams Toolkit is integrated with Developer Portal, you can configure, distribute, and manage your app using [Developer Portal for Teams](../concepts/build-and-test/teams-developer-portal.md) under DEPLOYMENT after creating an app. For more information, see [manage your Teams apps using Developer Portal](../concepts/build-and-test/manage-your-apps-in-developer-portal.md).

-## Teams Toolkit overview for Visual Studio

-Teams Toolkit for Visual Studio helps you to create, debug and deploy Microsoft Teams apps. Teams Toolkit for Visual Studio is GA in Visual Studio 2022 version 17.3. App development with Teams Toolkit has the advantages of:

-* Integrated identity

-* Access to cloud storage

-* Data from Microsoft Graph

-* Azure and Microsoft 365 services with zero-configuration approach

-For Teams app development, you can also use [CLI tool](https://github.com/OfficeDev/TeamsFx/blob/dev/docs/cli/user-manual.md), similar to Teams Toolkit for Microsoft Visual Studio code that includes Toolkit `teamsfx`.

-Teams Toolkit brings all the tools needed to build a Teams app in one place.

-> [!NOTE]

-> Teams Toolkit is not available in other versions.

-## User Journey of Teams Toolkit

-Teams Toolkit automates manual work and provides you with great integration of Teams and Azure resources. The following image shows the user journey:

-The main milestones of this journey are:

-1. You can start by creating a new project or try building a sample Teams app.

-1. You can then edit code or the manifest file as required.

-1. For building and debugging the Teams app you can use your Microsoft 365 account.

-1. For provisioning and deploying your app to cloud you can use your Azure account.

-1. You can finally publish your app to Teams.

-The following operations aren't supported in Teams Toolkit for Visual Studio yet compared to Teams Toolkit for Microsoft Visual Studio Code, however they're planned in the future product road map.

-* Add another Teams capabilities to your Teams app.

-* Add more Azure resources to your Teams app

-* Add Single Sign-on (SSO) to your Teams app.

-* Add API connection to your Teams app.

-* Customize Microsoft Azure Active Directory (Azure AD) manifest.

-* Add CI/CD pipelines.

-* Manage multiple cloud environments.

-* Collaborate on Teams projects.

-* Publish Teams app.

-### TeamsFx .NET SDK Reference docs

-* ***September 29, 2022***: [Generate a deep link to share content to stage in meetings.](concepts/build-and-test/deep-links.md#generate-a-deep-link-to-share-content-to-stage-in-meetings)