officedev / teams-toolkit-samples

Scenario-focused sample applications that help you get started with building Microsoft Teams App.

Microsoft Teams Framework (TeamsFx) Sample Gallery

Note: We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!

This warning will be removed when the samples are ready for production.

This repository contains the sample applications for Microsoft Teams that appear in the Visual Studio Code and Visual Studio sample galleries within the Teams Toolkit extension.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct.

For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

teams-toolkit-samples's Issues

ngrok - issue with ignoring default config path

This took me a while to track down, so thought I would create an issue here. I am running on MacOS.

I was running into the ERR_NGROK_6022 error when following the 'bot-sso' sample. As described in the README, it suggested to ensure my authtoken was saved in my config by running the following command:

~ npx ngrok authtoken MYAUTHTOKENHERE

Authtoken saved to configuration file: /Users/MYUSERNAME/Library/Application Support/ngrok/ngrok.yml

After debugging for awhile, I noticed one of the VS Code terminals was logging the following...

Starting local tunnel service

"/Users/MYUSERNAME/.fx/bin/ngrok/node_modules/ngrok/bin/ngrok" http 3978 --log=stdout --log-format=logfmt

lvl=info msg="no configuration paths supplied"
lvl=info msg="ignoring default config path, could not stat it" path=/Users/MYUSERNAME/.ngrok2/ngrok.yml err="stat /Users/MYUSERNAME/.ngrok2/ngrok.yml: no such file or directory"

So it appears it is looking for a different config location for my ngrok.yml. Once I copied the ngrok.yml to the .ngrok2 folder, my consent process is now working as expected.

Is there something in this code base and/or dependencies that should be updated?

Thanks!

[Sample Onboard Request] Reddit Link Unfurling sample

Owner:
@yukun-dong
ID:
reddit-link-unfurling

Title:
Format Reddit Link into Adaptive Card

Description:
This sample application showcases how to build a Teams application (Link Unfurling, a type of Message Extension) that can format the Reddit link into an Adaptive Card when a user pastes a Reddit link into the compose message area.

Tags:
JS, Message Extension, Link Unfurling

Time:
10 mins to run

Configuration:
Manual configurations required

Thumbnail:
https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/msgext-link-unfurling-reddit/nodejs/doc/image/link.png

(Source code in this Repo) Source Code PR:
The link to pull request that contains sample source codes.

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/msgext-link-unfurling-reddit/nodejs

[Sample Onboard Request] Teams Messaging Extensions Search

Owner:
@frankqianms

ID:
msgext-search-python

Title:
Teams Messaging Extensions Search using Python

Description:
There are two basic types of Messaging Extension in Teams: Search-based and Action-based. This sample illustrates how to build a Search-based Messaging Extension.

Tags:
You can give your samples a set of tags so that users can easily locate your sample from a group of samples. Those tags can be:

• Python
• Message Extension
• Bot Framework
• Local debug
  You can customize the tag you used for your sample, the recommended number of tags is less than 5.

Time:
5mins to run

Configuration:
Manual configurations required.
Users need to manage virtual environments and pip install dependencies before local debug.
This python message extension sample only supports local debug currently.

(Source code NOT in this Repo) Sample URL:
Teams Messaging Extensions Search

Thumbnail
./Images/9-mention-Search-Result.png
https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/msgext-search/python/Images/9-mention-Search-Result.png

Demo GIF
./Images/msgext-search.gif
https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/msgext-search/python/Images/msgext-search.gif

Notification blob storage is not filled

Question based on #355.

I'm facing the issue that my bot installations are not recognized when I deploy my app to Azure.

That's why I try to introduce a blob storage as described here.

My container is created successfully and I don't see error, but container stays empty and no bot installations seem to be persisted.

Any ideas?

UpdateAadAppError: Failed to update application in Azure Active Directory. Please make sure 'templates/appPackage/aad.template.json' is valid: Request failed with status code 404

Describe the bug
Setting up existing AAD app fails

To Reproduce
Steps to reproduce the behavior:

1. Go to .vscode/tasks.json:

2. Update values (asterisked out for screenshot):
   

3. See error:
   

Expected behavior
Should be able to add existing AAD app registration

VS Code Extension Information (please complete the following information):

• OS: [Windows 10]
• Version [latest]

CLI Information (please complete the following information):

• OS: [Windows 10]
• Version [latest]

"[Ext.TaskDefinitionError]: The value of 'ngrokArgs' is invalid for the task of type 'teamsfx'"

