Create Teams workflow bot
The workflow bot allows users to interact with an Adaptive Card enabled by the Adaptive Card action handler feature in the workflow bot app. When you respond to the triggered Adaptive Card action, then a sequential workflow is completed. When you get an Adaptive Card, it provides one or more buttons in the card for your input. You can also call an API, and then send another Adaptive Card in your conversation in response to the card action. In this tutorial, you'll learn:
- How to build workflow bot with Teams Toolkit.
- About the directory structure of your app.
You can see the following output:
Here's a list of tools you need for building and deploying your apps.
|Teams Toolkit||A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.|
|Microsoft Teams||Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call and all in one place.|
|Microsoft Edge (recommended) or Google Chrome||A browser with developer tools.|
|Microsoft 365 developer account||Access to Teams account with the appropriate permissions to install an app.|
The guide is tested on Teams Toolkit latest version and Nodejs version 14 and 16. The steps in this guide may work with other versions, but that hasn't been tested.
Prepare development environment
After you've installed the required tools, set up the development environment.
Install the Teams Toolkit
The Teams Toolkit helps simplify the development process with tools to provision and deploy cloud resources for your app, publish to the Teams store, and more.
You can use the toolkit with Visual Studio Code or CLI (command-line interface) called
- Open Visual Studio Code and select Extensions (Ctrl+Shift+X / ⌘⇧-X or View > Extensions).
- In the search box, enter Teams toolkit.
- Select Install next to the Teams Toolkit.
The Teams Toolkit icon appears in the Visual Studio Code Activity Bar after it's installed.
You can also find the Teams Toolkit on the Visual Studio Code Marketplace.
Build workflow bot
To build workflow bot using Visual Studio Code, perform the following steps:
Open Visual Studio Code.
Select the Teams Toolkit icon in the Visual Studio Code Activity Bar.
Select Create a New App.
Select Bot to create a new bot project.
Select Sequential Workflow in Chat as the app feature that you want to build in your app.
Select TypeScript as the programming language.
Select Default folder to store your project root folder in default location.
You can also change the default location by selecting Browse...
Enter a suitable name for your app.
The workflow bot is created in a few seconds, and you can see the scaffolding.
Select Run and Debug icon from the Visual Studio Code Activity Bar.
Select Debug (Edge) or Debug (Chrome) from the dropdown list.
Select Start Debugging.
Select Add or use the dropdown menu to add your workflow bot app to a team, chat, or meeting.
Take tour of source code
The created bot is a normal TeamsFx project that contains following folders:
|Folder / File||Contents|
||Main project file describes your application configuration and defines the set of actions to run in each lifecycle stages.|
||Name / value pairs are stored in environment files and used by
||VSCode files for debugging.|
||Templates for the Teams application manifest.|
||Templates for provisioning Azure resources.|
||The source code for the application.|
||Application entry point and
||An empty teams activity handler for bot customization.|
||Implementation that handles responding to a chat command.|
||Defines the Adaptive Card (UI) that is displayed in response to a chat command.|
||A generated Adaptive Card that is sent to Teams for the response of "doStuff" action.|
||Implements the handler for the
Interaction with the workflow bot
You can interact with the bot in Teams by sending a helloWorld command.
You'll receive the following command response in Adaptive Card:
Then you can select the DoStuff button to invoke the action, that responds with the following updated Adaptive Card:
Did you come up with something like this?
You've completed the tutorial to get started with workflow bot for Microsoft Teams.
Have an issue with this section? If so, please give us some feedback so we can improve this section.