{"id":10614,"date":"2022-05-26T08:00:17","date_gmt":"2022-05-26T15:00:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=10614"},"modified":"2022-10-26T14:39:58","modified_gmt":"2022-10-26T21:39:58","slug":"microsoft-teams-toolkit-for-visual-studio-code-now-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-teams-toolkit-for-visual-studio-code-now-generally-available\/","title":{"rendered":"Microsoft Teams Toolkit for Visual Studio Code now generally available"},"content":{"rendered":"
\n
\n
Previously<\/a>, I introduced Microsoft Teams Toolkit preview in a series of blog posts. I am happy to announce that <\/span>Teams Toolkit for Visual Studio Code<\/a> and the Teams Toolkit CLI are now <\/span>generally available<\/em>! And, for everyone building .NET web apps, Teams Toolkit for Visual Studio is available now in preview. I hope you caught the announcement at Build 2022 earlier this week. <\/span>We have made a lot of updates and improvement since the preview versions. I’d like to highlight some of the key new features with Teams Toolkit for VS Code that will excite you the most!<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/header>\n
\n
\n

\"Doodles<\/a><\/p>\n

<\/h3>\n

\ud83c\udf9e Introducing scenario-based Teams apps<\/h2>\n

Prior to this release, Teams Toolkit preview provided app template code based on the Teams capabilities, such as Tabs<\/a>,\u00a0Bots<\/a>, and\u00a0Messaging Extensions<\/a>. However, in the reality, we design products based on the\u00a0real-life scenarios<\/a>.<\/p>\n

 <\/p>\n

\"User<\/a><\/p>\n

So, with this GA release, we have added the scenario-based Teams app template, along with the existing basic capabilities templates.<\/p>\n

Here are the newly added features\u2014<\/p>\n

\ud83e\udd16 Bot Notifications<\/h2>\n

Sending bot notification can be a common scenario for a chat bot applications and for Teams app too. However, the development process for Teams apps has been cumbersome… Well, we made the process simpler as Toolkit now can help you create the notification feature for your app by tweaking the generated code!<\/p>\n

When you are first setting up a new app in Teams Toolkit, click\u00a0Notification bot<\/strong>\u00a0under Scenario-based Teams app. to let Toolkit generate the scaffolding to create a bot that sends notifications.<\/p>\n

\"Screenshot<\/a><\/p>\n

You can specify the event for that message\u2014a trigger or a timer. If you want your bot to send Teams periodical reminder of something, choose the Timer Trigger.<\/p>\n

\"Screenshot<\/a><\/p>\n

If you are using JavaScript, take a look at the file,\u00a0source\/adaptiveCards\/notification-default.json<\/code>\u00a0and see where specifies the message structure in JSON. You can keep the message just with some simple text, or with a list, table, buttons, etc.<\/p>\n

You can also live-preview how the JSON is displayed as the Adaptive Card too. Just click where it says\u00a0Preview and Debug Adaptive Cards<\/strong> to preview, or get the Visual Studio Code extension.<\/p>\n

\"Screenshot<\/a><\/p>\n

And in\u00a0src\/timerTrigger.js<\/code>\u00a0(for Timer-based notifications), you can see how the message to be sent is applied to the Adaptive Card. Try changing the strings and see how it works on Teams client!<\/p>\n

\n
for<\/span> (<\/span>const<\/span> target<\/span> of<\/span> await<\/span> bot<\/span>.<\/span>notification<\/span>.<\/span>installations<\/span>())<\/span> {<\/span>\r\n    await<\/span> target<\/span>.<\/span>sendAdaptiveCard<\/span>(<\/span>\r\n      AdaptiveCards<\/span>.<\/span>declare<\/span>(<\/span>notificationTemplate<\/span>).<\/span>render<\/span>({<\/span>\r\n        title<\/span>:<\/span> '<\/span>Aloha! This is your daily reminder.<\/span>'<\/span>,<\/span>\r\n        appName<\/span>:<\/span> '<\/span>Contoso Bot<\/span>'<\/span>,<\/span>\r\n        description<\/span>:<\/span> `This is a sample time-triggered notification (<\/span>${<\/span>timeStamp<\/span>}<\/span>).`<\/span>,<\/span>\r\n        notificationUrl<\/span>:<\/span> '<\/span>https:\/\/www.adaptivecards.io\/<\/span>'<\/span>,<\/span>\r\n      })<\/span>\r\n    );<\/span>\r\n  }<\/span><\/code><\/pre>\n
\n
<\/div>\n<\/div>\n<\/div>\n
Once you run the bot with the F5 debugger, the bot sends you a notification in your scheduled time.<\/p>\n
\"Screenshot<\/a><\/p>\n
There are more you can do with bots\u2014<\/p>\n
\ud83d\udcac Command Bot<\/h2>\n
Another common scenario would be a bot that respond to a command. You might think about some conversational bot but for most cases, all you need is a simple bot that answers your commands, like what you may have used “slash commands” in some services.<\/p>\n
Now with the Toolkit, you can start creating a command bot easier than ever.<\/p>\n
After clicking\u00a0Create a new Teams<\/strong>\u00a0app in Teams Toolkit, select the\u00a0Command bot<\/strong>\u00a0from the menu and proceed the rest.<\/p>\n
Once the template code is generated, see the\u00a0commandHandler<\/code>\u00a0function. For example, if you chose JavaScript, the file,\u00a0bot\/src\/helloWorldCommandHandler.js<\/code>\u00a0you see the trigger word and response message.<\/p>\n
You can alter the handler (or create a new handler) to create your command:<\/p>\n
\n
class<\/span> HelloWorldCommandHandler<\/span> {<\/span>\r\n  triggerPatterns<\/span> =<\/span> '<\/span>Hi kitty<\/span>'<\/span>;<\/span>\r\n\r\n  async<\/span> handleCommandReceived<\/span>(<\/span>context<\/span>,<\/span> message<\/span>)<\/span> {<\/span>\r\n \/\/ render your adaptive card for reply message<\/span>\r\n    const<\/span> cardData<\/span> =<\/span> {<\/span>\r\n      title<\/span>:<\/span> '<\/span>MeowBot \ud83d\udc31 says<\/span>'<\/span>,<\/span>\r\n      body<\/span>:<\/span> '<\/span>Meow meow meow<\/span>'<\/span>,<\/span>\r\n      image<\/span>:<\/span> '<\/span>https:\/\/placekitten.com\/500\/400<\/span>'<\/span>,<\/span>\r\n      imageAlt<\/span>:<\/span> '<\/span>cat<\/span>'<\/span>\r\n    };<\/span>\r\n    return<\/span> MessageBuilder<\/span>.<\/span>attachAdaptiveCard<\/span>(<\/span>helloWorldCard<\/span>,<\/span> cardData<\/span>);<\/span>\r\n  }<\/span>\r\n}<\/span><\/code><\/pre>\n
\n
<\/div>\n<\/div>\n<\/div>\n
And define the response message UI with the Adaptive Cards previewer in\u00a0bot\/src\/adaptiveCards\/helloworldCommand.json<\/code>.<\/p>\n
Now, when a user sends a “Hi kitty” message to the bot, the bot will respond.<\/p>\n
\"Screenshot<\/a><\/p>\n
\n
\ud83d\udcec Expand Your Apps to Outlook and Office<\/h2>\n
More exciting news is that now your Teams apps can run on Outlook and Office!<\/p>\n
When you create a new app, the previous version of Toolkit only allowed you to choose one of the capabilities, however, with the new Toolkit, now you have more choices.<\/p>\n
To create an app that runs on other Microsoft 365 products, like Outlook and Office, choose one from the extended Teams apps across Microsoft 365. <\/strong>This will generate a scaffolding code with helpful code template and samples, either in JavaScript or TypeScript (whichever one you choose!).<\/p>\n
\"Screenshot<\/a><\/p>\n
The “F5” debug feature is your friend when you are testing out your code in VS Code, and now the debug profile in Teams Toolkit includes Outlook and Office, where you can simply select one and see your app running!<\/p>\n
\"Screenshot<\/a><\/p>\n
\"Screenshot<\/a><\/p>\n
\n
\ud83d\udce2 More updates for Teams development<\/h2>\n
There are more updates with Microsoft 365 and Teams app developments.<\/p>\n
\ud83d\udcdc Teams SDK v2 & Updated Manifest<\/h3>\n
Teams client SDK has been around for you to create tabs and task modules, and come with functionalities like tab configurations and theme detection, as well as authentication. Now it is upgraded to v2, and the latest version comes with functionalities to extend Teams app to run in Outlook and Office.<\/p>\n
The new Teams Toolkit utility also allows you to upgrade your existing apps that uses Teams-js SDK v1 to use the SDK v2, which updates imports & API calls.<\/p>\n
Toolkit also revises a Teams manifest to the latest schema to support Office and Outlook.<\/p>\n
\ud83d\uddbc Fluent UI Component Library for Tabs App<\/h3>\n
When creating a tab app (which is a web embed in Teams), you would want the UI for your app to look and feel like Teams.\nThe\u00a0Teams UI Component Library<\/strong>\u00a0is here to help with that.<\/p>\n
Teams UI Component Library<\/a>\u00a0is a UI library built on top of\u00a0Fluent UI React<\/strong>.\nFluent is Microsoft\u2019s design system that provides you with a set of UI libraries for all M365.<\/p>\n
And the base components library,\u00a0Fluent UI React<\/a>\u00a0is now upgraded to v9, which supports design tokens and has major performance improvements \ud83c\udf89<\/p>\n
\n
I hope you found the article useful to help you get started with your Teams app development with Teams Toolkit, especially if you are new to Teams app development! Please don’t hesitate to drop your comments and feedback here.\u00a0See you again at the next post \ud83d\udc4b<\/p>\n
\ud83d\udcda Learn More<\/h2>\n