Hello.

I'm attempting to run this app: https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-bot-with-tab by following its README.

When running Debug (Edge) I see the error message "[Ext.TaskDefinitionError]: The value of 'ngrokArgs' is invalid for the task of type 'teamsfx'"

I have env/.env.local BOT_DOMAIN set to xxxxx.ngrok-free.app and BOT_ENDPOINT set to https://xxxxx.ngrok-free.app (xxxx is reported to me when I run ngrok).

Also when attempting to follow the provisioning instructions in terminal I see "(✖) [Core.IncompatibleProject]: Your TeamFx CLI version is old and it doesn't support current project, please upgrade to the latest version using command below:
npm install -g @microsoft/teamsfx-cli@latest"

This is after having already run the required command "npm install -g @microsoft/teamsfx-cli@latest"

I updated VS Code TeamsFx Extension to v4.99.2023021100 using the Visix file as instructed.

How can I run this app?

Thank you.

Add app icon to samples

Logging this ask from M365 product teams--would it be possible to update TeamsFx samples with an app icon? We use a number of them in walkthrough tutorials in the docs, and got feedback from PMs that the generic app icon in our screenshots doesn't look realistic/professional.

Thanks for your consideration~

How to prevent to remove the old version build files in blob storage when using Teams toolkit to deploy tabs to blob storage?

When I update my code and deploy latest code using Teams Toolkit, it always removes the old version built files in blob storage and upload the new built files, but I want to reserve the old files except the same name files.

[Sample Onboard Request] Teams Conversation Bot

Owner:
@frankqianms

ID:
bot-conversation-python

Title:
Teams Conversation Bot using Python

Description:
This bot has been created using Bot Framework. This sample shows how to incorporate basic conversational flow into a Teams application. It also illustrates a few of the Teams specific calls you can make from your bot.

Tags:
You can give your samples a set of tags so that users can easily locate your sample from a group of samples. Those tags can be:

• Python
• Bot
• Bot Framework
• Local debug
  You can customize the tag you used for your sample, the recommended number of tags is less than 5.

Time:
5mins to run

Configuration:
Manual configurations required.
Users need to manage virtual environments and pip install dependencies before local debug.
This python bot sample only supports local debug currently.

(Source code NOT in this Repo) Sample URL:
Teams Conversation Bot

Thumbnail
./Images/2.WelcomeCard.PNG
https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/bot-conversation/python/Images/2.WelcomeCard.PNG

(Optional) Demo GIF:
./Images/BotConversation.gif
https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/bot-conversation/python/Images/BotConversation.gif

[Sample Onboard Request] Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using .NET and Teams Toolkit for Visual Studio sample

Owner:
@garrytrinder

ID:
stocks-multiparam-dotnet

Title:
Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using .NET and Teams Toolkit for Visual Studio sample

Description:
This sample demonstrates how to use multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using .NET and Teams Toolkit for Visual Studio.

Tags:
C#, Message Extension, Multi parameters

Time:
"5mins to run".

Configuration:
"Ready for local debug"

Thumbnail:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/blob/main/samples/msgext-multiparam-csharp/assets/preview.png

(Optional) Demo GIF:

(Source code in this Repo) Source Code PR:

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/tree/main/samples/msgext-multiparam-csharp

[Sample Onboard Request] Northwind inventory message extension sample

Owner:
@BobGerman @garrytrinder @rabwill

ID:
northwind-inventory-me

Title:
Northwind inventory message extension sample

Description:
This sample implements a Teams message extension that can be used as a plugin for Microsoft Copilot for Microsoft 365. The message extension allows users to query the Northwind Database.

Tags:
TS, Message Extension, SQL Database

Time:
"10 mins to run".

Configuration:
"Manual configurations required".

Thumbnail:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/blob/main/samples/msgext-northwind-inventory-ts/assets/plugin.png

(Optional) Demo GIF:

(Source code in this Repo) Source Code PR:
The link to pull request that contains sample source codes.

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/tree/main/samples/msgext-northwind-inventory-ts

Adding an example of rendering tabs / web application in the same level of the Teams application

All current examples showcase how to bundle a tab experience using TeamsFx within the same folder.

---hello-world-tab
   ---.fx
   ---.vscode
   ---images
   ---tabs
   ---templates

Can we add an example to support the following structure? The tabs project is a react app that the hello-world-tab project is a Teams app that references the tabs react app. The reason I asked is we have a monorepo setup that we want to keep our web application code is the same level as the teams app set up.

