Search Based Message Extension with Single Sign On, Microsoft Graph and SharePoint Online

This sample project demonstrates how to build a search based message extension that a user can use to query data in a SharePoint List and inject that data into a message as a card.

The message extension can be used across Microsoft 365:

Microsoft Teams
Microsoft Outlook
Microsoft 365 Copilot

Prerequisites

Teams Toolkit for Visual Studio Code v5.2.0
Microsoft 365 tenant with custom apps enabled.

Get started

Configure SharePoint site

Provision a new SharePoint Online team site using Product Support template from SharePoint look book.
Create a new Indexed column on the Product list. Set Title field as the primary index for the column.

Configure environment variables

Create env/.env.local file.

TEAMSFX_ENV=local

BOT_ID=
TEAMS_APP_ID=
BOT_DOMAIN=
BOT_ENDPOINT=
TEAMS_APP_TENANT_ID=
AAD_APP_CLIENT_ID=
AAD_APP_OBJECT_ID=
AAD_APP_TENANT_ID=
AAD_APP_OAUTH_AUTHORITY=
AAD_APP_OAUTH_AUTHORITY_HOST=
AAD_APP_ACCESS_AS_USER_PERMISSION_ID=
M365_TITLE_ID=
M365_APP_ID=
SPO_HOSTNAME=
SPO_SITE_URL=

Update SPO_HOSTNAME variable to be the hostname of you SharePoint Online tenant, e.g. contoso.sharepoint.com.
Update SPO_SITE_URL variable to be the server relative URL to the Product support SharePoint site, e.g. sites/productmarketing.
Create env/.env.local.user file.

SECRET_BOT_PASSWORD=
SECRET_AAD_APP_CLIENT_SECRET=

Debug

Press F5 and follow the instructions.

garrytrinder / msgext-products-spo