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:

Screenshot shows the workflow bot output.

Prerequisites

9 minutes remaining

Here's a list of tools you need for building and deploying your apps.

	Install	For using
Required
	Visual Studio Code	JavaScript or TypeScript, build environments. Use the latest version.
	Teams Toolkit	A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version.
	Node.js	Back-end JavaScript runtime environment. For more information, see Node.js version compatibility table for project type.
	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.

Note

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

Visual Studio Code
Command line

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.

To install the TeamsFx CLI, use the npm package manager:

npm install -g @microsoft/teamsfx-cli

Depending on your configuration, you may need to use sudo to install the CLI:

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

It's more common on Linux and macOS systems. Ensure you add the npm global cache to your PATH. This step is normally done as part of the Node.js installer.
You can use the CLI with the teamsfx command. Verify that the command is working by running teamsfx -h.

Note

Before you run TeamsFx in PowerShell terminals, ensure you enable the remote signed execution policy for PowerShell.

Set up your Teams development tenant

A tenant is like a space, or a container where you chat, share files, and run meetings for your organization in Teams. You can also sideload and test your app.

Check for sideloading option

After creating the app, you must load your app in Teams without distributing it. This is known as sideloading. Sign-in to your Microsoft 365 account to view this option.

Note

Sideloading is necessary for previewing and testing apps in Teams local environment. Enable Sideloading to preview and test your app in Teams locally.

Do you already have a tenant, and do you have the admin access? Let's check if you really do! To verify sideload apps in Teams:

In the Teams client, select Store .
Select Manage your apps.
Select Publish an app.
Look for the option to Upload a custom app. If you see the option, sideloading apps is enabled.

Note

Contact Teams administrator, if you don't have the option to upload a custom app.

Create a free Teams developer tenant (optional)

If you don't have a Teams developer account, you can get it free. Join the Microsoft 365 developer program!

Go to the Microsoft 365 developer program.
Select Join Now and follow the onscreen instructions.
Select Setup E5 subscription from the welcome screen.
Set up administrator account. After you finish, the following screen displays.
Sign-in to Teams using the new administrator account. Now you should have the Upload a custom app option.

Build workflow bot

8 minutes remaining

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.

Note

You can also change the default location by selecting Browse...
Enter a suitable name for your app.
Select Enter.
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.

Screenshot shows the selection to add your workflow bot app.

Take tour of source code

Teams Toolkit provides components for building an app. After creating the project, you can view the project folders and files in the Explorer area of Visual Studio Code for JavaScript/TypeScript.

Screenshot shows the selection to add your workflow bot app.

The created bot is a normal TeamsFx project that contains following folders:

Folder / File	Contents
`teamsapp.yml`	Main project file describes your application configuration and defines the set of actions to run in each lifecycle stages.
`teamsapp.local.yml`	This overrides `teamsapp.yml` with actions that enable local execution and debugging.
`env/`	Name / value pairs are stored in environment files and used by `teamsapp.yml` to customize the provisioning and deployment rules.
`.vscode/`	VSCode files for debugging.
`appPackage/`	Templates for the Teams application manifest.
`infra/`	Templates for provisioning Azure resources.
`src/`	The source code for the application.
`src/index.js`	Application entry point and `restify` handlers for the Workflow bot.
`src/teamsBot.js`	An empty teams activity handler for bot customization.
`src/commands/helloworldCommandHandler.js`	Implementation that handles responding to a chat command.
`src/adaptiveCards/helloworldCommandResponse.json`	Defines the Adaptive Card (UI) that is displayed in response to a chat command.
`src/adaptiveCards/doStuffActionResponse.json`	A generated Adaptive Card that is sent to Teams for the response of "doStuff" action.
`src/cardActions/doStuffActionHandler.js`	Implements the handler for the `doStuff` button displayed in the Adaptive Card.

Interaction with the workflow bot

3 minutes remaining

You can interact with the bot in Teams by sending a helloWorld command.

Screenshot shows the selection to add your workflow bot app.

You'll receive the following command response in Adaptive Card:

Screenshot shows the selection to add your workflow bot app.

Then you can select the DoStuff button to invoke the action, that responds with the following updated Adaptive Card:

Screenshot shows the selection to add your workflow bot app.

Complete challenge

1 minutes remaining

Did you come up with something like this?

Screenshot shows the selection to add your workflow bot app.

Congratulations!

100% complete!

You've completed the tutorial to get started with workflow bot for Microsoft Teams.

Prerequisites

Prepare development environment

Install the Teams Toolkit

Build workflow bot

Take tour of source code

Interaction with the workflow bot

Complete challenge

Congratulations!

Feedback