---tabs
---hello-world-tab
   ---.fx
   ---.vscode
   ---images
   ---templates

[Sample Onboard Request] Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using JavaScript and Teams Toolkit for Visual Studio Code sample

Owner:
@garrytrinder

ID:
stocks-multiparam-js

Title:
Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using JavaScript and Teams Toolkit for Visual Studio Code sample

Description:
This sample demonstrates how to use multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using JavaScript and Teams Toolkit for Visual Studio Code.

Tags:
JS, Message Extension, Multi parameters

Time:
"5mins to run".

Configuration:
"Ready for local debug"

Thumbnail:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/blob/main/samples/msgext-multiparam-js/assets/preview.png

(Optional) Demo GIF:

(Source code in this Repo) Source Code PR:

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/tree/main/samples/msgext-multiparam-js

[Sample Onboard Request] Ingest custom API data into Microsoft 365 with a Microsoft Graph connector

Owner:
@waldekmastykarz @garrytrinder

ID:
gc-nodejs-typescript-food-catalog

Title:
Ingest custom API data into Microsoft 365 with a Microsoft Graph connector

Description:
This sample project uses Teams Toolkit for Visual Studio Code to simplify the process of creating a Microsoft Graph connector that ingests data from a custom API to Microsoft Graph. It provides an end to end example of creating the connector, ingesting content and refreshing the ingested content on a schedule. It also includes the simplified admin experience which means that admins can toggle the connector on and off from the Microsoft Teams admin center.

Tags:

• TS
• Graph connector
• Azure Function

Time:
5mins to run

Configuration:
Post F5 tasks

Thumbnail:
https://github.com/pnp/graph-connectors-samples/tree/main/samples/nodejs-typescript-food-catalog/assets/ttk_thumb.png

Demo GIF:
https://github.com/pnp/graph-connectors-samples/tree/main/samples/nodejs-typescript-food-catalog/assets/ttk.gif

Sample URL:
https://github.com/pnp/graph-connectors-samples/tree/main/samples/nodejs-typescript-food-catalog

[Sample Onboard Request] EcoGroceries Call Center message extension with Cognitive Search sample

Owner:
Ayca Bas @aycabas

ID:
cognitive-search-me

Title:
EcoGroceries Call Center message extension with Cognitive Search sample

Description:
This sample implements Cognitive Search with a Teams message extension that enables Hybrid Search (Vector + Semantic) and can be used as a plugin for Microsoft Copilot for Microsoft 365. Architecture below demonstrates how developers can use Copilot for Microsoft 365 in Bring Your Own Data scenarios instead of building a custom GPT powered bot.

Tags:
JS, Message Extension, Azure Cognitive Search, Vector Search, Azure OpenAI

Time:
"15 mins to run".

Configuration:
"Manual configurations required".

Thumbnail:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/blob/main/samples/msgext-doc-search-js/assets/byod-copilot.gif

(Optional) Demo GIF:
https://github.com/aycabas/Copilot-for-M365-Plugins-Samples/assets/36196437/0d9ad91e-0f78-43c4-88a2-f784ee36e826

(Source code in this Repo) Source Code PR:
The link to pull request that contains sample source codes.

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/tree/main/samples/msgext-doc-search-js

Blazor Authorization with TeamFX

I'm not finding any examples or documentation as to how to get the CascadingAuthenticationState to utilize the AuthorizeView components against the SSO in TeamsFX for Blazor. Is this included in the Services.AddTeamsFx() service or is there another registration needed?

ToDo sample fails to provision with "Failed to find Subscription"

I'm trying to use the sample todo-list-with-Azure-backend. It fails at the provisioning step. I've tried it with both the Teams Toolkit in VSC and with the TeamsFx CLI. In both cases I get the following error: "Failed to find a subscription"

I'm blocked so please help.

hello-world-in-meeting - Missing RSC permissions to enable Meeting Stage Share button

It seems that the hello-world-in-meeting is missing the now required RSC permissions to enable Meeting Stage Share button.

According to https://learn.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#resource-specific-delegated-permissions, the following permissions in manifest should solve the issue:

"authorization": {
"permissions": {
"orgWide": [],
"resourceSpecific": [
{
"name": "MeetingStage.Write.Chat",
"type": "Delegated"
},
{
"name": "ChannelMeetingStage.Write.Group",
"type": "Delegated"
}
]
}
}
}

