Create and debug a search based message extension across Microsoft 365 - OfficeDev/TeamsFx GitHub Wiki

Important

Content in this document has been moved to Teams platform documentation. Please do not refer to or update this document.

Search based message extension across Microsoft 365

Search-based message extensions allow users to search an external system and share results through the compose message area of the Microsoft Teams client. You can now build and run your search-based message extensions in Teams, Outlook for Windows desktop and web experiences.

Search app demo

Prerequisites

Please note that after you enrolled your developer tenant in Office 365 Target Release, it may take couple days for the enrollment to take effect.

Getting Started

Create a message extension

  1. From Visual Studio Code, open the command palette (Ctrl+Shift+P), type Teams: Create a new Teams app
  2. Select Search-based message extension

image

Follow below instructions to get started with this application template for local debugging.

Test your application with Visual Studio Code

  1. Press F5 or use the Run and Debug Activity Panel in Visual Studio Code.

  2. Select a target Microsoft application where the message extension runs: Debug in Teams, Debug in Outlook and click the Run and Debug green arrow button.

  3. If you select Debug in Outlook, follow the instructions in a Visual Studio Code pop-up dialog.

    VS Code Pop up

  4. Click Install in Teams first and install the app in a Teams web client.

  5. Click Configure Outlook to connect the bot with Outlook channel in the Bot Framework Portal.

  6. Click Continue to continue to debug the app in Outlook.

Test your application with TeamsFx CLI

  1. Start debugging the project by executing the command teamsfx preview --local --m365-host <m365-host> in your project directory, where options for m365-host are teams or outlook.

  2. If you select m365-host as outlook, follow the instructions in the command dialog. CLI Pop up

  3. Select Install in Teams first and install the app in a Teams web client.

  4. Click Configure Outlook to connect the bot with Outlook channel in the Bot Framework Portal.

  5. Click Continue to continue to debug the app in Outlook.

Use this message extension app

This template provides a simple functionality to search for npm packages and render the result in Adaptive Card.

Use this app in Teams

  • @mention Your message extension from the search box area. AtBotFromSearch

  • @mention your message extension from the compose message area. AtBotFromMessage

  • Click the ... under compose message area, find your message extension. ComposeArea

Use this app in Outlook

  • Click the "More apps" icon under compose email area, find your message extension. InOutlook

References

⚠️ **GitHub.com Fallback** ⚠️