Teams/M365 messaging extension app handling (action-based) data retrieval and writing back

This sample is a Teams and M365 Messaging Extension app created using the Teams Toolkit for Visual Studio Code. It is also intended to be used in Copilot. It retrieves a list of products to be further dealt with: Overview listed, order e.g. while all sent with Adaptive Cards in Teams or Outlook, resp Copilot ...started with the React with Fluent UI template. It makes use of several Teams Dev capabilities (Tap with FluentUI, Azure Function, Messaging Extension)

App result:

Task Module to select a product

Order Card result with weekday order option

Display Order Card result

App in action

• Office 365 tenant

This sample was created using the Teams Toolkit with Visual Studio Code. Nearly the same sample was also realized with the using the Teams Toolkit with Visual Studio 2022

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

• Create a simple Azure Table as described here

• Create entities (PartitionKey becomes Id, RowKey becomes Name, Orders=int, Category=string)

• Clone the repository

  git clone https://github.com/mmsharepoint/msgext-action-search-data-node.git

• Create .env.local from .env.dev

  copy .\env\.env.dev .\env\.env.local

• Fill in parameters from Azure Table: AZURE_TABLE_NAME, AZURE_TABLE_ACCOUNTNAME, AZURE_TABLE_ACCOUNT_KEY

• In Teams Toolkit:

1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
2. In the Account section, sign in with your Microsoft 365 account if you haven't already.
3. Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug in Teams (Edge) or Debug in Teams (Chrome).
4. When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
5. Run the Messaging Extension from the offered Chat window

Congratulations! You are running an application that can now show a beautiful web page in Teams, Outlook and the Microsoft 365 app.