how to require apiEndpoint?

i want to require apiEndpoint by teamsfx.getConfig("apiEndpoint"),
but it doesn't work, should i config any files?

Is Notification Storage using Blob Storage scalable?

Hi,

I am developing a bot for Teams and I noticed that it's advised to use a custom notification storage instead of just storing it on the file ".notification.localstore.json" as said here: docs

I followed the sample example from the documentation here, and I noticed that the List method seems to always return all the conversations, downloading each one.

How is this solution scalable, for example, if I have, 10000+ users?

Thanks

[Feature Request] Devcontainer Support

Hi awesome folks,

Are there any plans to have devcontainer support for these FX samples in the future?

I personally won't install node locally and would prefer to use devcontainers/codespaces to develop/test/debug any projects I work on.

Happy to have an attempt at creating a devcontainer if it's possible.

SSOCommand race condition issue

Hey there.

I've found that the template implementation of bot-sso has issues with race conditions if multiple users do the authentication at the same time. Especially the case may be when we invite the user to do authorization when the bot is installed, but the user does that in a couple of minutes and someone at this time will already do the authorization.

Steps to reproduce:

Change the code:

To bot/commands/index.ts add two commands which will be inherited from the SSOCommand:

import { BotCommand } from "../helpers/botCommand";
import { LearnCommand } from "./learn";
+ import { ShowUserPrincipalName } from "./showUserPrincipalName";
+ import { ShowUserDisplayName } from "./showUserDisplayName";
import { WelcomeCommand } from "./welcome";

export const commands: BotCommand[] = [
  new LearnCommand(),
+ new ShowUserPrincipalName(),
+ new ShowUserDisplayName(),
  new WelcomeCommand(),
];

Make these commands to make some distinguishable texts.
./showUserPrincipalName:

import { TurnContext } from "botbuilder";
import { SSOCommand } from "../helpers/botCommand";

export class ShowUserPrincipalName extends SSOCommand {
  constructor() {
    super();
    this.matchPatterns = [/^\s*show_principal\s*/];
    this.operationWithSSOToken = this.showUserInfo;
  }

  async showUserInfo(context: TurnContext, ssoToken: string) {
    await context.sendActivity("I will show you the user principal name");
  }
}

./showUserDisplayName.ts:

import { TurnContext } from "botbuilder";
import { SSOCommand } from "../helpers/botCommand";

export class ShowUserDisplayName extends SSOCommand {
  constructor() {
    super();
    this.matchPatterns = [/^\s*show_display\s*/];
    this.operationWithSSOToken = this.showUserInfo;
  }

  async showUserInfo(context: TurnContext, ssoToken: string) {
    await context.sendActivity("I will show you the user display name");
  }
}

User scenario

• Open two teams instances for different users (A and B) in different browsers and install the bot for both of these users
• In the A – run the command show_principal
• in the B – run the command show_display
• in the A – do the authorization flow
• in the B – do the authorization flow

Expected result: for user A the sent text: I will show you the user principal name, for the user B the bot sent text: I will show you the user display name.
Actual result: for user A the bot sent text I will show you the user display name, for user B the bot didn't send any text.

Next steps to make sure that code is right and it's the race condition issue, run:

• in the A – show_principal and it will return I will show you the user principal name.
• in the B – show_display and it will return I will show you the user display name.

The reason of the problem

When the botCommand is run it sets the global state for the singleton instance of the ssoDialog:

  async run(parameters: any): Promise<any> {
    this.validateParameters(parameters);
    const ssoDialog = parameters.ssoDialog;
    ssoDialog.setSSOOperation(this.operationWithSSOToken);
    await ssoDialog.run(parameters.context, parameters.dialogState);
  }

And the next call of that method overwrites the global state of ssoDialog, which leads to the problem that after it's overwritten – any command which is currently waiting for user input (access grant) will execute the last set callback.

Probable solution

I think every command which needs to use SSODialog should create a new instance, where the instance should always be immutable. And all of the data within that dialog should be stored within some storage (like dedupStorage, but probably with a higher level of abstraction, which will cover the dedupStorageKeys).

Video how it was reproduced

Screen.Recording.2022-12-14.at.21.18.08.mp4

Bug report: dev/bot-sso/ts can't support multi env

Describe the bug
After set System Environment Variables "TEAMSFX_MULTI_ENV" to true and got ssoToken successfully, I can't get my profile card from Microsoft Graph

To Reproduce
Steps to reproduce the behavior:

