This template showcases an app that unfurls a link into an adaptive card when URLs with a particular domain are pasted into the compose message area in Microsoft Teams or email body in Outlook.
Prerequisites
- Node.js, supported versions: 16, 18
- A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from Microsoft 365 developer program
- Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or TeamsFx CLI
- First, select the Teams Toolkit icon on the left in the VS Code toolbar.
- In the Account section, sign in with your Microsoft 365 account if you haven't already.
- Press F5 to start debugging which launches your app in Teams or Outlook using a web browser by select a target Microsoft application:
Debug in Teams
,Debug in Outlook
and click theRun and Debug
green arrow button. - When Teams or Outlook launches in the browser, select the Add button in the dialog to install your app to Teams.
- Paste a link ending with
.botframework.com
into compose message area in Teams or email body in Outlook. You should see an adaptive card unfurled.
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 |
.vscode/ |
VSCode files for local debug |
src/ |
The source code for the link unfurling application |
appPackage/ |
Templates for the Teams application manifest |
infra/ |
Templates for provisioning Azure resources |
The following files can be customized and demonstrate an example implementation to get you started.
File | Contents |
---|---|
src/index.ts |
Application entry point and restify handlers |
src/linkUnfurlingApp.ts |
The teams activity handler |
src/adaptiveCards/helloWorldCard.json |
The adaptive card |
This section introduces how to customize or extend this template, including:
- How to use Zero Install Link Unfurling in Teams
- How to add link unfurling cache in Teams
- How to customize Zero Install Link Unfurling's adaptive cards
- How to add stage view
- How to add task module (Teams)
- How to add adaptive card action (Teams)
- How to extend this template with Notification, Command and Workflow bot