devblogs.microsoft.com
Open in
urlscan Pro
2a02:26f0:6c00:29e::2f1e
Public Scan
Submitted URL: https://click.email.microsoftemail.com/?qs=82bfa38a1a565ad8eb10f5b441d6a81699069c83a0a60234a515136f60b3cc0f7786b2fdda4893bc01790208bbfe...
Effective URL: https://devblogs.microsoft.com/microsoft365dev/microsoft-teams-toolkit-for-visual-studio-code-now-generally-available/?ocid=aid...
Submission: On July 29 via api from US — Scanned from DE
Effective URL: https://devblogs.microsoft.com/microsoft365dev/microsoft-teams-toolkit-for-visual-studio-code-now-generally-available/?ocid=aid...
Submission: On July 29 via api from US — Scanned from DE
Form analysis 3 forms found in the DOM
Name: searchForm — GET /search
<form class="c-search" autocomplete="off" id="searchForm" name="searchForm" role="search" action="/search" method="GET"
data-seautosuggest="{"queryParams":{"market":"en-us","clientId":"7F27B536-CF6B-4C65-8638-A0F8CBDFCA65","sources":"Microsoft-Terms,Iris-Products,DCatAll-Products","filter":"+ClientType:StoreWeb","counts":"5,1,5"},"familyNames":{"Apps":"App","Books":"Book","Bundles":"Bundle","Devices":"Device","Fees":"Fee","Games":"Game","MusicAlbums":"Album","MusicTracks":"Song","MusicVideos":"Video","MusicArtists":"Artist","OperatingSystem":"Operating System","Software":"Software","Movies":"Movie","TV":"TV","CSV":"Gift Card","VideoActor":"Actor"}}"
data-seautosuggestapi="https://www.microsoft.com/services/api/v3/suggest"
data-m="{"cN":"GlobalNav_Search_cont","cT":"Container","id":"c1c9c3m1r1a1","sN":1,"aN":"c9c3m1r1a1"}" aria-expanded="false">
<input id="cli_shellHeaderSearchInput" aria-label="Search Expanded" aria-controls="universal-header-search-auto-suggest-transparent" aria-owns="universal-header-search-auto-suggest-ul" type="search" name="query" role="text" placeholder="Search"
data-m="{"cN":"SearchBox_nav","id":"n1c1c9c3m1r1a1","sN":1,"aN":"c1c9c3m1r1a1"}" data-toggle="tooltip" data-placement="right" title="" data-original-title="Search">
<input type="hidden" name="blog" value="/microsoft365dev/" data-m="{"cN":"HiddenInput_nav","id":"n2c1c9c3m1r1a1","sN":2,"aN":"c1c9c3m1r1a1"}">
<button id="search" aria-label="Search" class="c-glyph" data-m="{"cN":"Search_nav","id":"n3c1c9c3m1r1a1","sN":3,"aN":"c1c9c3m1r1a1"}" data-bi-mto="true" aria-expanded="false">
<span role="presentation">Search</span>
<span role="tooltip" class="c-uhf-tooltip c-uhf-search-tooltip">Search</span>
</button>
<div class="m-auto-suggest" id="universal-header-search-auto-suggest-transparent" role="group">
<ul class="c-menu" id="universal-header-search-auto-suggest-ul" aria-label="Search Suggestions" aria-hidden="true" data-bi-dnt="true" data-bi-mto="true" data-js-auto-suggest-position="default" role="listbox" data-tel="jsll"
data-m="{"cN":"search suggestions_cont","cT":"Container","id":"c4c1c9c3m1r1a1","sN":4,"aN":"c1c9c3m1r1a1"}"></ul>
</div>
</form><form id="wp-link" tabindex="-1">
<input type="hidden" id="_ajax_linking_nonce" name="_ajax_linking_nonce" value="68ba0d7151">
<h1 id="link-modal-title">Insert/edit link</h1>
<button type="button" id="wp-link-close"><span class="screen-reader-text">Close</span></button>
<div id="link-selector">
<div id="link-options">
<p class="howto" id="wplink-enter-url">Enter the destination URL</p>
<div>
<label><span>URL</span>
<input id="wp-link-url" type="text" aria-describedby="wplink-enter-url"></label>
</div>
<div class="wp-link-text-field">
<label><span>Link Text</span>
<input id="wp-link-text" type="text"></label>
</div>
<div class="link-target">
<label><span></span>
<input type="checkbox" id="wp-link-target"> Open link in a new tab</label>
</div>
</div>
<p class="howto" id="wplink-link-existing-content">Or link to existing content</p>
<div id="search-panel">
<div class="link-search-wrapper">
<label>
<span class="search-label">Search</span>
<input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="wplink-link-existing-content">
<span class="spinner"></span>
</label>
</div>
<div id="search-results" class="query-results" tabindex="0">
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
<div id="most-recent-results" class="query-results" tabindex="0">
<div class="query-notice" id="query-notice-message">
<em class="query-notice-default">No search term specified. Showing recent items.</em>
<em class="query-notice-hint screen-reader-text">Search or use up and down arrow keys to select an item.</em>
</div>
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
</div>
</div>
<div class="submitbox">
<div id="wp-link-cancel">
<button type="button" class="button">Cancel</button>
</div>
<div id="wp-link-update">
<input type="submit" value="Add Link" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
</div>
</div>
</form>#
<form id="myForm" action="#">
<div class="modal-body">
<div class="form-group">
<label for="code-text">Paste your code snippet</label>
<textarea class="form-control" id="code-text" style="height: 150px;"></textarea>
</div>
</div>
</form>Text Content
We use optional cookies to improve your experience on our websites, such as
through social media connections, and to display personalized advertising based
on your online activity. If you reject optional cookies, only cookies necessary
to provide you the services will be used. You may change your selection by
clicking “Manage Cookies” at the bottom of the page. Privacy Statement
Third-Party Cookies
Accept Reject Manage cookies
Skip to main content
Microsoft
Microsoft 365 Platform
Microsoft 365 Platform
Microsoft 365 Platform
* Home
* DevBlogs
* Developer
* Visual Studio
* Visual Studio Code
* Visual Studio for Mac
* DevOps
* Developer support
* CSE Developer
* Engineering@Microsoft
* Azure SDK
* IoT
* Command Line
* Perf and Diagnostics
* Dr. International
* Notification Hubs
* Math in Office
* Technology
* DirectX
* PIX
* SurfaceDuo
* Startups
* Sustainable Engineering
* Windows AI Platform
* Languages
* C++
* C#
* F#
* Visual Basic
* TypeScript
* PowerShell Community
* PowerShell Team
* Python
* Q#
* JavaScript
* Java
* Java Blog in Chinese
* .NET
* .NET
* .NET MAUI
* Blazor
* ASP.NET
* NuGet
* Xamarin
* Platform Development
* #ifdef Windows
* Apps for Windows
* Azure Depth Platform
* Azure Government
* Bing Dev Center
* Microsoft Edge Dev
* Microsoft Azure
* Microsoft 365 Developer
* Old New Thing
* Windows MIDI and Music dev
* Windows Search Platform
* Data Development
* Azure Cosmos DB
* Azure Data Studio
* Azure SQL Database
* OData
* Revolutions R
* SQL Server Data Tools
* More
Login
Search Search
Cancel
MICROSOFT TEAMS TOOLKIT FOR VISUAL STUDIO CODE NOW GENERALLY AVAILABLE
Tomomi Imura
May 26th, 20224
Previously, I introduced Microsoft Teams Toolkit preview in a series of blog
posts. I am happy to announce that Teams Toolkit for Visual Studio Code and the
Teams Toolkit CLI are now generally available! 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. 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!
INTRODUCING SCENARIO-BASED TEAMS APPS
Prior to this release, Teams Toolkit preview provided app template code based on
the Teams capabilities, such as Tabs, Bots, and Messaging Extensions. However,
in the reality, we design products based on the real-life scenarios.
So, with this GA release, we have added the scenario-based Teams app template,
along with the existing basic capabilities templates.
Here are the newly added features—
BOT NOTIFICATIONS
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!
When you are first setting up a new app in Teams Toolkit, click Notification
bot under Scenario-based Teams app. to let Toolkit generate the scaffolding to
create a bot that sends notifications.
You can specify the event for that message—a trigger or a timer. If you want
your bot to send Teams periodical reminder of something, choose the Timer
Trigger.
If you are using JavaScript, take a look at the
file, source/adaptiveCards/notification-default.json and 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.
You can also live-preview how the JSON is displayed as the Adaptive Card too.
Just click where it says Preview and Debug Adaptive Cards to preview, or get the
Visual Studio Code extension.
And in src/timerTrigger.js (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!
for (const target of await bot.notification.installations()) {
await target.sendAdaptiveCard(
AdaptiveCards.declare(notificationTemplate).render({
title: 'Aloha! This is your daily reminder.',
appName: 'Contoso Bot',
description: `This is a sample time-triggered notification (${timeStamp}).`,
notificationUrl: 'https://www.adaptivecards.io/',
})
);
}
Once you run the bot with the F5 debugger, the bot sends you a notification in
your scheduled time.
There are more you can do with bots—
COMMAND BOT
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.
Now with the Toolkit, you can start creating a command bot easier than ever.
After clicking Create a new Teams app in Teams Toolkit, select the Command
bot from the menu and proceed the rest.
Once the template code is generated, see the commandHandler function. For
example, if you chose JavaScript, the
file, bot/src/helloWorldCommandHandler.js you see the trigger word and response
message.
You can alter the handler (or create a new handler) to create your command:
class HelloWorldCommandHandler {
triggerPatterns = 'Hi kitty';
async handleCommandReceived(context, message) {
// render your adaptive card for reply message
const cardData = {
title: 'MeowBot says',
body: 'Meow meow meow',
image: 'https://placekitten.com/500/400',
imageAlt: 'cat'
};
return MessageBuilder.attachAdaptiveCard(helloWorldCard, cardData);
}
}
And define the response message UI with the Adaptive Cards previewer
in bot/src/adaptiveCards/helloworldCommand.json.
Now, when a user sends a “Hi kitty” message to the bot, the bot will respond.
--------------------------------------------------------------------------------
EXPAND YOUR APPS TO OUTLOOK AND OFFICE
More exciting news is that now your Teams apps can run on Outlook and Office!
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.
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. This will
generate a scaffolding code with helpful code template and samples, either in
JavaScript or TypeScript (whichever one you choose!).
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!
--------------------------------------------------------------------------------
MORE UPDATES FOR TEAMS DEVELOPMENT
There are more updates with Microsoft 365 and Teams app developments.
TEAMS SDK V2 & UPDATED MANIFEST
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.
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.
Toolkit also revises a Teams manifest to the latest schema to support Office and
Outlook.
FLUENT UI COMPONENT LIBRARY FOR TABS APP
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. The Teams UI Component Library is here
to help with that.
Teams UI Component Library is a UI library built on top of Fluent UI React.
Fluent is Microsoft’s design system that provides you with a set of UI libraries
for all M365.
And the base components library, Fluent UI React is now upgraded to v9, which
supports design tokens and has major performance improvements
--------------------------------------------------------------------------------
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. See
you again at the next post
LEARN MORE
* Teams Toolkit documentation
* Get started with Microsoft Teams platform
SHOUTOUT
A big hurrah to the Teams Toolkit engineering team! And, thank you, Yu Zhang,
Zhidi Shang, John Miller, Zhenya Savchenko, and Pierce Boggan, for helping me
write this article
Happy coding!
TOMOMI IMURA
Follow
Posted in Adaptive Cards Microsoft TeamsTagged Bots Microsoft Teams Toolkit
Teams Toolkit CLI Visual Studio Visual Studio Code
READ NEXT
SharePoint Framework 1.15 Release Candidate now available with new features and
updates
We are excited to announce first release candidate of the SharePoint Framework
(SPFx) 1.15 - with updates for Viva Connections, Microsoft Teams and SharePoint
Online experiences.
Vesa Juvonen
June 1, 2022
0 comment
Breaking changes for the Insights API (beta)
We’re announcing an upcoming breaking change for developers using the Insights
API (beta) that will go into effect in mid-June 2022.
Microsoft Graph team
June 2, 2022
0 comment
4 COMMENTS
LEAVE A COMMENTCANCEL REPLY
Log in to join the discussion.
* David Cuccia May 29, 2022 10:36 am
collapse this comment
Totally missed the Teams Toolkit for Visual Studio preview announcement at
BUILD – thanks for the heads up! Will you be blogging about this too as well?
Log in to Reply
* Tomomi Imura June 9, 2022 3:31 pm
collapse this comment
It was just announced, and you didn’t miss much! I personally do not have
the plan to blog but the documentation will be updated accordingly!
Log in to Reply
* Ian Chivers May 30, 2022 3:55 am
collapse this comment
Can I upgrade an existing Teams Toolkit Visual Studio Code project which has
existing tab to be Outlook compatible? I’ve gone through all the
documentation on upgrading, including the Javascript SDK and manifest file.
But, it doesn’t update the .vs launch.json to add in the option to debug in
Outlook.
Log in to Reply
* Kuojian Lu June 7, 2022 7:28 pm
collapse this comment
Teams Toolkit does not provide such a command to update
`.vscode/launch.json` and `.vscode/tasks.json`. However, you can update
them by following steps manually to make the app debuggable in Outlook and
Office.com.
Take the personal tab app for an example:
1. Add following configurations in `.vscode/launch.json`.
{
"name": "Attach to Frontend in Outlook (Edge)",
"type": "pwa-msedge",
"request": "launch",
"url": "https://outlook.office.com/host/${localTeamsAppInternalId}?${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Backend"
],
"presentation": {
"group": "all",
"hidden": true
}
},
{
"name": "Attach to Frontend in Outlook (Chrome)",
"type": "pwa-chrome",
"request": "launch",
"url": "https://outlook.office.com/host/${localTeamsAppInternalId}?${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Backend"
],
"presentation": {
"group": "all",
"hidden": true
}
},
{
"name": "Attach to Frontend in Office (Edge)",
"type": "pwa-msedge",
"request": "launch",
"url": "https://www.office.com/m365apps/${localTeamsAppInternalId}?auth=2&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Backend"
],
"presentation": {
"group": "all",
"hidden": true
}
},
{
"name": "Attach to Frontend in Office (Chrome)",
"type": "pwa-chrome",
"request": "launch",
"url": "https://www.office.com/m365apps/${localTeamsAppInternalId}?auth=2&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Backend"
],
"presentation": {
"group": "all",
"hidden": true
}
},
2. Add following compounds in `.vscode/launch.json`.
{
"name": "Debug in Outlook (Edge)",
"configurations": [
"Attach to Frontend in Outlook (Edge)",
"Attach to Backend"
],
"preLaunchTask": "Pre Debug Check & Start All & Install App",
"presentation": {
"group": "group 2: Outlook",
"order": 1
},
"stopAll": true
},
{
"name": "Debug in Outlook (Chrome)",
"configurations": [
"Attach to Frontend in Outlook (Chrome)",
"Attach to Backend"
],
"preLaunchTask": "Pre Debug Check & Start All & Install App",
"presentation": {
"group": "group 2: Outlook",
"order": 2
},
"stopAll": true
},
{
"name": "Debug in Office (Edge)",
"configurations": [
"Attach to Frontend in Office (Edge)",
"Attach to Backend"
],
"preLaunchTask": "Pre Debug Check & Start All & Install App",
"presentation": {
"group": "group 3: Office",
"order": 1
},
"stopAll": true
},
{
"name": "Debug in Office (Chrome)",
"configurations": [
"Attach to Frontend in Office (Chrome)",
"Attach to Backend"
],
"preLaunchTask": "Pre Debug Check & Start All & Install App",
"presentation": {
"group": "group 3: Office",
"order": 2
},
"stopAll": true
}
3. Add following tasks in `.vscode/tasks.json`.
{
"label": "Pre Debug Check & Start All & Install App",
"dependsOn": [
"validate local prerequisites",
"prepare local environment",
"Start All",
"install app in Teams"
],
"dependsOrder": "sequence"
},
{
"label": "install app in Teams",
"type": "shell",
"command": "exit ${command:fx-extension.install-app-in-teams}",
"presentation": {
"reveal": "never"
}
},
For a personal tab app, see this sample for reference. For a search-based
message extension app, see this sample for reference.
Log in to Reply
TOPICS
Microsoft Graph Office Add-ins Microsoft Teams SharePoint Framework Microsoft
365 Developer Microsoft identity platform Microsoft Viva Power Platform Adaptive
Cards Fluid Framework SharePoint
EXPLORE MICROSOFT 365 PLATFORM LEARNING PATHS
Learn new skills to develop on the Microsoft 365 platform. Explore our learning
paths.
Get started ->
JOIN THE MICROSOFT 365 DEVELOPER PROGRAM TODAY!
Get a free sandbox, tools, and other resources you need to build solutions for
the Microsoft 365 platform.
Join now ->
STAY INFORMED
INSERT/EDIT LINK
Close
Enter the destination URL
URL
Link Text
Open link in a new tab
Or link to existing content
Search
No search term specified. Showing recent items. Search or use up and down arrow
keys to select an item.
Cancel
CODE BLOCK
×
Paste your code snippet
Cancel Ok
What's new
* Surface Pro 8
* Surface Laptop Studio
* Surface Pro X
* Surface Go 3
* Surface Duo 2
* Surface Pro 7+
* Windows 11 apps
* HoloLens 2
Microsoft Store
* Account profile
* Download Center
* Microsoft Store support
* Returns
* Order tracking
* Virtual workshops and training
* Microsoft Store Promise
* Flexible Payments
Education
* Microsoft in education
* Devices for education
* Microsoft Teams for Education
* Microsoft 365 Education
* Education consultation appointment
* Educator training and development
* Deals for students and parents
* Azure for students
Business
* Microsoft Cloud
* Microsoft Security
* Azure
* Dynamics 365
* Microsoft 365
* Microsoft Advertising
* Microsoft Industry
* Microsoft Teams
Developer & IT
* Developer Center
* Documentation
* Microsoft Learn
* Microsoft Tech Community
* Azure Marketplace
* AppSource
* Microsoft Power Platform
* Visual Studio
Company
* Careers
* About Microsoft
* Company news
* Privacy at Microsoft
* Investors
* Diversity and inclusion
* Accessibility
* Security
English (United States)
* Sitemap
* Contact Microsoft
* Privacy
* Manage cookies
* Terms of use
* Trademarks
* Safety & eco
* About our ads
* © Microsoft 2022
Notifications