1. Go to example to get my project code
2. Set System Environment Variables "TEAMSFX_MULTI_ENV" to true
3. Press 'F5' and input 'me' in Chat page
4. Press 'continue' button to get ssoToken
5. See the error

Expected behavior
Show profile card

Screenshots

VS Code Extension Information (please complete the following information):

• OS: [windows 10]
• Version [1.60.2(user setup)]
• Teams Toolkit Version [ms-teams-vscode-extension-2.7.1-alpha.6dc3b9f5.0]

Additional context
When I comment dedupStep function in bot/dialogs/ssoDialog.js, like this:

I will get multiple pictures if I open 2 or many clients of Teams under local debug mode.

But I still can't get profile card under remote debug mode after I provision and deploy my app.

Search UI not shown in share-now sample

There are references to search in the share-now sample but search isn't available in UI. How can I go about enabling it?

Unable to get any of the samples work - at last stage

Hello,

I am able to setup the code or us Teams Toolkit on VS code to build the bot. Everything works fine - creating Bot services, Restify server starts fine, Browser opens and allows to add app - but when I call REST API to send notification - no notification is received at Bot's end.

What am I missing here. Please help

Can not aquire token in sample 'graph-connector-app'

I am trying to run the sample "graph-connector-app".
When I hit F5 and the app opens it is trying to execute the following code in tabs\src\components\sample\lib\useLogin.ts :
await teamsfx.getCredential().getToken(scopes);
This outputs the following console messages but then hangs with an never ending loading-circle and the function never finishes. The tab never displays anything.
[Tue, 03 May 2022 12:44:02 GMT] : @microsoft/teamsfx : Info - Create teams user credential tabs/src/components/sample/lib/useTeamsFx.ts:14
[Tue, 03 May 2022 12:44:02 GMT] : @microsoft/teamsfx : Verbose - Validate authentication configuration tabs/src/components/sample/lib/useTeamsFx.ts:14
[Tue, 03 May 2022 12:44:02 GMT] : @microsoft/teamsfx : Info - Create teams user credential tabs/src/components/sample/lib/useTeamsFx.ts:14
[Tue, 03 May 2022 12:44:02 GMT] : @microsoft/teamsfx : Verbose - Validate authentication configuration tabs/src/components/sample/lib/useTeamsFx.ts:14
[Tue, 03 May 2022 12:44:02 GMT] : @microsoft/teamsfx : Info - Get basic user info from SSO token

Getting error while adding "Hello world in team meeting" app to team

In the meeting when i click on save the config ,i am getting below erro
"We couldn't save your tab settings. Please try again."

How long connections are stored in notification.localstore.json?

Hi!

When I test the bot locally, I have no issues between bot and users.
I mean: Users still receive notifications from the bot (So I guess because users are always present in notification.localstore.json)

However, in production, users do receive notifications from the bot when they install the application. But after a certain time (how long?), the bot no longer finds the users and can no longer send notifications messages to them.

For the bot to be able to send new notification messages to users, the user must "respond" to the bot. And then it works again.

So I have 3 questions:

• After how long are users no longer taken into account by the bot?
• Is there a way to maintain the connection between the bot and the user (for example, until the user uninstalls the application?)
• If not, is there a way to modify/increase the time before the connection between the bot and the user is deleted?

Here are the links I found about notification storage but not implemented it yet:

• Use Azure Blob Storage to persist notification connections : notification.localstore.json
• Add notification storage implementation sample : (99eb772) https://github.com/OfficeDev/TeamsFx-Samples/blob/ga/adaptive-card-notification/bot/src/storage/blobsStorage.ts

Last question

• If we implemented notification.localstore.json ourself, where we can found it Azure please?

Thank you!

[SQL.SqlCheckAdminError]: Failed to check AAD admin 'todolista469e7'. maxPageSize is not supported by this operation

Hi guys,

Trying to build the ToDoList sample app with SQL backend (https://github.com/OfficeDev/TeamsFx-Samples/tree/v1.1.0/todo-list-with-Azure-backend) , I keep getting the error message:

[SQL.SqlCheckAdminError]: Failed to check AAD admin 'todolista469e7'. maxPageSize is not supported by this operation.

I couldn't find anything on Stackoverflow and after asking Chat GPT-3 I only realise that the parameter maxPageSize may not even be needed for such a simple application. It's answer:

This error might occur while trying to connect an SQL instance to an Azure AD tenant.
This feature is typically used to limit the number of items returned in a query to a specific number. If the maxPageSize parameter is set to a value other than 0, the query will return a maximum of that number of items. In this case, it seems that the operation being performed does not support this parameter.

Even so, not sure how to resolve this issue and where to find the maxPageSize parameter. Any help would be much appreciated

useTeams is returning old context model

I cloned the "hello-world-tab-without-sso" project from the "dev" branch. I have upgraded the app to V2 SDK.

I am using the useTeams function from the "msteams-react-base-component" package and it is returning the old context object structure instead of new context structure that is updated in teams sdk V2. I am using @microsoft/teams-js: "^2.0.0" in my app.

When I use the below pattern, it returns old structure from V1 sdk as well as in some cases the context object is returned null.
Example:
`
import { useTeams } from "msteams-react-base-component";
export default function App() {
const { context } = useTeams({})[0];

useEffect(() => {

// Returns old context model
console.log(context);
}, [context])

return (
<>Demo app</>
);
}
`

But when I use the app.getContext(), it returns the new structure as well as work perfectly every time.
`
import { app } from "@microsoft/teams-js";
import { ReactElement, useEffect, useState } from "react";

export default function App(): ReactElement {
const [context, setContext] = useState({} as app.Context);

useEffect(() => {
if (!app.isInitialized()) {
app.initialize();
}
app.getContext().then((context) => {
setContext(context);
console.log(context);
}).catch((err) => {
console.error("Error getting context -> ", err);
});

}, []);

return (
<>Demo app</>
);

}
`

I do not see any update this package "msteams-react-base-component".

Getting an error when running whosnext project

I am using a Mac and the version of teams toolkit is v4.2.4.
I am getting below error when I run the app.

'Log files:
/Users/youngwoojung/.npm/_logs/2023-03-01T11_29_41_993Z-debug-0.log

npm resolution error report

While resolving: @fluidframework/[email protected]
Found: [email protected]
node_modules/fluid-framework
fluid-framework@"~1.0.1" from the root project

Could not resolve dependency:
peer fluid-framework@"^1.2.5" from @fluidframework/[email protected]
node_modules/@fluidframework/azure-client
@fluidframework/azure-client@"~1.0.2" from @microsoft/[email protected]
node_modules/@microsoft/live-share
@microsoft/live-share@"^1.0.0-preview.4" from the root project
@fluidframework/azure-client@"~1.0.1" from the root project

Conflicting peer dependency: [email protected]
node_modules/fluid-framework
peer fluid-framework@"^1.2.5" from @fluidframework/[email protected]
node_modules/@fluidframework/azure-client
@fluidframework/azure-client@"~1.0.2" from @microsoft/[email protected]
node_modules/@microsoft/live-share
@microsoft/live-share@"^1.0.0-preview.4" from the root project
@fluidframework/azure-client@"~1.0.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Are or will (incoming) webhooks be available on Teams Home (Family & Friends) Edition?

Sry is this isnt the right place, but its hard to find information about the personal edition of teams, even Bing chat didnt find anything :)
So could you tell me where I can find Dev Documentation for the Home Edition? Is this even the right name?

[Test issue for triage bot]

[Sample Onboard Request] Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using TypeScript and Teams Toolkit for Visual Studio Code sample

Owner:
@garrytrinder

ID:
stocks-multiparam-ts

Title:
Using multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using TypeScript and Teams Toolkit for Visual Studio Code sample

Description:
This sample demonstrates how to use multiple parameters in a plugin for Microsoft Copilot for Microsoft 365 using TypeScript and Teams Toolkit for Visual Studio Code.

Tags:
TS, Message Extension, Multi parameters

Time:
"5mins to run".

Configuration:
"Ready for local debug"

Thumbnail:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/blob/main/samples/msgext-multiparam-ts/assets/preview.png

(Optional) Demo GIF:

(Source code in this Repo) Source Code PR:

(Source code NOT in this Repo) Sample URL:
https://github.com/OfficeDev/Copilot-for-M365-Plugins-Samples/tree/main/samples/msgext-multiparam-ts

search-Based Message Extension not returning Adaptive Card

Hi guys, I have an issue with the search-based Message Extension.

When I debug locally, everything works fine. After deploying the messaging extension on Azure and testing it in the Teams app, I can search for specific queries. The Message Extension gives me the desired results, up to here we are good to go. The Problem: After I select one of the delivered search results, the messaging extension does not return the adaptive card. The chat-box in Teams is simply empty.

Anyone familiar with this issue?

todo-list-SPFx fails with SharePoint 404

A basic provisioning of todo-list-SPFx fails.

1. Create a new app using the Teams Toolkit.
2. Launch in Teams workbench (Edge).
3. Try to add to team.
4. Error: [HTTP]:404 - [CorrelationId]:3dbdc3a0-c01f-3000-e624-66166ba602ef [Version]:16.0.0.23821

It looks like the request to https://z58q4.sharepoint.com/sites/Johnny.Decimal/_api/web/hostedapps/add is causing the error. Visiting that page returns:

<m:error xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
  <m:code>-1, Microsoft.SharePoint.Client.ResourceNotFoundException</m:code>
  <m:message xml:lang="en-US">Cannot find resource for the request SP.RequestContext.current/web/hostedapps/.</m:message>
</m:error>

How do you a sample bot sso app to work in a group chat?

I can't figure out how to get it to work. Is there a way to get it to work in dev mode? It seems like the default running of the app only works with the direct chat to the bot. I would like to be able to send commands to the bot to have it report information to the whole team or group. I wonder if it's something with how it always asks me to add it when opening my browser, but then it isn't available to add to a chat. I was thinking I should be able to just @mybot from any chat to get it to help.

How to use app's VS Code CI/CD Workflows?

Hello

I'm working on https://github.com/OfficeDev/TeamsFx-Samples/tree/ga/hello-world-tab

It runs fine locally and I'm awaiting approval in my Tenant, so took a look at the 'Add CI/CD Workflows' action.

I run them .. I see no errors.

What do I do now please? It's not clear how to access or use the newly created workflows.

Thanks.

`teamsfx` cli isn't downloading the latest versions

I hope I'm going mad because if not, this is terribly disappointing.

At the command line, the following command:

teamsfx new template graph-connector-app

downloads a repository that is not the latest as per this repository.

The only file I've looked at is README.md but the version downloaded by teamsfx does not include the note about single-tenant provisioning at line 7 that was committed 3 weeks ago. I'm not going to go back and figure out which version it is downloading, assuming it even pulls from this repo.

This is maddening! All this time I've been trying to get stuff working and the tool isn't pulling the latest versions?! Tell me I'm wrong, please. I really want to be wrong.

Cannot add the tab to meetings

Hi, I found this sample in the Teams Toolkit and I tried it by download it and run the debug mode using VSCode. the Teams app is running in localhost but I cannot go to the next step after adding selecting a meeting, I don't see the next step to add the tab in the meeting.

Can you please help? How can I use this properly?

ngrok, error 6022, and Teams scaffolding

I wasn't sure where to place the following:

MicrosoftDocs/msteams-docs#6855

MGT Components are not rendering with MS Teams Toolkit

I didn't get the calendar events, to-do list and file-lists MGT components to render on the Teams browser on my local machine following the instructions in this blog:
https://devblogs.microsoft.com/microsoft365dev/build-a-productivity-dashboard-with-microsoft-teams-toolkit-for-visual-studio , although I created these artifacts on my M365 work/organisational account which I used to build the project.

I did get the login component to work, however which showed the logged in user
This is the learning outcome 3 as per this blog "Enhance your Teams app by accessing calendar events, to-do tasks and file folders" which could not be achieved.

I have attached an image of the output Teams browser with personal tab minus the contents from the MGT components although the logged in user is correctly rendered

Can you or anybody in the team help solve this urgent issue?
Regards,
Kaushik Roy Chowdhury
Member .NET Foundation

[Test issue for triage bot]

Testing

[Sample Onboard Request] Large Scale Notification Bot

Owner:
@yiqing-zhao

ID:
large-scale-notification

Title:
Large Scale Notification Bot

Description:
This sample demonstrates the architecture of a Teams notfication bot app created by Teams Toolkit to send individual chat messages to a large number of users in a tenant.

Onboard Date:
ASAP

Tags:
You can give your samples a set of tags so that users can easily locate your sample from a group of samples. Those tags can be:

• TS
• Bot
• Azure Durable Functions
• Notification
• Large user scale
  You can customize the tag you used for your sample, the recommended number of tags is less than 5.

Time:
30 mins to run

Configuration:
Manual configurations required

Thumbnail:
https://github.com/OfficeDev/TeamsFx-Samples/blob/yiqingzhao/largescale-notification/large-scale-notification/assets/thumbnail.png

(Optional) Demo GIF:
No GIF

(Source code in this Repo) Source Code PR:
#1014

(Source code NOT in this Repo) Sample URL:
The URL if your sample code resides in another sample repo. It's better to use a tag instead of a branch for stablility.
E.g., "https://github.com/xxx/xxx/tree/v1.0/xxx".

(Optional) Minimum Teams Toolkit Version:
V5

(Optional) Maximum Teams Toolkit Version:
Teams Toolkit version requirement to run the sample - maximum version

ProvisionError: Failed to provision Developer Portal bot registration

I'm following the guidelines to debug this TeamsFx-Samples/share-now at vscode, the provision & deploying process are all good, the bot has successfully been deployed on Azure.
However, the task 'set-up-bot' will fail and throw an error when I'm trying to debug the project locally:

[2022-12-11T02:55:29.879Z] [Info] - Finished 'Set up tab' Visual Studio Code task in 0.12 seconds.
[2022-12-11T02:55:29.917Z] [Info] - Running 'Set up bot' Visual Studio Code task.

(Totally 5 steps) Teams Toolkit is setting up bot for debugging.

(1/5) Registering the AAD app which is required to create the bot ...
(2/5) Registering the bot in Bot Framework Portal ...

Summary:

√ Skip registering AAD app but use the existing AAD app from args: c87d9e6d-5f17-4c76-abe3-5a1c1643e937

× ProvisionError: Failed to provision Developer Portal bot registration.

My questions:

1. What is this 'Registering the bot in Bot Framework Portal ' thing doing
2. how can I deal with this error.

[Feature Request] Devcontainer Support

Hi awesome folks,

Are there any plans to have devcontainer support for these FX samples in the future?

I personally won't install node locally and would prefer to use devcontainers/codespaces to develop/test/debug any projects I work on.

Happy to have an attempt at creating a devcontainer if it's possible.

[Sample Onboard Request] Graph Connector Bot

Owner:
@formulahendry

ID:
graph-connector-bot

Title:
Graph Connector Bot

Description:
This sample app showcases how to build a Teams command bot that queries custom data ingested into Microsoft Graph using Graph connector.

Tags:

• TS
• Bot
• Microsoft Graph connectors

Time:
30mins to run

Configuration:
Manual configurations required

Thumbnail:
https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/graph-connector-bot/assets/thumbnail.png

(Optional) Demo GIF:
https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/graph-connector-bot/assets/sampleDemo.gif

(Source code in this Repo) Source Code PR:
#469

(Source code NOT in this Repo) Sample URL:
N/A

(Optional) Minimum Teams Toolkit Version:
V5

(Optional) Maximum Teams Toolkit Version:
N/A

FAQ Plus configuration app is blank

Due to intermittent error from cdnjs when restoring necessary javascript libraries, FAQ Plus configuration app deployment may fail when you try FAQ Plus sample. You will see following page in this case.

We're working on a workaround and will add workaround to this issue later.

Share now sample fails to provision with Failed to create user error

Following the steps to Provision, it fails with this error:

[Error] - code:SQL.DatabaseUserCreateError, message: Failed to create user 'sharenowdev2f4ef03' in database (sharenowdev2f4ef03)Reason: Could not retrieve the token associated with Visual Studio Code. Did you connect using the 'Azure Account' extension?. You can follow https://aka.ms/teamsfx-sql-help to handle it.

How to make bot references persistant

Actually i'm working on an app ( bot + tab ) : in meeting app

My tab is asking for participant infos.

Actually when I made an edit on back-end then reload it all my references get lost

my question is how can I change meetingInfoRepository.js to persist data on Azure Blob Storage instead of local Object?

All code example is here

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

/**
 * This component is used to store meeting and conversation context.
 */
class MeetingInfoRepository {
    constructor(name, year) {
        this.conversationReferences = {};
        this.meetingContexts = {};
    }

    setConversationReference(conversationReference) {
        this.conversationReferences[conversationReference.conversation.id] = conversationReference;
    }

    getConversationReference(conversationId) {
        return this.conversationReferences[conversationId];
    }

    setMeetingContext(meetingId, context) {
        this.meetingContexts[meetingId] = context;
        console.log("Update meeting context: ", Object.keys(this.meetingContexts));
    }

    getMeetingContext(meetingId) {
        console.log("Trying to get context with ID: ", meetingId);
        return this.meetingContexts[meetingId];
    }
}

// Export singleton
module.exports = new MeetingInfoRepository();